diff --git a/plugins-styles/src/examples.css b/plugins-styles/src/examples.css index c75c42e..518f465 100644 --- a/plugins-styles/src/examples.css +++ b/plugins-styles/src/examples.css @@ -1,24 +1,57 @@ -@import url("styles.css"); +@import url("lib/styles.css"); html, body { - margin: 0; + background: var(--app-black); + color: var(--app-white); + margin: 0 var(--spacing-20); padding: 0; } +section { + border-bottom: 1px solid var(--app-white); + padding-block: var(--spacing-32); +} + ul { list-style: none; margin: 0; padding: 0; } +.code { + background-color: var(--app-white); + border-radius: var(--spacing-4); + color: var(--app-black); + display: block; + padding: var(--spacing-20); +} + +.theme-group { + border-radius: var(--spacing-20); + margin-block-end: var(--spacing-20); + padding: var(--spacing-32); + + &[data-theme="dark"] { + background-color: var(--db-primary); + border: 1px solid var(--db-quaternary); + } + + &[data-theme="light"] { + background-color: var(--lb-primary); + border: 1px solid var(--lb-quaternary); + } +} + +.component-section { + margin-block-end: var(--spacing-40); + } + + /* COLOR */ .color-section { - background: var(--app-black); - color: var(--app-white); display: flex; flex-wrap: wrap; - gap: 80px; + gap: calc(var(--spacing-40) * 2); list-style: none; - padding: 10px 30px; width: 100%; } @@ -26,14 +59,39 @@ ul { align-items: center; display: flex; justify-content: space-between; - margin-block-end: 10px; + margin-block-end: var(--spacing-16); } .color-preview { - block-size: 35px; + block-size: var(--spacing-36); border: 1px solid #8F9DA3; - border-radius: 4px; + border-radius: var(--spacing-4); display: block; - inline-size: 35px; - margin-inline-start: 10px; + inline-size: var(--spacing-36); + margin-inline-start: var(--spacing-16); +} + +/* SPACING */ +.spacing-group { + display: grid; + margin-block-end: var(--spacing-16); + grid-template-columns: calc(var(--spacing-4) * 30) 1fr; +} + +.spacing-label { + margin-inline-end: var(--spacing-24); +} + +.spacing-preview { + background-color: var(--error-500); +} + + /* BUTTONS */ +.button-list { + display: flex; + gap: var(--spacing-20); + + &:not(:last-child) { + margin-block-end: var(--spacing-20); + } } \ No newline at end of file diff --git a/plugins-styles/src/examples.html b/plugins-styles/src/examples.html index 0a21c70..7abc522 100644 --- a/plugins-styles/src/examples.html +++ b/plugins-styles/src/examples.html @@ -7,250 +7,513 @@

Plugins styles

+
+

Colors

+ +
-

Colors

- +
+

Fonts

+

Display

+

Title L

+

Title M

+

Title S

+

Headline L

+

Headline M

+

Headline S

+

Body large

+

Body medium

+

Body small

+

Caption

+

Code font

-

Fonts

+ + <p class="display">Display</p>
+ <p class="title-l">Title L</p>
+ <p class="title-m">Title M</p>
+ <p class="title-s">Title S</p>
+ <p class="headline-l">Headline L</p>
+ <p class="headline-m">Headline M</p>
+ <p class="headline-s">Headline S</p>
+ <p class="body-l">Body large</p>
+ <p class="body-m">Body medium</p>
+ <p class="body-s">Body small</p>
+ <p class="caption">Caption</p>
+ <p class="code-font">Code font</p>
+ +
-

Buttons

- +
+

Spacing

+ +
- +
+

Icons

+
+ + + + + + + +
+
- +
+

Buttons

+

Primary button

+
+
+
    +
    • +
    • +
+
    +
    • +
    • +
+
+ + + <div data-theme="dark">
+  <button type="button" data-appearance="primary">Primary Dark</button>
+  <button type="button" data-appearance="primary">Primary Dark destructive</button>
+ </div> + +
+ +
+
+
    +
    • +
    • +
+
    +
    • +
    • +
+
+ + <div data-theme="light">
+  <button type="button" data-appearance="primary">Primary Light</button>
+  <button type="button" data-appearance="primary" data-variant="destructive">Primary Light destructive</button>
+ </div> + +
+ +

Secondary button

+
+
+
    +
    • +
    • +
+
+ + <div data-theme="dark">
+  <button type="button" data-appearance="secondary">Secondary Dark</button>
+ </div> + +
+ +
+
+
    +
    • +
    • +
+
+ + <div data-theme="light">
+  <button type="button" data-appearance="secondary">Secondary Light</button>
+ </div> + +
+
+ +
+

Checkox

+
+
+
+ + +
+
+ + +
+
+ + <div data-theme="dark">
+  <div class="checkbox-container">
+    <input class="checkbox-input" type="checkbox" id="checkbox1" value="checkbox_one" />
+    <label for="checkbox1" class="checkbox-hidden">Dark checkbox</label>
+  </div>

+  <div class="checkbox-container">
+    <input class="checkbox-input" type="checkbox" id="checkbox2" value="checkbox_second" />
+    <label for="checkbox2" class="body-small">Dark checkbox with label</label>
+  </div> + </div> + +
+ +
+
+
+ + +
+ +
+ + <div data-theme="light">
+  <div class="checkbox-container">
+    <input class="checkbox-input" type="checkbox" id="checkbox3" value="third" />
+    <label for="checkbox3" class="checkbox-hidden">Light checkbox</label>
+  </div>

+  <div class="checkbox-container">
+    <input class="checkbox-input" type="checkbox" id="checkbox4" value="checkbox_fourth" />
+    <label for="checkbox4" class="body-small">Light checkbox with label</label>
+  </div> + </div> + +
+
+ +
+

Radio button

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + <div data-theme="dark">
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="quokka" name="animal" value="quokka">
+   <label class="radio-label" for="quokka">quokka</label>
+  </div>
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="capybara" name="animal" value="capybara">
+   <label class="radio-label" for="capybara">capybara</label>
+  </div>
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="goat" name="animal" value="goat">
+   <label class="radio-label" for="goat">goat</label>
+  </div>
+ </div> + +
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + <div data-theme="light">
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="rabbit" name="small-animals" value="rabbit">
+   <label class="radio-label" for="rabbit">rabbit</label>
+  </div>
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="mouse" name="small-animals" value="mouse">
+   <label class="radio-label" for="mouse">mouse</label>
+  </div>
+  <div class="radio-container">
+   <input type="radio" class="radio-input" id="chinchilla" name="small-animals" value="chinchilla">
+   <label class="radio-label" for="chinchilla">chinchilla</label>
+  </div>
+ </div> + +
+
-
diff --git a/plugins-styles/src/lib/components/button.css b/plugins-styles/src/lib/components/button.css index 5f268b9..3be757c 100644 --- a/plugins-styles/src/lib/components/button.css +++ b/plugins-styles/src/lib/components/button.css @@ -1,5 +1,5 @@ button { - border: 0; + border: 1px solid transparent; font-weight: 500; font-size: 12px; border-radius: 8px; @@ -10,18 +10,22 @@ button { &:hover:not(:disabled) { cursor: pointer; } + + &:focus-visible { + outline: none; + } } [data-theme="dark"] { [data-appearance="primary"]:is(button) { background-color: var(--da-primary); - &:hover { + &:hover:not(:disabled) { background-color: var(--da-tertiary); } - &:focus { - border: 2px solid var(--da-primary); + &:focus, &:focus-visible { + border:1px solid var(--da-tertiary); } &:disabled { @@ -33,9 +37,13 @@ button { &[data-variant="destructive"] { background-color: var(--error-500); - &:focus { + &:hover:not(:disabled) { + background-color: var(--error-500); + } + + &:focus, &:focus-visible { background-color: var(--app-red); - border: 2px solid var(--error-950); + border: 1px solid var(--error-950); } &:disabled { @@ -48,19 +56,70 @@ button { [data-appearance="secondary"]:is(button) { background-color: var(--db-tertiary); + color: var(--df-secondary); + + &:hover:not(:disabled) { + background-color: var(--db-quaternary); + color: var(--da-primary); + } + + &:focus, &:focus-visible { + border: 1px solid var(--da-primary); + } + + &:disabled { + background-color: transparent; + border: 1px solid var(--db-quaternary); + } } } [data-theme="light"] { [data-appearance="primary"]:is(button) { background-color: var(--la-primary); + color: var(--lb-primary); + + &:disabled { + background-color: transparent; + border: 1px solid var(--lb-quaternary); + color: var(--lf-secondary); + } &[data-variant="destructive"] { background-color: var(--error-500); + + &:disabled { + background-color: transparent; + border: 1px solid var(--error-200); + color: var(--lf-secondary); + } + } + + &:hover:not(:disabled) { + background-color: var(--la-tertiary); + } + + &:focus, &:focus-visible { + border: 1px solid var(--la-tertiary); } } [data-appearance="secondary"]:is(button) { background-color: var(--lb-tertiary); + color: var(--lf-secondary); + + &:hover:not(:disabled) { + background-color: var(--lb-quaternary); + color: var(--la-primary); + } + + &:focus, &:focus-visible { + background-color: var(--lb-tertiary); + border: 1px solid var(--la-primary); + } + + &:disabled { + border: 1px solid var(--lb-quaternary); + } } } \ No newline at end of file diff --git a/plugins-styles/src/lib/components/checkbox.css b/plugins-styles/src/lib/components/checkbox.css new file mode 100644 index 0000000..d10f263 --- /dev/null +++ b/plugins-styles/src/lib/components/checkbox.css @@ -0,0 +1,122 @@ +.checkbox-container { + align-items: center; + color: var(--df-secondary); + display: flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + & .checkbox-input[type="checkbox"] { + appearance: none; + block-size: var(--spacing-16); + border-radius: var(--spacing-4); + box-sizing: border-box; + cursor: pointer; + inline-size: var(--spacing-16); + margin: 0; + position: relative; + transition: 120ms all ease-in-out; + + &::after { + block-size: 6px; + border-style: solid; + border-width: 0; + content: ""; + display: flex; + inline-size: 3px; + margin-block-start: 2px; + margin-inline-start: 5px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + + } + + &:focus-visible, &:focus-within { + outline: none; + } + } + + & label { + cursor: pointer; + margin-inline-start: var(--spacing-8); + } +} + +.checkbox-hidden { + block-size: 1px; + border: 0; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + inline-size: 1px; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; +} + +[data-theme="dark"] { + .checkbox-input[type="checkbox"] { + background-color: var(--db-quaternary); + border: 1px solid var(--df-secondary); + + &::after { + border-color: var(--db-primary); + } + + &:hover { + background-color: var(--db-quaternary); + border: 1px solid var(--da-primary-muted); + } + + + &:focus { + background-color: var(--db-quaternary); + border: 1px solid var(--da-primary); + } + + &:checked { + background-color: var(--da-primary); + border: 1px solid var(--da-primary); + } + + &:checked::after{ + border-color: var(--db-primary); + border-width: 0 2px 2px 0; + } + } +} + +[data-theme="light"] { + .checkbox-input[type="checkbox"] { + background-color: var(--lb-quaternary); + border: 1px solid var(--la-primary); + + &::after { + border-color: var(--db-primary); + } + + &:hover { + background-color: var(--lf-secondary); + border: 1px solid var(--lf-secondary); + } + + + &:focus { + border: 1px solid var(--lf-secondary); + } + + &:checked { + background-color: var(--la-primary); + border: 1px solid var(--la-primary); + } + + &:checked::after{ + border-color: var(--lb-primary); + border-width: 0 2px 2px 0; + } + } +} \ No newline at end of file diff --git a/plugins-styles/src/lib/components/icon.css b/plugins-styles/src/lib/components/icon.css new file mode 100644 index 0000000..c7d9aab --- /dev/null +++ b/plugins-styles/src/lib/components/icon.css @@ -0,0 +1,39 @@ +.icon { + display: flex; + align-items: center; + block-size: var(--spacing-16); + cursor: default; + font-family: var(--body-font); + font-size: var(--font-size-medium); + inline-size: var(--spacing-16); + justify-content: center; + user-select: none; +} + +.icon-arrow-bottom { + background-image: url('../icons/arrow-bottom.svg'); + } + + .icon-arrow-left { + background-image: url('../icons/arrow-left.svg'); + } + + .icon-arrow-right { + background-image: url('../icons/arrow-right.svg'); + } + + .icon-arrow-top { + background-image: url('../icons/arrow-top.svg'); + } + + .icon-actions-close { + background-image: url('../icons/actions-close.svg'); + } + + .icon-actions-close-l { + background-image: url('../icons/actions-close-l.svg'); + } + + .icon-actions-delete { + background-image: url('../icons/actions-delete.svg'); + } \ No newline at end of file diff --git a/plugins-styles/src/lib/components/radio-button.css b/plugins-styles/src/lib/components/radio-button.css new file mode 100644 index 0000000..aedecea --- /dev/null +++ b/plugins-styles/src/lib/components/radio-button.css @@ -0,0 +1,91 @@ +.radio-container { + align-items: center; + display: flex; + + &:not(:last-child) { + margin-block-end: var(--spacing-8); + } + + .radio-input { + align-items: center; + appearance: none; + block-size: var(--spacing-16); + border-radius: 50%; + display: grid; + inline-size: var(--spacing-16); + justify-content: center; + margin: 0; + margin-block-start: 2px; + transform: translateY(-0.075em); + } + + .radio-input::before { + border-radius: 50%; + content: ""; + transform: scale(0); + transition: 120ms transform ease-in-out; + } + + .radio-input:checked::before { + transform: scale(1); + } + + .radio-input:focus-within { + outline: none; + } + + .radio-label { + color: var(--df-secondary); + cursor: pointer; + margin-inline-start: var(--spacing-8); + } +} + +[data-theme="dark"] { + .radio-input { + background-color: var(--db-quaternary); + border: 1px solid var(--df-secondary); + } + + .radio-input::before { + border: 5px solid var(--db-primary); + } + + .radio-input:checked { + background-color: var(--da-primary); + border: 1px solid var(--da-primary); + } + + .radio-input:hover { + border: 1px solid var(--da-primary-muted); + } + + .radio-input:focus { + border: 1px solid var(--da-primary); + } +} + + +[data-theme="light"] { + .radio-input { + background-color: var(--lb-quaternary); + border: 1px solid var(--lf-secondary); + } + + .radio-input::before { + border: 5px solid var(--lb-primary); + } + + .radio-input:checked { + background-color: var(--la-primary); + border: 1px solid var(--la-primary); + } + + .radio-input:hover { + border: 1px solid var(--la-primary-muted); + } + + .radio-input:focus { + border: 1px solid var(--la-primary); + } +} \ No newline at end of file diff --git a/plugins-styles/src/lib/components/tabs.css b/plugins-styles/src/lib/components/tabs.css new file mode 100644 index 0000000..e69de29 diff --git a/plugins-styles/src/lib/core/fonts.css b/plugins-styles/src/lib/core/fonts.css index 667056c..8074a9e 100644 --- a/plugins-styles/src/lib/core/fonts.css +++ b/plugins-styles/src/lib/core/fonts.css @@ -3,7 +3,10 @@ :root { /* Font weight */ --font-weight-regular: 400; - --font-weight-medium: 500; + --font-weight-bold: 500; + --font-line-height-s: 1.2; + --font-line-height-m: 1.4; + --font-line-height-l: 1.2; } html, body { @@ -13,43 +16,76 @@ html, body { } .display { - font-weight: 400; + font-weight: var(--font-weight-regular); font-size: 36px; line-height: 1.2; } -.title-small { - font-weight: 400; +.title-s { + font-weight: var(--font-weight-regular); font-size: 14px; line-height: 1.2; } -.title-medium { - font-weight: 400; +.title-m { + font-weight: var(--font-weight-regular); font-size: 20px; line-height: 1.2; } -.title-large { - font-weight: 400; +.title-l { + font-weight: var(--font-weight-regular); font-size: 24px; line-height: 1.1; } -.body-small { - font-weight: 400; +.headline-s { + font-weight: var(--font-weight-bold); + font-size: 12px; + line-height: 1.2; + text-transform: uppercase; +} + +.headline-m { + font-weight: var(--font-weight-regular); + font-size: 16px; + line-height: 1.4; + text-transform: uppercase; +} + +.headline-l { + font-weight: var(--font-weight-regular); + font-size: 18px; + line-height: 1.2; + text-transform: uppercase; +} + +.body-s { + font-weight: var(--font-weight-regular); font-size: 12px; line-height: 1.4; } -.body-medium { - font-weight: 400; +.body-m { + font-weight: var(--font-weight-regular); font-size: 14px; line-height: 1.5; } -.body-large { - font-weight: 400; +.body-l { + font-weight: var(--font-weight-regular); font-size: 16px; line-height: 1.5; } + +.caption { + font-weight: var(--font-weight-regular); + font-size: 12px; + line-height: 1.2; +} + +.code-font { + font-weight: var(--font-weight-regular); + font-size: 12px; + line-height: 1.5; +} \ No newline at end of file diff --git a/plugins-styles/src/lib/core/spacing.css b/plugins-styles/src/lib/core/spacing.css new file mode 100644 index 0000000..5221e05 --- /dev/null +++ b/plugins-styles/src/lib/core/spacing.css @@ -0,0 +1,12 @@ +:root { + --spacing-4: 0.25rem; + --spacing-8: calc(var(--spacing-4) * 2); + --spacing-12: calc(var(--spacing-4) * 3); + --spacing-16: calc(var(--spacing-4) * 4); + --spacing-20: calc(var(--spacing-4) * 5); + --spacing-24: calc(var(--spacing-4) * 6); + --spacing-28: calc(var(--spacing-4) * 7); + --spacing-32: calc(var(--spacing-4) * 8); + --spacing-36: calc(var(--spacing-4) * 9); + --spacing-40: calc(var(--spacing-4) * 10); +} \ No newline at end of file diff --git a/plugins-styles/src/lib/core/swatches.css b/plugins-styles/src/lib/core/swatches.css index b92fde9..af90529 100644 --- a/plugins-styles/src/lib/core/swatches.css +++ b/plugins-styles/src/lib/core/swatches.css @@ -51,6 +51,7 @@ --warning-500: #fe4811; --warning-950: #440806; --error-50: #fff0f3; + --error-200: #ffcada; --error-500: #ff3277; --error-950: #500124; --info-50: #f0f8ff; diff --git a/plugins-styles/src/lib/icons/actions-close-l.svg b/plugins-styles/src/lib/icons/actions-close-l.svg new file mode 100644 index 0000000..f34951e --- /dev/null +++ b/plugins-styles/src/lib/icons/actions-close-l.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/actions-close.svg b/plugins-styles/src/lib/icons/actions-close.svg new file mode 100644 index 0000000..dbd9b56 --- /dev/null +++ b/plugins-styles/src/lib/icons/actions-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/actions-delete.svg b/plugins-styles/src/lib/icons/actions-delete.svg new file mode 100644 index 0000000..fa1dfcb --- /dev/null +++ b/plugins-styles/src/lib/icons/actions-delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/arrow-bottom.svg b/plugins-styles/src/lib/icons/arrow-bottom.svg new file mode 100644 index 0000000..c9887ec --- /dev/null +++ b/plugins-styles/src/lib/icons/arrow-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/arrow-left.svg b/plugins-styles/src/lib/icons/arrow-left.svg new file mode 100644 index 0000000..9e97c91 --- /dev/null +++ b/plugins-styles/src/lib/icons/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/arrow-right.svg b/plugins-styles/src/lib/icons/arrow-right.svg new file mode 100644 index 0000000..aee78ff --- /dev/null +++ b/plugins-styles/src/lib/icons/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/icons/arrow-top.svg b/plugins-styles/src/lib/icons/arrow-top.svg new file mode 100644 index 0000000..370bad1 --- /dev/null +++ b/plugins-styles/src/lib/icons/arrow-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins-styles/src/lib/styles.css b/plugins-styles/src/lib/styles.css index 8d6cc59..7b381ae 100644 --- a/plugins-styles/src/lib/styles.css +++ b/plugins-styles/src/lib/styles.css @@ -1,6 +1,11 @@ +/*core*/ +@import url("core/swatches.css"); +@import url("core/fonts.css"); +@import url("core/spacing.css"); + /*components*/ @import url("components/button.css"); - -/*core*/ -@import url("core/fonts.css"); -@import url("core/swatches.css"); \ No newline at end of file +@import url("components/checkbox.css"); +@import url("components/radio-button.css"); +@import url("components/tabs.css"); +@import url("components/icon.css"); \ No newline at end of file