From 9c68952649671a665d75abef011c6793b3c46504 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 5 Dec 2023 17:23:59 -0300 Subject: [PATCH] Add tokens to stylesheet --- .../static/components-gallery/base-theme.css | 76 +++++++++++++++++-- 1 file changed, 71 insertions(+), 5 deletions(-) diff --git a/docs/public/static/components-gallery/base-theme.css b/docs/public/static/components-gallery/base-theme.css index 0416741dc6b80c..562fcb41b47fc5 100644 --- a/docs/public/static/components-gallery/base-theme.css +++ b/docs/public/static/components-gallery/base-theme.css @@ -20,6 +20,72 @@ --grey-700: #434d5b; --grey-800: #303740; --grey-900: #1c2025; + + --background-surface-light-default: #fff; + --background-surface-light-soft: var(--grey-50); + --background-surface-light-hard: var(--grey-300); + --background-surface-light-highlight: var(--primary-500); + --background-surface-light-overlay: rgba(0,0,0,0.3); + --background-surface-dark-default: var(--grey-900); + --background-surface-dark-soft: var(--grey-800); + --background-surface-dark-hard: var(--grey-700); + --background-surface-dark-highlight: var(--primary-500); + --background-surface-dark-overlay: rgba(0,0,0,0.6); + + --background-interactive-light-button-base: var(--primary-500); + --background-interactive-light-button-hover: var(--primary-600); + --background-interactive-light-button-active: var(--primary-700); + --background-interactive-light-button-disabled: var(--grey-200); + --background-interactive-dark-button-base: var(--primary-500); + --background-interactive-dark-button-hover: var(--primary-600); + --background-interactive-dark-button-active: var(--primary-700); + --background-interactive-dark-button-disabled: var(--grey-700); + + --background-interactive-light-input-base: var(--grey-50); + --background-interactive-light-input-hover: var(--grey-100); + --background-interactive-light-input-active: var(--grey-200); + --background-interactive-light-input-disabled: var(--grey-100); + --background-interactive-dark-input-base: var(--grey-900); + --background-interactive-dark-input-hover: var(--grey-800); + --background-interactive-dark-input-active: var(--grey-700); + --background-interactive-dark-input-disabled: var(--grey-800); + + --border-light-default: 1px solid var(--grey-200); + --border-light-soft: 1px solid var(--grey-300); + --border-light-hard: 1px solid var(--grey-500); + --border-light-interactive: 1px solid var(--primary-500); + --border-light-transparent: 1px solid rgba(0,0,0,0); + --border-dark-default: 1px solid var(--grey-700); + --border-dark-soft: 1px solid var(--grey-800); + --border-dark-hard: 1px solid var(--grey-600); + --border-dark-interactive: 1px solid var(--primary-500); + --border-dark-transparent: 1px solid rgba(0,0,0,0); + + --shadow-elevation-light-level-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); + --shadow-elevation-light-level-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px -1px rgba(0, 0, 0, 0.15); + --shadow-elevation-light-level-3: 0px 4px 16px -4px rgba(0, 0, 0, 0.25), 0px 1px 2px -1px rgba(0, 0, 0, 0.15); + --shadow-elevation-light-level-4: 0px 8px 32px -4px rgba(0, 0, 0, 0.25), 0px 1px 2px -1px rgba(0, 0, 0, 0.15); + --shadow-elevation-dark-level-1: 0px 2px 4px -0.5px rgba(0, 0, 0, 0.40); + --shadow-elevation-dark-level-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.30), 0px 2px 4px -0.5px rgba(0, 0, 0, 0.40); + --shadow-elevation-dark-level-3: 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32); + --shadow-elevation-dark-level-4: 0px 2px 24px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32); + + --shadow-interactive-light-button: 0px -2px 1px 0px #094651 inset, 0px 1.5px 1px 0px #1F91A5 inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --shadow-interactive-light-input: 0px 2px 2px 0px rgba(0, 0, 0, 0.05); + --shadow-interactive-light-switch-track: 0px 1px 1px 0px rgba(0, 0, 0, 0.05) inset; + --shadow-interactive-light-switch-thumb: 0px 1px 2px 0px rgba(0, 0, 0, 0.30); + --shadow-interactive-light-focus-visible: 0px 0px 0px 4px #99DAE5, 0px 0px 0px 1px rgba(0, 0, 0, 0.25); + --shadow-interactive-dark-button: 0px -2px 1px 0px #094651 inset, 0px 1.5px 1px 0px #1F91A5 inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.50); + --shadow-interactive-dark-input: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); + --shadow-interactive-dark-switch-track: 0px 1px 1px 0px rgba(0, 0, 0, 0.35) inset; + --shadow-interactive-dark-switch-thumb: 0px 1px 2px 0px rgba(0, 0, 0, 0.30); + --shadow-interactive-dark-focus-visible: 0px 0px 0px 4px #0D535F, 0px 0px 0px 1px rgba(0, 0, 0, 0.25); + + --border-radius-sm: 4px; + --border-radius-md: 8px; + --border-radius-lg: 12px; + --border-radius-xl: 24px; + --border-radius-full: 999px; } .GalleryBadge { @@ -50,8 +116,8 @@ white-space: nowrap; text-align: center; border-radius: 12px; - background: var(--primary-500); - box-shadow: 0px 4px 8px var(--GalleryBadge-badge-boxShadow-color, var(--grey-300)); + background: var(--background-surface-light-highlight); + box-shadow: var(--GalleryBadge-badge-boxShadow-color, var(--shadow-elevation-light-level-2)); transform: translate(50%, -50%); transform-origin: 100% 0; } @@ -60,15 +126,15 @@ width: 40px; height: 40px; border-radius: 12px; - background: var(--GalleryBadge-content-background-color, var(--grey-300)); + background: var(--GalleryBadge-content-background-color, var(--background-surface-light-hard)); display: inline-block; vertical-align: middle; } @media (prefers-color-scheme: dark) { .GalleryBadge { - --GalleryBadge-badge-boxShadow-color: var(--grey-900); - --GalleryBadge-content-background-color: var(--grey-400); + --GalleryBadge-badge-boxShadow-color: var(--shadow-elevation-dark-level-2); + --GalleryBadge-content-background-color: var(--background-surface-dark-hard); } }