From 72cc8aeb46bcfee211b0f0cb2ca36861f80a04bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= Date: Fri, 5 Apr 2024 11:58:29 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A5=20use=20css=20variables=20for=20de?= =?UTF-8?q?sign=20system=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stylesheets/captive-admin/_base.scss | 4 +- .../stylesheets/captive-admin/_forms.scss | 4 +- .../stylesheets/captive-admin/_header.scss | 14 ++--- .../captive-admin/_typography.scss | 2 +- .../components/_breadcrumbs.scss | 4 +- .../components/_dropdown_menu.scss | 4 +- .../captive-admin/components/_pagination.scss | 4 +- .../captive-admin/components/_panels.scss | 2 +- .../captive-admin/components/_scopes.scss | 2 +- .../components/_status_tags.scss | 8 +-- .../components/_table_tools.scss | 6 +-- .../captive-admin/components/_tables.scss | 6 +-- .../captive-admin/mixins/_buttons.scss | 20 ++++---- .../captive-admin/mixins/_sections.scss | 6 +-- .../captive-admin/mixins/_variables.scss | 4 +- .../captive-admin/pages/_logged_out.scss | 6 +-- .../captive-admin/structure/_footer.scss | 2 +- .../structure/_main_structure.scss | 2 +- .../captive-theme/_design_system_colors.scss | 51 +++++++++++++++++++ .../stylesheets/captive-theme/_variables.scss | 35 +------------ 20 files changed, 102 insertions(+), 84 deletions(-) create mode 100644 captive-theme/app/assets/stylesheets/captive-theme/_design_system_colors.scss diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_base.scss b/captive-admin/app/assets/stylesheets/captive-admin/_base.scss index 5a25e9a9..02593feb 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/_base.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/_base.scss @@ -25,7 +25,7 @@ @import 'inputs/select2'; body { - color: $fg-default; + color: var(--fg-default); @include body-medium; } } @@ -34,7 +34,7 @@ margin-top: $spacer-1; @include body-small; - color: $fg-subtle; + color: var(--fg-subtle); } .col-actions { diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss b/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss index 6cf19e6e..9be9d090 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/_forms.scss @@ -9,7 +9,7 @@ form { margin: 0; &.inputs { - background-color: $bg-subtle; + background-color: var(--bg-subtle); box-shadow: none; border-radius: 0; } @@ -45,7 +45,7 @@ form { margin-bottom: $spacer-1; abbr { - color: $primary-fg; + color: var(--primary-fg); padding-left: $spacer-1; &[title] { diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_header.scss b/captive-admin/app/assets/stylesheets/captive-admin/_header.scss index 0ee4cd73..f7343e43 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/_header.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/_header.scss @@ -8,11 +8,11 @@ #header { text-shadow: none; - background: $bg-emphasis; + background: var(--bg-emphasis); padding: 0 $spacer-6; h1 { - color: $fg-on-emphasis; + color: var(--fg-on-emphasis); padding-left: 0; height: 60px; display: flex; @@ -48,7 +48,7 @@ &::before { content: ''; - background-color: $primary-emphasis; + background-color: var(--primary-emphasis); position: absolute; bottom: 0; width: 19px; @@ -90,20 +90,20 @@ ul { @include rounded-all(12px, 12px, 12px, 12px); - background: $bg-default; + background: var(--bg-default); text-align: left; box-shadow: $shadow-m; min-width: $spacer-11; li { a { - color: $fg-default; + color: var(--fg-default); padding-top: $spacer-3; padding-bottom: $spacer-3; &:hover { - background: $bg-subtle; - color: $fg-default; + background: var(--bg-subtle); + color: var(--fg-default); border-radius: 0; } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss b/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss index 9de46f49..36fd875d 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/_typography.scss @@ -11,7 +11,7 @@ h5, h6 { @include title-family; - color: $fg-default; + color: var(--fg-default); letter-spacing: 0.5px; margin-top: 0; } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss index 4766c145..20bbcf4b 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_breadcrumbs.scss @@ -8,11 +8,11 @@ a:link, a:visited, a:active { - color: $fg-subtle; + color: var(--fg-subtle); } .breadcrumb_sep { - color: $primary-fg; + color: var(--primary-fg); font-weight: bold; } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss index d41b04fa..a0670701 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_dropdown_menu.scss @@ -34,8 +34,8 @@ &:hover { background-image: none; text-shadow: none; - background-color: $bg-subtle; - color: $fg-default; + background-color: var(--bg-subtle); + color: var(--fg-default); } } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss index 350cceb7..e5f3d645 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_pagination.scss @@ -1,7 +1,7 @@ .pagination_information { - color: $fg-subtle; + color: var(--fg-subtle); b { - color: $fg-default; + color: var(--fg-default); } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss index 7d4cc695..d29bfc62 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_panels.scss @@ -5,7 +5,7 @@ } .panel { - background: $bg-subtle; + background: var(--bg-subtle); } // ----------------------------------- Sidebar Sections diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss index 9b78e15e..c72c4318 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_scopes.scss @@ -1,7 +1,7 @@ .scopes { li { .count { - color: $fg-default; + color: var(--fg-default); } &:first-child a { diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss index 82cd3e16..ac5df626 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_status_tags.scss @@ -5,12 +5,12 @@ padding: $spacer-2 $spacer-3; &.yes { - background: $success-subtle; - color: $success-fg; + background: var(--success-subtle); + color: var(--success-fg); } &.no { - background: $bg-subtle; - color: $fg-muted; + background: var(--bg-subtle); + color: var(--fg-muted); } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss index eefba638..d0a0c520 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_table_tools.scss @@ -26,7 +26,7 @@ a.table_tools_button, box-shadow: none; background: none; border-color: $border-color-emphasis; - color: $fg-default; + color: var(--fg-default); } } } @@ -48,12 +48,12 @@ a.table_tools_button, } &.selected a { - background: $bg-subtle; + background: var(--bg-subtle); box-shadow: none; border: 2px solid $border-color-emphasis; &:hover { - background: $bg-subtle; + background: var(--bg-subtle); } } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss b/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss index 3b2b6e85..c3cc09d8 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/components/_tables.scss @@ -5,13 +5,13 @@ table.index_table { th { padding: $spacer-4; - color: $fg-subtle; + color: var(--fg-subtle); background: transparent; a, a:link, a:visited { - color: $fg-subtle; + color: var(--fg-subtle); } &.sorted-asc, @@ -19,7 +19,7 @@ table.index_table { background: transparent; a { - color: $fg-default; + color: var(--fg-default); } } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss index 7f98e694..41b20dad 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_buttons.scss @@ -22,9 +22,9 @@ box-shadow: $shadow-xs; } @mixin primary-button { - background-color: $primary-emphasis; + background-color: var(--primary-emphasis); background-image: none; - color: $primary-on-emphasis; + color: var(--primary-on-emphasis); border: none; text-shadow: none; box-shadow: $shadow-s; @@ -34,7 +34,7 @@ &:not(.disabled) { &:hover { - background-color: $primary-muted; + background-color: var(--primary-muted); background-image: none; } @@ -50,17 +50,17 @@ @include basic-button; outline: solid 1px; - color: $fg-muted; - background-color: $bg-subtle; + color: var(--fg-muted); + background-color: var(--bg-subtle); &:not(.disabled) { &:hover { - background-color: $bg-default; + background-color: var(--bg-default); } &:active { - background-color: $bg-emphasis; - color: $fg-on-emphasis; + background-color: var(--bg-emphasis); + color: var(--fg-on-emphasis); } } } @@ -70,7 +70,7 @@ &:not(.disabled) { &:hover { - background-color: $bg-subtle; + background-color: var(--bg-subtle); } } } @@ -80,7 +80,7 @@ box-shadow: none; text-decoration: underline; padding-left: 0; - color: $fg-muted; + color: var(--fg-muted); background: transparent; &:hover { diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss index 6cc68804..1f00557a 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_sections.scss @@ -8,13 +8,13 @@ // Fin héritage AA padding: $spacer-2 $spacer-4; - color: $fg-muted; - background: $bg-default; + color: var(--fg-muted); + background: var(--bg-default); border-bottom: 1px solid $border-color; } @mixin section-background { - background: $bg-default; + background: var(--bg-default); border-radius: 0; overflow: hidden; } diff --git a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss index 0df88206..ccbf2f7c 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/mixins/_variables.scss @@ -1,5 +1,5 @@ @import 'captive-theme/variables'; $menu-arrow-light-icon-url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgY2xhc3M9InctOCBtci00IGljb24tY2hldmVyb24tZG93biI+PHBhdGggY2xhc3M9InNlY29uZGFyeSIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMyAxMC4zYTEgMSAwIDAgMSAxLjQgMS40bC00IDRhMSAxIDAgMCAxLTEuNCAwbC00LTRhMSAxIDAgMCAxIDEuNC0xLjRsMy4zIDMuMjkgMy4zLTMuM3oiPjwvcGF0aD48L3N2Zz4='; -$error-color: $danger-fg; -$form-label-color: $fg-muted; +$error-color: var(--danger-fg); +$form-label-color: var(--fg-muted); diff --git a/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss b/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss index 727d30e8..1b7c6132 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/pages/_logged_out.scss @@ -1,12 +1,12 @@ body.logged_out { - background: $bg-subtle; + background: var(--bg-subtle); #content_wrapper { width: 450px; margin: $spacer-10 auto; #active_admin_content { - background: $bg-default; + background: var(--bg-default); box-shadow: $shadow-m; border-radius: $border-radius-s; padding: $spacer-6; @@ -19,7 +19,7 @@ body.logged_out { text-shadow: none; text-align: center; box-shadow: none; - color: $fg-default; + color: var(--fg-default); @include title-large; margin: 0; diff --git a/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss b/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss index afdc12cc..7fd60e0d 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/structure/_footer.scss @@ -1,5 +1,5 @@ #footer { - background: $bg-default; + background: var(--bg-default); padding: $spacer-4 $spacer-6; @include body-medium; diff --git a/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss b/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss index 5e1c1fe2..15fc23ba 100644 --- a/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss +++ b/captive-admin/app/assets/stylesheets/captive-admin/structure/_main_structure.scss @@ -9,7 +9,7 @@ #main_content_wrapper { #main_content { padding: $spacer-4 $spacer-6; - background: $bg-subtle; + background: var(--bg-subtle); margin-right: 0; } } diff --git a/captive-theme/app/assets/stylesheets/captive-theme/_design_system_colors.scss b/captive-theme/app/assets/stylesheets/captive-theme/_design_system_colors.scss new file mode 100644 index 00000000..1554268e --- /dev/null +++ b/captive-theme/app/assets/stylesheets/captive-theme/_design_system_colors.scss @@ -0,0 +1,51 @@ +// Couleurs du Design System Captive +// https://www.notion.so/captive/UI-Les-couleurs-du-design-system-Captive-eed4bbb0295f4d949c47e183033e5180 + +:root { + // foreground + --fg-default: var(--blue-grey-900); + --fg-muted: var(--blue-grey-600); + --fg-subtle: var(--blue-grey-500); + --fg-on-emphasis: var(--white); + + // background + --bg-default: var(--white); + --bg-subtle: var(--blue-grey-050); + --bg-emphasis: var(--blue-grey-900); + + // primary + --primary-fg: var(--pink-vivid-500); + --primary-emphasis: var(--pink-vivid-500); + --primary-muted: var(--pink-vivid-400); + --primary-subtle: var(--pink-vivid-050); + + // accent + --accent-fg: var(--light-blue-vivid-700); + --accent-emphasis: var(--light-blue-vivid-700); + --accent-muted: var(--light-blue-vivid-600); + --accent-subtle: var(--light-blue-vivid-050); + + // success + --success-fg: var(--lime-green-700); + --success-emphasis: var(--lime-green-700); + --success-muted: var(--lime-green-600); + --success-subtle: var(--lime-green-050); + + // attention + --attention-fg: var(--yellow-vivid-800); + --attention-emphasis: var(--yellow-vivid-800); + --attention-muted: var(--yellow-vivid-700); + --attention-subtle: var(--yellow-vivid-050); + + // danger + --danger-fg: var(--red-vivid-600); + --danger-emphasis: var(--red-vivid-600); + --danger-muted: var(--red-vivid-500); + --danger-subtle: var(--red-vivid-050); + + // support + --support-fg: var(--purple-700); + --support-emphasis: var(--purple-700); + --support-muted: var(--purple-500); + --support-subtle: var(--purple-050); +} diff --git a/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss b/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss index d0765871..7ae140a9 100644 --- a/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss +++ b/captive-theme/app/assets/stylesheets/captive-theme/_variables.scss @@ -28,41 +28,8 @@ $purple-700: #421987 !default; $purple-500: #653cad !default; $purple-050: #eae2f8 !default; -// Couleurs du Design System Captive -// https://www.notion.so/captive/UI-Les-couleurs-du-design-system-Captive-eed4bbb0295f4d949c47e183033e5180 +@import './design_system_colors'; -$fg-default: $blue-grey-900 !default; -$fg-muted: $blue-grey-600 !default; -$fg-subtle: $blue-grey-500 !default; -$fg-on-emphasis: $white !default; -$bg-default: $white !default; -$bg-subtle: $blue-grey-050 !default; -$bg-emphasis: $blue-grey-900 !default; -$primary-fg: $pink-vivid-500 !default; -$primary-emphasis: $pink-vivid-500 !default; -$primary-muted: $pink-vivid-400 !default; -$primary-subtle: $pink-vivid-050 !default; -$primary-on-emphasis: $white !default; -$accent-fg: $light-blue-vivid-700 !default; -$accent-emphasis: $light-blue-vivid-700 !default; -$accent-muted: $light-blue-vivid-600 !default; -$accent-subtle: $light-blue-vivid-050 !default; -$success-fg: $lime-green-700 !default; -$success-emphasis: $lime-green-700 !default; -$success-muted: $lime-green-600 !default; -$success-subtle: $lime-green-050 !default; -$attention-fg: $yellow-vivid-800 !default; -$attention-emphasis: $yellow-vivid-800 !default; -$attention-muted: $yellow-vivid-700 !default; -$attention-subtle: $yellow-vivid-050 !default; -$danger-fg: $red-vivid-600 !default; -$danger-emphasis: $red-vivid-600 !default; -$danger-muted: $red-vivid-500 !default; -$danger-subtle: $red-vivid-050 !default; -$support-fg: $purple-700 !default; -$support-emphasis: $purple-700 !default; -$support-muted: $purple-500 !default; -$support-subtle: $purple-050 !default; $border-color: $blue-grey-100 !default; $border-color-emphasis: $blue-grey-900 !default;