From a8e7196ed7ca74bd4e5819ef39f0101dbe3667c4 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Fri, 25 Aug 2023 13:23:12 +0300 Subject: [PATCH] refactor: added box-shadows --- paragon/_overrides.scss | 2 +- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/index.css | 6 +-- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 13 ++++-- tokens/src/themes/light/components/Code.json | 13 ++++++ .../light/components/Form/elevation.json | 42 ++++++++++++++++++- tokens/src/themes/light/components/Image.json | 2 +- 8 files changed, 70 insertions(+), 12 deletions(-) create mode 100644 tokens/src/themes/light/components/Code.json diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 204933d9..6568f0ad 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -5,8 +5,8 @@ // Alerts .alert-dismissible .close { - color: theme-color("gray"); opacity: 1; + color: theme-color("gray"); &:hover { color: theme-color("gray"); diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index a0b15ea2..0abb4f69 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Sun, 23 Jul 2023 16:09:04 GMT + * Generated on Fri, 25 Aug 2023 10:06:17 GMT */ diff --git a/paragon/css/core/index.css b/paragon/css/core/index.css index e3d6892b..4a993a98 100644 --- a/paragon/css/core/index.css +++ b/paragon/css/core/index.css @@ -1,4 +1,2 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono&display=swap'); - -@import "./custom-media-breakpoints.css"; -@import "./variables.css"; +@import "custom-media-breakpoints.css"; +@import "variables.css"; diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 4fe667f8..6a225695 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 27 Jul 2023 08:38:40 GMT + * Generated on Fri, 25 Aug 2023 10:06:17 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index 0688925e..612206fa 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 10 Aug 2023 08:21:39 GMT + * Generated on Fri, 25 Aug 2023 10:06:18 GMT */ :root { @@ -63,8 +63,12 @@ --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15); --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15); --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15); - --pgn-elevation-image-thumbnail-box-shadow: none; - --pgn-elevation-form-input-base: none; + --pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); + --pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075); + --pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1); + --pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1); + --pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075); + --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); --pgn-color-info-base: #00688DFF; --pgn-color-tooltip-bg-base: #00262BFF; --pgn-color-tooltip-light: #00262BFF; @@ -231,6 +235,8 @@ --pgn-elevation-box-shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15); --pgn-elevation-box-shadow-base: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15); --pgn-elevation-toast-box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15); + --pgn-elevation-form-control-select-border-focus: inset 0 1px 2px rgba(0, 0, 0, .075); + --pgn-elevation-form-control-indicator-checked-focus: inset 0 1px 1px rgba(0, 0, 0, .075); --pgn-elevation-popover-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15); --pgn-elevation-modal-content-box-shadow-sm-up: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15); --pgn-elevation-dropdown-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15); @@ -274,6 +280,7 @@ --pgn-color-btn-border-inverse-outline-primary: #707070FF; --pgn-color-btn-bg-inverse-brand: #D23228FF; --pgn-color-input-btn-focus: #00262BFF; + --pgn-elevation-form-input-focus: 0 0 0 1px #00262BFF; --pgn-color-btn-disabled-border-inverse-outline-primary: #707070FF; --pgn-color-btn-disabled-text-inverse-warning: #D6B600FF; --pgn-color-btn-disabled-text-outline-warning: #D6B600FF; diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json new file mode 100644 index 00000000..9c907227 --- /dev/null +++ b/tokens/src/themes/light/components/Code.json @@ -0,0 +1,13 @@ +{ + "elevation": { + "code": { + "kbd": { + "box-shadow": { + "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)", + "type": "shadow", + "source": "$kbd-box-shadow" + } + } + } + } +} diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index f42060ad..45e411a5 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -2,7 +2,47 @@ "elevation": { "form": { "input": { - "base": { "value": "none" } + "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)" }, + "focus": { + "value": "{elevation.input.btn-focus.box-shadow}", + "type": "shadow", + "source": "$input-focus-box-shadow" + } + }, + "control": { + "indicator": { + "checked": { + "focus": { + "value": "{elevation.form.input.base}", + "type": "shadow", + "source": "$custom-control-indicator-focus-box-shadow" + } + } + }, + "range": { + "track": { + "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)", + "type": "shadow", + "source": "$custom-range-track-box-shadow" + }, + "thumb": { + "base": { + "value": "0 .1rem .25rem rgba(0, 0, 0, .1)", "type": "shadow", "source": "$custom-range-thumb-box-shadow" + } + } + }, + "select": { + "border": { + "base": { + "value": "inset 0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$custom-select-box-shadow" + }, + "focus": { + "value": "{elevation.form.control.select.border.base}", + "type": "shadow", + "source": "$custom-select-focus-box-shadow" + } + } + } } } } diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index 232da44e..231232d4 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -2,7 +2,7 @@ "elevation": { "image": { "thumbnail": { - "box-shadow": { "value": "none" } + "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)" } } } }