Skip to content

Commit

Permalink
feat(ld-heading): heading theming and coloring
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed May 27, 2021
1 parent a84f392 commit 124b26f
Show file tree
Hide file tree
Showing 15 changed files with 262 additions and 134 deletions.
28 changes: 23 additions & 5 deletions src/docs/components/docs-example/docs-example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,41 @@
display: none;
}

.docs-example__tools-scroll-container {
overflow: auto;
display: flex;
width: 100%;
}

.docs-example__tools {
padding: 0 var(--ld-sp-8);
height: 3rem;
padding: var(--ld-sp-8);
border-style: solid;
border-width: 1px;
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
border-bottom-left-radius: var(--ld-sp-8);
border-bottom-right-radius: var(--ld-sp-8);
flex-grow: 1;

.docs-web-css-switch {
.docs-switch-web-css {
margin-right: auto;
flex-shrink: 0;
}

> :not(:first-child) {
margin-left: var(--ld-sp-12);
}

.docs-example__tool-buttons {
display: flex;
align-items: center;
justify-content: flex-end;

> :not(:first-child) {
margin-left: var(--ld-sp-12);
}
}
}

.docs-example__show {
Expand All @@ -80,6 +97,7 @@
border-top-left-radius: var(--ld-sp-8);
border-top-right-radius: var(--ld-sp-8);
padding: 0 var(--ld-sp-8) var(--ld-sp-24);
overflow: hidden;

@media (max-width: 48rem) {
padding: 0 0 var(--ld-sp-24);
Expand All @@ -89,8 +107,8 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
justify-content: space-evenly;
width: 100%;

> * {
margin: var(--ld-sp-24) var(--ld-sp-24) 0;
Expand Down
16 changes: 11 additions & 5 deletions src/docs/components/docs-example/docs-example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,17 @@ export class DocsExample {
<slot name="show"></slot>
<slot name="showCssComponent"></slot>
</div>
<div class="docs-example__tools">
{this.codeCssComponent && <docs-web-css-switch></docs-web-css-switch>}
<docs-pick-theme />
<docs-copy-to-cb textToCopy={decodeURIComponent(this.code)} />
<docs-toggle-code isOn={this.isCodeVisible} />
<div class="docs-example__tools-scroll-container">
<div class="docs-example__tools">
{this.codeCssComponent && (
<docs-switch-web-css></docs-switch-web-css>
)}
<div class="docs-example__tool-buttons">
<docs-pick-theme />
<docs-copy-to-cb textToCopy={decodeURIComponent(this.code)} />
<docs-toggle-code isOn={this.isCodeVisible} />
</div>
</div>
</div>
<div class="docs-example__code">
<slot name="code"></slot>
Expand Down
1 change: 1 addition & 0 deletions src/docs/components/docs-main/docs-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
color: var(--ld-col-rblck-default);
background-color: var(--ld-col-vy2);
border-left: solid var(--ld-sp-6) var(--ld-col-vy3);
font: var(--ld-typo-body-m);

code {
background-color: var(--ld-col-vy3);
Expand Down
4 changes: 0 additions & 4 deletions src/docs/components/docs-switch-dark-light/assets/theme.svg
View file

This file was deleted.

52 changes: 29 additions & 23 deletions ...cs-web-css-switch/docs-web-css-switch.css → ...cs-switch-web-css/docs-switch-web-css.css
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,99 @@
@define-mixin docs-web-css-switch-ui-light {
.docs-web-css-switch button {
@define-mixin docs-switch-web-css-ui-light {
.docs-switch-web-css button {
background-color: var(--ld-col-bg-g);

&:focus:focus-visible {
.docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
.docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb5);
}
}
&:active,
&:active:focus-visible {
.docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
.docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb55);
background-color: transparent;
}
}
}
.docs-web-css-switch__option {
.docs-switch-web-css__option {
color: var(--ld-col-rblck4);

&:hover:not(.docs-web-css-switch__option--active) {
&:hover:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb5);
}
}

.docs-web-css-switch__option--active {
.docs-switch-web-css__option--active {
background-color: var(--ld-col-wht);
color: var(--ld-col-rblck-default);
}
}
@define-mixin docs-web-css-switch-ui-dark {
.docs-web-css-switch button {
@define-mixin docs-switch-web-css-ui-dark {
.docs-switch-web-css button {
background-color: var(--ld-col-rblck5);

&:focus:focus-visible {
.docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
.docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb3);
background-color: var(--ld-col-rblck-default);
}
}
&:active,
&:active:focus-visible {
.docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
.docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb2);
background-color: var(--ld-col-rblck-default);
}
}
}
.docs-web-css-switch__option {
.docs-switch-web-css__option {
color: var(--ld-col-rblck2);

&:hover:not(.docs-web-css-switch__option--active) {
&:hover:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb3);
}
}

.docs-web-css-switch__option--active {
background-color: var(--ld-col-rblck2);
.docs-switch-web-css__option--active {
background-color: var(--ld-col-rblck3);
color: var(--ld-col-rblck-default);
}
}

@mixin docs-web-css-switch-ui-light;
@mixin docs-switch-web-css-ui-light;

@media (prefers-color-scheme: dark) {
@mixin docs-web-css-switch-ui-dark;
@mixin docs-switch-web-css-ui-dark;
}
.docs-ui-dark {
@mixin docs-web-css-switch-ui-dark;
@mixin docs-switch-web-css-ui-dark;
}
.docs-ui-light {
@mixin docs-web-css-switch-ui-light;
@mixin docs-switch-web-css-ui-light;
}

.docs-web-css-switch button {
.docs-switch-web-css button {
--switch-transition-duration: 0s;
font: var(--ld-typo-body-s);
font-weight: 900;
border-radius: var(--ld-sp-4);
display: flex;
align-items: center;
align-items: stretch;
position: relative;
border: 0;
cursor: pointer;
padding: 0;
overflow: hidden;
}

.docs-web-css-switch__option {
.docs-switch-web-css__option {
position: relative;
padding: var(--ld-sp-4) var(--ld-sp-16) var(--ld-sp-2);
padding: var(--ld-sp-8) var(--ld-sp-16);
z-index: 0;
line-height: 0;
}

.docs-switch-web-css__icon {
width: 1.5rem;
height: 1rem;
}
77 changes: 77 additions & 0 deletions src/docs/components/docs-switch-web-css/docs-switch-web-css.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import '../../../components' // type definitions for type checks and intelliSense
import {
Component,
Event,
EventEmitter,
h,
Host,
Listen,
Prop,
} from '@stencil/core'

/** @internal **/
@Component({
tag: 'docs-switch-web-css',
styleUrl: 'docs-switch-web-css.css',
shadow: false,
})
export class DocsSwitchWebCss {
/** On stands for web component; off stands for CSS component */
@Prop({ mutable: true }) isOn = true

/** Theme select change event. */
@Event() switchComponent: EventEmitter<boolean>

@Listen('click', { capture: true })
handleClick(ev) {
ev.preventDefault()
this.isOn = !this.isOn
this.switchComponent.emit(this.isOn)
}

render() {
return (
<Host class="docs-switch-web-css">
<button role="switch" aria-checked={this.isOn ? 'true' : 'false'}>
<ld-sr-only>
<slot></slot>
</ld-sr-only>
<span
class={`docs-switch-web-css__option${
this.isOn ? ' docs-switch-web-css__option--active' : ''
}`}
>
<svg
class="docs-switch-web-css__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 800"
>
<title>Web Component</title>
<path
fill="currentColor"
d="M196.3 400l200 346.4H200L0 400 200 53.6h196.3L196.3 400zM505.4 53.6H600L800 400 600 746.4h-94.6l-98-169.8H502L604 400 502 223.4h-94.7l98-169.8z"
/>
</svg>
</span>
<span
class={`docs-switch-web-css__option${
!this.isOn ? ' docs-switch-web-css__option--active' : ''
}`}
>
<svg
class="docs-switch-web-css__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 300"
>
<title>CSS Component</title>
<path
fill="currentColor"
d="M0 0h238.7v99.8H99.8v99.8h139v99.9H0V0zM283.2 0h235.3v85.6H381.6v17h136.9v196.9H283.2v-89.9h136.9v-17H283.2V0zM564.7 0H800v85.6H663.1v17H800v196.9H564.7v-89.9h136.9v-17H564.7V0z"
/>
</svg>
</span>
</button>
</Host>
)
}
}
57 changes: 0 additions & 57 deletions src/docs/components/docs-web-css-switch/docs-web-css-switch.tsx
View file

This file was deleted.

Loading

0 comments on commit 124b26f

Please sign in to comment.