From 2f4dc5e7638eff33ad808806a2c3bb3d9b0d1b14 Mon Sep 17 00:00:00 2001 From: Gregory Pratt Date: Sun, 14 Aug 2022 22:25:09 +0100 Subject: [PATCH] variables variables variables --- src/scss/_components.alerts.scss | 46 ++-- src/scss/_components.avatars.scss | 8 +- src/scss/_components.badges.scss | 54 ++-- src/scss/_components.breadcrumbs.scss | 4 +- src/scss/_components.buttons.scss | 39 +-- src/scss/_components.calendars.scss | 18 +- src/scss/_components.cards.scss | 4 +- src/scss/_components.divider.scss | 2 +- src/scss/_components.file-upload.scss | 4 +- src/scss/_components.hints.scss | 2 +- src/scss/_components.inputs.scss | 15 +- src/scss/_components.links.scss | 28 ++- src/scss/_components.pagination.scss | 4 +- src/scss/_components.trees.scss | 4 +- src/scss/_objects.drawers.scss | 6 +- src/scss/_objects.modals.scss | 6 +- src/scss/_theme.scss | 304 +++++++++++++++++++++++ src/scss/blaze.scss | 2 +- src/scss/mixins/_components.buttons.scss | 14 +- 19 files changed, 456 insertions(+), 108 deletions(-) create mode 100644 src/scss/_theme.scss diff --git a/src/scss/_components.alerts.scss b/src/scss/_components.alerts.scss index 6413aef..8c54518 100644 --- a/src/scss/_components.alerts.scss +++ b/src/scss/_components.alerts.scss @@ -1,6 +1,4 @@ .c-alerts[role='presentation'] { - --alerts-background-color: var(--color-transparent); - z-index: var(--z-over-page); display: block; max-height: 100%; @@ -8,7 +6,6 @@ padding: 0; overflow-y: auto; list-style: none; - background-color: var(--alerts-background-color); -webkit-overflow-scrolling: touch; } @@ -41,38 +38,59 @@ } .c-alert[role='alert'] { - --alert-color: white; - --alert-background-color: var(--color-default); - position: relative; margin: var(--spacing-medium); padding: var(--spacing-medium) var(--spacing-super) var(--spacing-medium) var(--spacing-medium); color: var(--alert-color); - background-color: var(--alert-background-color); + background: var(--alert-background); border-radius: var(--border-radius); .c-link { - color: var(--alert-color) !important; + color: var(--alert-link-color); } &.c-alert--brand { - --alert-background-color: var(--color-brand); + color: var(--alert-color--brand); + background: var(--alert-background--brand); + + .c-link { + color: var(--alert-link-color--brand); + } } &.c-alert--info { - --alert-background-color: var(--color-info); + color: var(--alert-color--info); + background: var(--alert-background--info); + + .c-link { + color: var(--alert-link-color--info); + } } &.c-alert--warning { - --alert-color: black; - --alert-background-color: var(--color-warning); + color: var(--alert-color--warning); + background: var(--alert-background--warning); + + .c-link { + color: var(--alert-link-color--warning); + } } &.c-alert--success { - --alert-background-color: var(--color-success); + color: var(--alert-color--success); + background: var(--alert-background--success); + + .c-link { + color: var(--alert-link-color--success); + } } &.c-alert--error { - --alert-background-color: var(--color-error); + color: var(--alert-color--error); + background: var(--alert-background--error); + + .c-link { + color: var(--alert-link-color--error); + } } } diff --git a/src/scss/_components.avatars.scss b/src/scss/_components.avatars.scss index d521f33..66a91da 100644 --- a/src/scss/_components.avatars.scss +++ b/src/scss/_components.avatars.scss @@ -1,15 +1,11 @@ .c-avatar { - --avatar-color: white; - --avatar-background-color: var(--color-brand); - --avatar-border-radius: var(--border-radius-rounded); - position: relative; display: inline-block; width: 3em; height: 3em; margin: 0; - color: var(--avatar-color); - background-color: var(--avatar-background-color); + color: var(--avatar-color, white); + background: var(--avatar-background); border-radius: var(--avatar-border-radius); } diff --git a/src/scss/_components.badges.scss b/src/scss/_components.badges.scss index 0902bb5..8b4119b 100644 --- a/src/scss/_components.badges.scss +++ b/src/scss/_components.badges.scss @@ -1,7 +1,4 @@ .c-badge { - --badge-color: white; - --badge-background-color: var(--color-default); - display: inline-block; margin: 0; padding: var(--spacing-xsmall) var(--spacing-small); @@ -9,14 +6,14 @@ font-weight: var(--text-font-weight-heavy); font-size: 0.8em; line-height: 1.2; - background-color: var(--badge-background-color); - border: var(--border-width) var(--border-style) transparent; + background: var(--badge-background); + border: var(--border-width) var(--border-style) var(--badge-border-color); border-radius: var(--border-radius); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-default); - border-color: var(--badge-color); + color: var(--badge-color--ghost); + background: transparent; + border-color: var(--badge-border-color--ghost); } } @@ -25,47 +22,56 @@ } .c-badge--brand { - --badge-background-color: var(--color-brand); + color: var(--badge-color--brand); + background: var(--badge-background--brand); + border-color: var(--badge-border-color--brand); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-brand); + color: var(--badge-color--brand-ghost); + border-color: var(--badge-border-color--brand-ghost); } } .c-badge--info { - --badge-background-color: var(--color-info); + color: var(--badge-color--info); + background: var(--badge-background--info); + border-color: var(--badge-border-color--info); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-info); + color: var(--badge-color--info-ghost); + border-color: var(--badge-border-color--info-ghost); } } .c-badge--warning { - --badge-background-color: var(--color-warning); - --badge-color: black; + color: var(--badge-color--warning); + background: var(--badge-background--warning); + border-color: var(--badge-border-color--warning); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-warning); + color: var(--badge-color--warning-ghost); + border-color: var(--badge-border-color--warning-ghost); } } .c-badge--success { - --badge-background-color: var(--color-success); + color: var(--badge-color--success); + background: var(--badge-background--success); + border-color: var(--badge-border-color--success); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-success); + color: var(--badge-color--success-ghost); + border-color: var(--badge-border-color--success-ghost); } } .c-badge--error { - --badge-background-color: var(--color-error); + color: var(--badge-color--error); + background: var(--badge-background--error); + border-color: var(--badge-border-color--error); &.c-badge--ghost { - --badge-background-color: var(--color-transparent); - --badge-color: var(--color-error); + color: var(--badge-color--error-ghost); + border-color: var(--badge-border-color--error-ghost); } } diff --git a/src/scss/_components.breadcrumbs.scss b/src/scss/_components.breadcrumbs.scss index 467404f..d5286d8 100644 --- a/src/scss/_components.breadcrumbs.scss +++ b/src/scss/_components.breadcrumbs.scss @@ -13,8 +13,8 @@ &:not([aria-current]) { ::after { padding: 0 var(--spacing-small); - color: var(--color-default); - content: '/'; + color: var(--breadcrumbs-divider-color); + content: var(--breadcrumbs-divider-character); } } diff --git a/src/scss/_components.buttons.scss b/src/scss/_components.buttons.scss index 8ddafac..4e6e63b 100644 --- a/src/scss/_components.buttons.scss +++ b/src/scss/_components.buttons.scss @@ -1,14 +1,11 @@ @import 'mixins/components.buttons'; .c-button { - --button-color: #fff; - --button-background-color: var(--color-default); - @include button; &.c-button--close { --button-color: inherit; - --button-background-color: transparent; + --button-background: transparent; @include button-color; @@ -31,49 +28,59 @@ } &.c-button--brand { - --button-background-color: var(--color-brand); + --button-color: var(--button-color--brand); + --button-background: var(--button-background--brand); } &.c-button--info { - --button-background-color: var(--color-info); + --button-color: var(--button-color--info); + --button-background: var(--button-background--info); } &.c-button--warning { - --button-color: #000; - --button-background-color: var(--color-warning); + --button-color: var(--button-color--warning); + --button-background: var(--button-background--warning); } &.c-button--success { - --button-background-color: var(--color-success); + --button-color: var(--button-color--success); + --button-background: var(--button-background--success); } &.c-button--error { - --button-background-color: var(--color-error); + --button-color: var(--button-color--error); + --button-background: var(--button-background--error); } &.c-button--ghost { - --button-color: var(--color-default); + --button-color: var(--button-color--ghost); + --button-background: var(--button-background--ghost); @include button-ghost; &.c-button--brand { - --button-color: var(--color-brand); + --button-color: var(--button-color--brand-ghost); + --button-background: var(--button-background--brand-ghost); } &.c-button--info { - --button-color: var(--color-info); + --button-color: var(--button-color--info-ghost); + --button-background: var(--button-background--info-ghost); } &.c-button--warning { - --button-color: var(--color-warning); + --button-color: var(--button-color--warning-ghost); + --button-background: var(--button-background--warning-ghost); } &.c-button--success { - --button-color: var(--color-success); + --button-color: var(--button-color--success-ghost); + --button-background: var(--button-background--success-ghost); } &.c-button--error { - --button-color: var(--color-error); + --button-color: var(--button-color--error-ghost); + --button-background: var(--button-background--error-ghost); } } diff --git a/src/scss/_components.calendars.scss b/src/scss/_components.calendars.scss index ca4f6fb..a3ffcb0 100644 --- a/src/scss/_components.calendars.scss +++ b/src/scss/_components.calendars.scss @@ -10,15 +10,15 @@ max-width: 400px; padding: var(--spacing-medium); text-align: center; - background-color: var(--color-background); + background-color: var(--calendar-background); border: 1px solid transparent; border-radius: var(--border-radius); } .c-calendar__control, .c-calendar__date { - --button-color: var(--color-quiet); - --button-background-color: transparent; + --button-color: var(--calendar-control-color--date); + --button-background: var(--calendar-control-background--date); @include button-color; display: inline; @@ -32,12 +32,14 @@ user-select: none; &:hover { - border-color: var(--border-color); + --button-color: var(--calendar-control-color--hover); + --button-background: var(--calendar-control-background--hover); } } .c-calendar__control { - --button-color: var(--color-default); + --button-color: var(--calendar-control-color); + --button-background: var(--calendar-control-background); } .c-calendar__header { @@ -58,7 +60,8 @@ } .c-calendar__date--in-month { - --button-color: #000; + --button-color: var(--calendar-control-color--in-month); + --button-background: var(--calendar-control-background--in-month); } .c-calendar__date[aria-current='date'] { @@ -67,7 +70,8 @@ .c-calendar__date--selected[aria-selected='true'], .c-calendar__date--selected[aria-selected='true']:hover { - --button-color: #fff; + --button-color: var(--calendar-control-color--selected); + --button-background: var(--calendar-control-background--selected); @include button-color; diff --git a/src/scss/_components.cards.scss b/src/scss/_components.cards.scss index 559495c..d442bdb 100644 --- a/src/scss/_components.cards.scss +++ b/src/scss/_components.cards.scss @@ -145,7 +145,7 @@ .c-card__control { --button-color: var(--color-text); - --button-background-color: var(--color-dark); + --button-background: var(--color-dark); @include card-control; } @@ -161,7 +161,7 @@ border-radius: 0 0 var(--border-radius) var(--border-radius); .c-card__control[role='menuitem'] { - --button-background-color: var(--color-light); + --button-background: var(--color-light); } } diff --git a/src/scss/_components.divider.scss b/src/scss/_components.divider.scss index a9e6dd1..eb4499f 100644 --- a/src/scss/_components.divider.scss +++ b/src/scss/_components.divider.scss @@ -11,7 +11,7 @@ &::after { @include grid__cell; @include grid__cell--auto; - border-top: 1px solid var(--color-default); + border-top: 1px solid var(--divider-color); content: ''; } diff --git a/src/scss/_components.file-upload.scss b/src/scss/_components.file-upload.scss index c4eeeb5..4ddab50 100644 --- a/src/scss/_components.file-upload.scss +++ b/src/scss/_components.file-upload.scss @@ -8,8 +8,8 @@ padding: var(--spacing-medium); line-height: 10; text-align: center; - background-color: var(--color-background); - border: 3px dashed var(--color-dark); + background: var(--file-upload-background); + border: var(--file-upload-border); border-radius: var(--border-radius); } diff --git a/src/scss/_components.hints.scss b/src/scss/_components.hints.scss index d5529ef..99e9f6c 100644 --- a/src/scss/_components.hints.scss +++ b/src/scss/_components.hints.scss @@ -1,7 +1,7 @@ .c-hint[role='tooltip'] { position: absolute; padding: var(--spacing-tiny) 0; - color: var(--color-default); + color: var(--hint-color); font-size: var(--text-font-size-medium); transform: scale(0.8); transform-origin: top left; diff --git a/src/scss/_components.inputs.scss b/src/scss/_components.inputs.scss index 9eccb0e..3cb8465 100644 --- a/src/scss/_components.inputs.scss +++ b/src/scss/_components.inputs.scss @@ -67,8 +67,9 @@ font-weight: var(--text-font-weight); font-size: var(--text-font-size-medium); font-family: inherit; - background-color: #fff; - border: var(--border-width) var(--border-style) var(--border-color); + color: var(--field-color); + background: var(--field-background); + border: var(--field-border); border-radius: var(--border-radius); outline: 0; -webkit-appearance: none; @@ -108,13 +109,15 @@ select.c-field:not([multiple]) { } .c-field--error { - color: var(--color-error); - border-color: var(--color-error); + color: var(--field-color--error); + border-color: var(--field-border-color--error); + background: var(--field-background--error) } .c-field--success { - color: var(--color-success); - border-color: var(--color-success); + color: var(--field-color--success); + border-color: var(--field-border-color--succes); + background: var(--field-background--success) } .c-field--choice { diff --git a/src/scss/_components.links.scss b/src/scss/_components.links.scss index 50c8a23..f9a0e4a 100644 --- a/src/scss/_components.links.scss +++ b/src/scss/_components.links.scss @@ -3,8 +3,8 @@ @mixin link--color { @include disabled; - color: var(--color-link); - background-color: transparent; + color: var(--link-color); + background: var(--link-background); &:not(:disabled) { &:visited { @@ -12,12 +12,12 @@ } &:hover { - background-color: transparent; + background-color: var(--link-background--hover); opacity: 0.9; } &:active { - background-color: transparent; + background-color: var(--link-background--hover); opacity: 0.8; } } @@ -51,22 +51,32 @@ a.c-link, } &.c-link--brand { - --color-link: var(--color-brand); + --link-color: var(--link-color--brand); + --link-background: var(--link-background--brand); + --link-background--hover: var(--link-background--brand-hover); } &.c-link--info { - --color-link: var(--color-info); + --link-color: var(--link-color--info); + --link-background: var(--link-background--info); + --link-background--hover: var(--link-background--info-hover); } &.c-link--warning { - --color-link: var(--color-warning); + --link-color: var(--link-color--warning); + --link-background: var(--link-background--warning); + --link-background--hover: var(--link-background--warning-hover); } &.c-link--success { - --color-link: var(--color-success); + --link-color: var(--link-color--success); + --link-background: var(--link-background--success); + --link-background--hover: var(--link-background--success-hover); } &.c-link--error { - --color-link: var(--color-error); + --link-color: var(--link-color--error); + --link-background: var(--link-background--error); + --link-background--hover: var(--link-background--error-hover); } } diff --git a/src/scss/_components.pagination.scss b/src/scss/_components.pagination.scss index 7489d72..a10ccb7 100644 --- a/src/scss/_components.pagination.scss +++ b/src/scss/_components.pagination.scss @@ -20,12 +20,12 @@ nav.c-pagination, } .c-pagination__control { - --button-color: var(--color-brand); + --button-color: var(--pagination-color); @include button; @include button-ghost; flex: 0 0 auto; min-width: 2.4em; - border-radius: var(--border-radius-rounded); + border-radius: var(--pagination-border-radius); } diff --git a/src/scss/_components.trees.scss b/src/scss/_components.trees.scss index 3699e1a..cae9ff3 100644 --- a/src/scss/_components.trees.scss +++ b/src/scss/_components.trees.scss @@ -20,7 +20,7 @@ &::before { display: inline-block; padding: 0 var(--spacing-small) 0 0; - color: var(--color-default); + color: var(--tree-item-color); transform-origin: 30% 50%; content: '–'; } @@ -32,12 +32,14 @@ .c-tree__item[aria-expanded] { &::before { + color: var(--tree-item-expandable-color); content: '\276F'; } } .c-tree__item[aria-expanded='true'] { &::before { + color: var(--tree-item-expanded-color); transform: rotate(90deg); content: '\276F'; } diff --git a/src/scss/_objects.drawers.scss b/src/scss/_objects.drawers.scss index 9e9f74f..0372c66 100644 --- a/src/scss/_objects.drawers.scss +++ b/src/scss/_objects.drawers.scss @@ -6,7 +6,7 @@ aside.o-drawer { overflow-x: hidden; overflow-y: auto; color: inherit; - background-color: var(--color-background); + background: var(--drawer-background); visibility: hidden; -webkit-overflow-scrolling: touch; @@ -34,7 +34,7 @@ aside.o-drawer { &.o-drawer--bottom { top: 100%; - border-radius: var(--border-radius) var(--border-radius) 0 0; + border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0; } &.o-drawer--bottom.o-drawer--visible { @@ -43,7 +43,7 @@ aside.o-drawer { &.o-drawer--top { bottom: 100%; - border-radius: 0 0 var(--border-radius) var(--border-radius); + border-radius: 0 0 var(--drawer-border-radius) var(--drawer-border-radius); } &.o-drawer--top.o-drawer--visible { diff --git a/src/scss/_objects.modals.scss b/src/scss/_objects.modals.scss index c624477..abe3adc 100644 --- a/src/scss/_objects.modals.scss +++ b/src/scss/_objects.modals.scss @@ -6,9 +6,9 @@ display: block; width: 75%; overflow: hidden; - background-color: var(--color-background); + background: var(--modal-background); border: 0; - border-radius: var(--border-radius); + border-radius: var(--modal-border-radius); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; @@ -24,7 +24,7 @@ &.o-modal--ghost { color: #fff; - background-color: var(--color-transparent); + background: var(--modal-background--ghost); .c-heading { color: #fff; diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss new file mode 100644 index 0000000..7246534 --- /dev/null +++ b/src/scss/_theme.scss @@ -0,0 +1,304 @@ +@import 'variables'; + +:root, +:host { + /* Screen widths */ + + --screen-limit-xsmall: 20em; + --screen-limit-small: 30em; + --screen-limit-medium: 48em; + --screen-limit-large: 64em; + --screen-limit-xlarge: 78em; + --screen-limit-super: 116em; + + /* Spacing */ + + --spacing-super: 3em; + --spacing-xlarge: 2em; + --spacing-large: 1.5em; + --spacing-medium: 1em; + --spacing-small: 0.5em; + --spacing-xsmall: 0.25em; + --spacing-tiny: 0.125em; + + /* Grid */ + + --grid-gutter: 1em; + + /* Alerts */ + --alert-color: var(--color-100); + --alert-background: var(--color-0); + + --alert-color--brand: var(--color-100); + --alert-background--brand: var(--color-brand); + + --alert-color--info: var(--color-100); + --alert-background--info: var(--color-info); + + --alert-color--warning: var(--color-0); + --alert-background--warning: var(--color-warning); + + --alert-color--success: var(--color-100); + --alert-background--success: var(--color-success); + + --alert-color--error: var(--color-100); + --alert-background--error: var(--color-error); + + --alert-link-color: var(--alert-color); + --alert-link-color--brand: var(--alert-color--brand); + --alert-link-color--info: var(--alert-color--info); + --alert-link-color--warning: var(--alert-color--warning); + --alert-link-color--success: var(--alert-link-color--success); + --alert-link-color--error: var(--alert-color--error); + + /* Avatars */ + --avatar-color: var(--color-100); + --avatar-background: var(--color-brand); + --avatar-border-radius: var(--border-radius-rounded); + + /* Badges */ + --badge-color: var(--color-100); + --badge-color--ghost: var(--color-0); + --badge-background: var(--color-0); + --badge-border-color: transparent; + --badge-border-color--ghost: var(--badge-color--ghost); + + --badge-color--brand: var(--color-100); + --badge-color--brand-ghost: var(--color-brand); + --badge-background--brand: var(--color-brand); + --badge-border-color--brand: transparent; + --badge-border-color--brand-ghost: var(--badge-color--brand-ghost); + + --badge-color--info: var(--color-100); + --badge-color--info-ghost: var(--color-info); + --badge-background--info: var(--color-info); + --badge-border-color--info: transparent; + --badge-border-color--info-ghost: var(--badge-color--info-ghost); + + --badge-color--warning: var(--color-100); + --badge-color--warning-ghost: var(--color-warning); + --badge-background--warning: var(--color-warning); + --badge-border-color--warning: transparent; + --badge-border-color--warning-ghost: var(--badge-color--warning-ghost); + + --badge-color--success: var(--color-100); + --badge-color--success-ghost: var(--color-success); + --badge-background--success: var(--color-success); + --badge-border-color--success: black; + --badge-border-color--success-ghost: var(--badge-color--success-ghost); + + --badge-color--error: var(--color-100); + --badge-color--error-ghost: var(--color-error); + --badge-background--error: var(--color-error); + --badge-border-color--error: transparent; + --badge-border-color--error-ghost: var(--badge-color--error-ghost); + + /* Breadcrumbs */ + --breadcrumbs-divider-color: var(--color-50); + --breadcrumbs-divider-character: '\2022'; + + /* Buttons */ + --button-color: var(--color-100); + --button-color--ghost: var(--color-50); + --button-background: var(--color-50); + --button-background--ghost: transparent; + + --button-color--brand: var(--color-100); + --button-color--brand-ghost: var(--color-brand); + --button-background--brand: var(--color-brand); + --button-background--brand-ghost: transparent; + + --button-color--info: var(--color-100); + --button-color--info-ghost: var(--color-info); + --button-background--info: var(--color-info); + --button-background--info-ghost: transparent; + + --button-color--warning: var(--color-0); + --button-color--warning-ghost: var(--color-warning); + --button-background--warning: var(--color-warning); + --button-background--warning-ghost: transparent; + + --button-color--success: var(--color-100); + --button-color--success-ghost: var(--color-success); + --button-background--success: var(--color-success); + --button-background--success-ghost: transparent; + + --button-color--error: var(--color-100); + --button-color--error-ghost: var(--color-error); + --button-background--error: var(--color-error); + --button-background--error-ghost: transparent; + + /* Calendars */ + --calendar-background: var(--color-75); + + --calendar-control-color: var(--color-0); + --calendar-control-background: transparent; + + --calendar-control-color--date: var(--color-50); + --calendar-control-background--date: transparent; + + --calendar-control-color--hover: var(--color-100); + --calendar-control-background--hover: var(--color-10); + + --calendar-control-color--in-month: var(--color-0); + --calendar-control-background--in-month: var(--calendar-background); + + --calendar-control-color--selected: var(--color-0); + --calendar-control-background--selected: var(--color-100); + + /* Cards */ + + /* Dividers */ + --divider-color: var(--color-0); + + /*File Upload */ + --file-upload-background: var(--color-75); + --file-upload-border: 2px dashed var(--color-50); + + /* Hints */ + --hint-color: var(--color-50); + + /* Inputs */ + --field-color: var(--color-text); + --field-background: var(--color-100); + + --field-color--error: var(--field-color); + --field-border-color--error: var(--color-error); + --field-background--error: var(--color-100); + + --field-color--success: var(--field-color); + --field-border-color--succes: var(--color-success); + --field-background--success: var(--color-100); + + --field-border: var(--border-width) var(--border-style) var(--border-color); + + /* Links */ + --link-color: #4267ff; + --link-background: transparent; + --link-background--hover: transparent; + + --link-color--brand: var(--color-brand); + --link-background--brand: transparent; + --link-background--brand-hover: transparent; + + --link-color--info: var(--color-info); + --link-background--info: transparent; + --link-background--info-hover: transparent; + + --link-color--warning: var(--color-warning); + --link-background--warning: transparent; + --link-background--warning-hover: transparent; + + --link-color--success: var(--color-success); + --link-background--success: transparent; + --link-background--success-hover: transparent; + + --link-color--error: var(--color-error); + --link-background--error: transparent; + --link-background--error-hover: transparent; + + /* Pagination */ + --pagination-color: var(--color-brand); + --pagination-border-radius: var(--border-radius-rounded); + + /* Progress */ + + /* Ranges */ + + /* Tables */ + + /* Tabs */ + + /* Timelines */ + + /* Toggles */ + + /* Trees */ + --tree-item-color: var(--color-0); + --tree-item-expandable-color: var(--color-50); + --tree-item-expanded-color: var(--color-0); + + /* Drawers */ + --drawer-background: var(--color-75); + --drawer-border-radius: var(--border-radius); + + /* Modals */ + --modal-background: var(--color-75); + --modal-background--ghost: transparent; + --modal-border-radius: var(--border-radius); + + /* Typography */ + + --color-default: #74748c; + --color-quiet: #a6a6bf; + --color-text: var(--color-0); + + --color-0: #000; + --color-10: #3a3a3a; + --color-50: #74748c; + --color-75: #f0f0f0; + --color-100: #fff; + + --color-dark: #eee; + --color-background: #f9f9f9; + --color-light: #fdfdfd; + + --color-outline: #4267ff; + --color-brand: #2c3e50; + --color-info: #4267ff; + --color-warning: #ffa500; + --color-success: #088a05; + --color-error: #ee0202; + --color-highlight: #ffef14; + --color-disabled: var(--color-default); + --color-disabled-background: #f2f2f4; + --color-transparent: transparent; + + /* Borders */ + + --border-width: 1px; + --border-style: solid; + --border-color: var(--color-default); + --border-radius: 4px; + --border-radius-rounded: 30em; + + /* Box shadows */ + + --box-shadow: 0 0 1px rgb(0 0 0 / 60%); + --box-shadow-high: 0 5px 10px -3px rgb(0 0 0 / 40%); + --box-shadow-higher: 0 10px 25px -4px rgb(0 0 0 / 40%); + --box-shadow-highest: 0 20px 55px -8px rgb(0 0 0 / 40%); + + /* Focus styles */ + + --border-color-focus: var(--color-outline); + --box-shadow-focus: inset 0 0 0 1px var(--color-outline); + + /* Disabled */ + + --disabled-opacity: 0.5; + + /* Z Indexes */ + + --z-over-content: 100; + --z-over-control: 200; + --z-over-page: 300; + --z-over-screen: 400; + --z-over-everything: 500; + + /* Typography */ + + --text-font-family-sans-serif: sans-serif; + --text-font-family-serif: serif; + --text-font-family-mono: monospace; + --text-font-family: var(--text-font-family-sans-serif); + --text-font-size-super: 2em; + --text-font-size-xlarge: 1.5em; + --text-font-size-large: 1.25em; + --text-font-size-medium: 1em; + --text-font-size-small: 0.8em; + --text-font-size-xsmall: 0.67em; + --text-font-weight: normal; + --text-font-weight-heavy: bold; + --text-line-height: 1.55; +} diff --git a/src/scss/blaze.scss b/src/scss/blaze.scss index 68e4db9..b19ef2f 100644 --- a/src/scss/blaze.scss +++ b/src/scss/blaze.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@import 'theme'; @import 'generics.global'; @import 'components.addresses'; @import 'components.alerts'; diff --git a/src/scss/mixins/_components.buttons.scss b/src/scss/mixins/_components.buttons.scss index df59035..8deab77 100644 --- a/src/scss/mixins/_components.buttons.scss +++ b/src/scss/mixins/_components.buttons.scss @@ -2,7 +2,7 @@ @mixin button-color { color: var(--button-color); - background-color: var(--button-background-color); + background: var(--button-background); border: 1px solid transparent; &.c-button--active { @@ -28,13 +28,11 @@ } @mixin button-ghost { - --button-background-color: transparent; - border: 1px solid var(--button-color); &.c-button--active { color: #fff; - background-color: var(--button-color); + background: var(--button-color); border-color: 1px solid transparent; } @@ -42,7 +40,7 @@ &:not(:active) { &:hover { color: #fff; - background-color: var(--button-color); + background: var(--button-color); border-color: 1px solid transparent; } } @@ -55,7 +53,7 @@ &:active, &[aria-current] { color: #fff; - background-color: var(--button-color); + background: var(--button-color); border-color: 1px solid transparent; } } @@ -105,7 +103,7 @@ &:not(:disabled, [disabled]) { &:active { - background-color: transparent; + background: transparent; } &:not(:active) { @@ -115,7 +113,7 @@ } &:hover { - background-color: transparent; + background: transparent; } } }