From 00ed96d696f5b47d1d977732d5de5a1fa6e36315 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Thu, 22 Feb 2024 07:21:19 +0100 Subject: [PATCH] feat: plugins styles --- libs/plugins-styles/src/examples.css | 20 +-- libs/plugins-styles/src/examples.html | 169 +++++++++++++++++- .../src/lib/components/icon.css | 96 +++++++--- .../src/lib/components/input.css | 112 ++++++++++++ .../src/lib/components/select.css | 53 ++++++ .../src/lib/components/tabs.css | 0 libs/plugins-styles/src/lib/core/fonts.css | 43 ++--- libs/plugins-styles/src/lib/core/generic.css | 18 ++ .../src/lib/icons/actions-add.svg | 1 + .../src/lib/icons/actions-copy.svg | 1 + .../src/lib/icons/actions-help.svg | 1 + .../src/lib/icons/actions-hide.svg | 1 + .../src/lib/icons/actions-info.svg | 1 + .../src/lib/icons/actions-loading.svg | 1 + .../src/lib/icons/actions-lock.svg | 1 + .../src/lib/icons/actions-more.svg | 1 + .../src/lib/icons/actions-remove.svg | 1 + .../src/lib/icons/actions-search.svg | 1 + .../src/lib/icons/actions-show.svg | 1 + .../src/lib/icons/actions-unlock.svg | 1 + .../src/lib/icons/app-download.svg | 1 + libs/plugins-styles/src/lib/styles.css | 6 +- 22 files changed, 471 insertions(+), 59 deletions(-) create mode 100644 libs/plugins-styles/src/lib/components/input.css create mode 100644 libs/plugins-styles/src/lib/components/select.css delete mode 100644 libs/plugins-styles/src/lib/components/tabs.css create mode 100644 libs/plugins-styles/src/lib/core/generic.css create mode 100644 libs/plugins-styles/src/lib/icons/actions-add.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-copy.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-help.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-hide.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-info.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-loading.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-lock.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-more.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-remove.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-search.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-show.svg create mode 100644 libs/plugins-styles/src/lib/icons/actions-unlock.svg create mode 100644 libs/plugins-styles/src/lib/icons/app-download.svg diff --git a/libs/plugins-styles/src/examples.css b/libs/plugins-styles/src/examples.css index 518f465..1ca05dc 100644 --- a/libs/plugins-styles/src/examples.css +++ b/libs/plugins-styles/src/examples.css @@ -4,7 +4,6 @@ html, body { background: var(--app-black); color: var(--app-white); margin: 0 var(--spacing-20); - padding: 0; } section { @@ -12,12 +11,6 @@ section { padding-block: var(--spacing-32); } -ul { - list-style: none; - margin: 0; - padding: 0; -} - .code { background-color: var(--app-white); border-radius: var(--spacing-4); @@ -32,12 +25,10 @@ ul { 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); } } @@ -86,12 +77,19 @@ ul { background-color: var(--error-500); } - /* BUTTONS */ -.button-list { + /* INPUT / BUTTONS */ + .inputs-list, + .button-list { display: flex; gap: var(--spacing-20); &:not(:last-child) { margin-block-end: var(--spacing-20); } +} + +/* ICON */ +.icons-section { + display: flex; + gap: var(--spacing-8); } \ No newline at end of file diff --git a/libs/plugins-styles/src/examples.html b/libs/plugins-styles/src/examples.html index 7abc522..e443f8b 100644 --- a/libs/plugins-styles/src/examples.html +++ b/libs/plugins-styles/src/examples.html @@ -309,14 +309,175 @@

Icons

-
+
- - - + + + + + + + + + + + + + + + + +
+ + <span class="icon icon-arrow-bottom"></span>
+ <span class="icon icon-arrow-top"></span>
+ <span class="icon icon-arrow-right"></span>
+ <span class="icon icon-arrow-left"></span>
+ <span class="icon icon-close"></span>
+ <span class="icon icon-close-l"></span>
+ <span class="icon icon-delete"></span>
+ <span class="icon icon-add"></span>
+ <span class="icon icon-remove"></span>
+ <span class="icon icon-search"></span>
+ <span class="icon icon-copy"></span>
+ <span class="icon icon-more"></span>
+ <span class="icon icon-loading"></span>
+ <span class="icon icon-help"></span>
+ <span class="icon icon-info"></span>
+ <span class="icon icon-show"></span>
+ <span class="icon icon-hide"></span>
+ <span class="icon icon-lock"></span>
+ <span class="icon icon-unlock"></span>
+ <span class="icon icon-download"></span> + +
+ +
+

Select

+
+
+
+ + +
+
+ + <div class="form-group">
+  <label class="select-label-hidden" for="select-1">Which is your favorite animal?</label>
+  <select class="select" id="select-1">
+   <option value="1">Quokka</option>
+   <option value="2">Rabbit</option>
+   <option value="3">Goat</option>
+   <option value="4">Capybara</option>
+  </select>
+ </div> + +
+ +
+
+
+ + +
+
+ + <div class="form-group">
+  <label class="select-label-hidden" for="select-2">Which is your favorite animal?</label>
+  <select class="select" id="select-2" disabled>
+   <option value="1">Quokka</option>
+   <option value="2">Rabbit</option>
+   <option value="3">Goat</option>
+   <option value="4">Capybara</option>
+  </select>
+ </div> + +
+
+ +
+

Input

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + <div class="theme-group" data-theme="dark">
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-1">This is the label</label>
+   <input class="input" type="text" placeholder="Input dark theme" id="input-1"/>
+  </div>
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-2">This is the label</label>
+   <input class="input success" type="text" placeholder="Input dark theme success" id="input-2"/>
+  </div>
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-3">This is the label</label>
+   <input class="input error" type="text" placeholder="Input dark theme error" id="input-3"/>
+  </div>
+ </div> + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + <div class="theme-group" data-theme="light">
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-4">This is the label</label>
+   <input class="input" type="text" placeholder="Input light theme" id="input-4"/>
+  </div>
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-5">This is the label</label>
+   <input class="input success" type="text" placeholder="Input light theme success" id="input-5"/>
+  </div>
+  <div class="form-group">
+   <label class="input-label-hidden" for="input-6">This is the label</label>
+   <input class="input error" type="text" placeholder="Input light theme error" id="input-6"/>
+  </div>
+ </div> +
diff --git a/libs/plugins-styles/src/lib/components/icon.css b/libs/plugins-styles/src/lib/components/icon.css index c7d9aab..6f1d09b 100644 --- a/libs/plugins-styles/src/lib/components/icon.css +++ b/libs/plugins-styles/src/lib/components/icon.css @@ -14,26 +14,78 @@ 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-arrow-left { + background-image: url('../icons/arrow-left.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 +.icon-arrow-right { + background-image: url('../icons/arrow-right.svg'); +} + +.icon-arrow-top { + background-image: url('../icons/arrow-top.svg'); +} + +.icon-close { + background-image: url('../icons/actions-close.svg'); +} + +.icon-close-l { + background-image: url('../icons/actions-close-l.svg'); +} + +.icon-delete { + background-image: url('../icons/actions-delete.svg'); +} + +.icon-add { + background-image: url('../icons/actions-add.svg'); +} + +.icon-remove { + background-image: url('../icons/actions-remove.svg'); +} + +.icon-search { + background-image: url('../icons/actions-search.svg'); +} + +.icon-copy { + background-image: url('../icons/actions-copy.svg'); +} + +.icon-more { + background-image: url('../icons/actions-more.svg'); +} + +.icon-loading { + background-image: url('../icons/actions-loading.svg'); +} + +.icon-help { + background-image: url('../icons/actions-help.svg'); +} + +.icon-info { + background-image: url('../icons/actions-info.svg'); +} + +.icon-show { + background-image: url('../icons/actions-show.svg'); +} + +.icon-hide { + background-image: url('../icons/actions-hide.svg'); +} + +.icon-lock { + background-image: url('../icons/actions-lock.svg'); +} + +.icon-unlock { + background-image: url('../icons/actions-unlock.svg'); +} + +.icon-download { + background-image: url('../icons/app-download.svg'); +} \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/components/input.css b/libs/plugins-styles/src/lib/components/input.css new file mode 100644 index 0000000..ea9b9ca --- /dev/null +++ b/libs/plugins-styles/src/lib/components/input.css @@ -0,0 +1,112 @@ +.input-label-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"] { + & .input { + background-color: var(--db-tertiary); + border-color: var(--db-tertiary); + color: var(--df-primary); + + &:focus { + border-color: var(--da-primary); + } + + &:hover { + background-color: var(--db-quaternary); + border-color: var(--db-quaternary); + } + + &:focus { + background-color: var(--db-primary); + border-color: var(--da-primary); + } + + &:disabled { + background-color: var(--db-primary); + border-color: var(--db-quaternary); + cursor: not-allowed; + } + + &::placeholder { + color: var(--df-secondary); + } + + &.success { + background-color: var(--db-primary); + border-color: var(--da-tertiary); + } + + &.error { + background-color: var(--db-primary); + } + } +} + +[data-theme="light"] { + & .input { + background-color: var(--lb-tertiary); + border-color: var(--lb-tertiary); + color: var(--lf-primary); + + &:focus { + background-color: var(--lb-secondary); + border-color: var(--la-primary); + } + + &:hover { + background-color: var(--lb-quaternary); + border-color: var(--lb-quaternary); + } + + &:focus { + background-color: var(--lb-primary); + border-color: var(--la-primary); + } + + &:disabled { + background-color: var(--lb-primary); + border-color: var(--lb-quaternary); + cursor: not-allowed; + } + + &::placeholder { + color: var(--lf-secondary); + } + + &.success { + background-color: var(--lb-primary); + border-color: var(--la-tertiary); + } + + &.error { + background-color: var(--lb-primary); + } + } +} + +.input { + display: flex; + border: 1px solid; + border-radius: var(--spacing-8); + font-size: var(--font-size-s); + font-weight: var(--font-weight-regular); + line-height: var(--font-line-height-m); + outline: none; + padding-block: var(--spacing-8); + padding-inline: var(--spacing-8); + + &.error { + border-color: var(--error-500); + } +} \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/components/select.css b/libs/plugins-styles/src/lib/components/select.css new file mode 100644 index 0000000..51fa98e --- /dev/null +++ b/libs/plugins-styles/src/lib/components/select.css @@ -0,0 +1,53 @@ +.select { + appearance: none; + background-color: var(--db-tertiary); + background-position: right 7px center; + background-image: url('../icons/arrow-bottom.svg'); + background-repeat: no-repeat; + block-size: calc(var(--spacing-8) * 6); + border: 1px solid; + border-color: var(--db-tertiary); + border-radius: var(--spacing-8); + box-sizing: border-box; + color: var(--df-primary); + cursor: pointer; + inline-size: 100%; + font-size: var(--font-size-s); + font-weight: var(--font-weight-regular); + line-height: var(--font-line-height-m); + outline: none; + padding-block: var(--spacing-12); + padding-inline: var(--spacing-8); + text-overflow: ellipsis; + white-space: nowrap; + + &:hover { + background-color: var(--db-quaternary); + border-color: var(--db-quaternary); + } + + &:focus { + background-color: var(--db-tertiary); + border-color: var(--da-primary); + } + + &:disabled { + background-color: var(--db-primary); + border-color: var(--db-quaternary); + cursor: not-allowed; + } +} + +.select-label-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; +} \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/components/tabs.css b/libs/plugins-styles/src/lib/components/tabs.css deleted file mode 100644 index e69de29..0000000 diff --git a/libs/plugins-styles/src/lib/core/fonts.css b/libs/plugins-styles/src/lib/core/fonts.css index 8074a9e..7bae92f 100644 --- a/libs/plugins-styles/src/lib/core/fonts.css +++ b/libs/plugins-styles/src/lib/core/fonts.css @@ -6,7 +6,10 @@ --font-weight-bold: 500; --font-line-height-s: 1.2; --font-line-height-m: 1.4; - --font-line-height-l: 1.2; + --font-line-height-l: 1.5; + --font-size-s: 12px; + --font-size-m: 14px; + --font-size-l: 16px; } html, body { @@ -18,19 +21,19 @@ html, body { .display { font-weight: var(--font-weight-regular); font-size: 36px; - line-height: 1.2; + line-height: var(--font-line-height-s); } .title-s { font-weight: var(--font-weight-regular); - font-size: 14px; - line-height: 1.2; + font-size: var(--font-size-m); + line-height: var(--font-line-height-s); } .title-m { font-weight: var(--font-weight-regular); font-size: 20px; - line-height: 1.2; + line-height: var(--font-line-height-s); } .title-l { @@ -41,51 +44,51 @@ html, body { .headline-s { font-weight: var(--font-weight-bold); - font-size: 12px; - line-height: 1.2; + font-size: var(--font-size-s); + line-height: var(--font-line-height-s); text-transform: uppercase; } .headline-m { font-weight: var(--font-weight-regular); - font-size: 16px; - line-height: 1.4; + font-size: var(--font-size-l); + line-height: var(--font-line-height-m); text-transform: uppercase; } .headline-l { font-weight: var(--font-weight-regular); font-size: 18px; - line-height: 1.2; + line-height: var(--font-line-height-s); text-transform: uppercase; } .body-s { font-weight: var(--font-weight-regular); - font-size: 12px; - line-height: 1.4; + font-size: var(--font-size-s); + line-height: var(--font-line-height-m); } .body-m { font-weight: var(--font-weight-regular); - font-size: 14px; - line-height: 1.5; + font-size: var(--font-size-m); + line-height: var(--font-line-height-l); } .body-l { font-weight: var(--font-weight-regular); - font-size: 16px; - line-height: 1.5; + font-size: var(--font-size-l); + line-height: var(--font-line-height-l); } .caption { font-weight: var(--font-weight-regular); - font-size: 12px; - line-height: 1.2; + font-size: var(--font-size-s); + line-height: var(--font-line-height-s); } .code-font { font-weight: var(--font-weight-regular); - font-size: 12px; - line-height: 1.5; + font-size: var(--font-size-s); + line-height: var(--font-line-height-l); } \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/core/generic.css b/libs/plugins-styles/src/lib/core/generic.css new file mode 100644 index 0000000..97ba722 --- /dev/null +++ b/libs/plugins-styles/src/lib/core/generic.css @@ -0,0 +1,18 @@ +html, body { + margin: 0; + padding: 0; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +[data-theme="dark"] { + background-color: var(--db-primary); +} + +[data-theme="light"] { + background-color: var(--lb-primary); +} \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-add.svg b/libs/plugins-styles/src/lib/icons/actions-add.svg new file mode 100644 index 0000000..6ee8700 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-copy.svg b/libs/plugins-styles/src/lib/icons/actions-copy.svg new file mode 100644 index 0000000..f8f72a8 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-help.svg b/libs/plugins-styles/src/lib/icons/actions-help.svg new file mode 100644 index 0000000..a009001 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-hide.svg b/libs/plugins-styles/src/lib/icons/actions-hide.svg new file mode 100644 index 0000000..7222ae3 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-hide.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-info.svg b/libs/plugins-styles/src/lib/icons/actions-info.svg new file mode 100644 index 0000000..09c07bf --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-loading.svg b/libs/plugins-styles/src/lib/icons/actions-loading.svg new file mode 100644 index 0000000..1021272 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-lock.svg b/libs/plugins-styles/src/lib/icons/actions-lock.svg new file mode 100644 index 0000000..48a89ed --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-more.svg b/libs/plugins-styles/src/lib/icons/actions-more.svg new file mode 100644 index 0000000..692d3ab --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-more.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-remove.svg b/libs/plugins-styles/src/lib/icons/actions-remove.svg new file mode 100644 index 0000000..a5af856 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-search.svg b/libs/plugins-styles/src/lib/icons/actions-search.svg new file mode 100644 index 0000000..17cd39d --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-show.svg b/libs/plugins-styles/src/lib/icons/actions-show.svg new file mode 100644 index 0000000..6e19144 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-show.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/actions-unlock.svg b/libs/plugins-styles/src/lib/icons/actions-unlock.svg new file mode 100644 index 0000000..645425e --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/actions-unlock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/icons/app-download.svg b/libs/plugins-styles/src/lib/icons/app-download.svg new file mode 100644 index 0000000..387abc6 --- /dev/null +++ b/libs/plugins-styles/src/lib/icons/app-download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/plugins-styles/src/lib/styles.css b/libs/plugins-styles/src/lib/styles.css index 7b381ae..761df5c 100644 --- a/libs/plugins-styles/src/lib/styles.css +++ b/libs/plugins-styles/src/lib/styles.css @@ -1,4 +1,5 @@ /*core*/ +@import url("core/generic.css"); @import url("core/swatches.css"); @import url("core/fonts.css"); @import url("core/spacing.css"); @@ -7,5 +8,6 @@ @import url("components/button.css"); @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 +@import url("components/icon.css"); +@import url("components/select.css"); +@import url("components/input.css"); \ No newline at end of file