diff --git a/src/theme.css b/src/theme.css index 274964d..96f5219 100644 --- a/src/theme.css +++ b/src/theme.css @@ -4,279 +4,7 @@ @import "tailwindcss/components.css"; @import "tailwindcss/base.css"; -/* TODO we need to export styles from x-ui with :host selector in order to work with shadow dom */ -/* https://github.com/argentlabs/x-ui/pull/215 */ -/*@import "@argent/x-ui/dist/styles/tailwind.css";*/ - -/*!** This file is auto-generated by `pnpm gen:tokens` *!*/ -:host { - /** base color tokens */ - --color-50: 255, 255, 255, 0.5; - --color-400: 140 140 140; - --color-800: 38 38 38; - --color-900: 31 31 31; - --color-accessible-orange: 243 106 61; - --color-black-100: 0 0 0; - --color-black-50: 0, 0, 0, 0.5; - --color-black-30: 0, 0, 0, 0.3; - --color-black-6: 0, 0, 0, 0.06; - --color-black-4: 0, 0, 0, 0.04; - --color-black-12: 0, 0, 0, 0.12; - --color-black-0: 0, 0, 0, 0; - --color-deprecated-accent-accessible-green: 2 166 151; - --color-deprecated-accent-accessible-yellow: 255 171 0; - --color-deprecated-accent-green: 2 187 168; - --color-deprecated-accent-hot-pink: 255 91 129; - --color-deprecated-accent-yellow: 255 191 61; - --color-deprecated-black: 0 0 0; - --color-deprecated-neutrals-100: 249 249 249; - --color-deprecated-neutrals-200: 240 240 240; - --color-deprecated-neutrals-300: 191 191 191; - --color-deprecated-neutrals-500: 102 102 102; - --color-deprecated-neutrals-600: 89 89 89; - --color-deprecated-neutrals-700: 64 64 64; - --color-deprecated-neutrals-1000: 15 15 15; - --color-deprecated-primary-orange: 255 135 91; - --color-deprecated-white: 255 255 255; - --color-neutrals-100: 249 249 249; - --color-neutrals-200: 240 240 240; - --color-neutrals-300: 191 191 191; - --color-neutrals-400: 140 140 140; - --color-neutrals-500: 102 102 102; - --color-neutrals-600: 89 89 89; - --color-neutrals-700: 64 64 64; - --color-neutrals-800: 46 46 46; - --color-neutrals-900: 36 36 36; - --color-neutrals-1000: 23 23 23; - --color-primary-blue-200: 203 241 255; - --color-primary-blue-400: 41 197 255; - --color-primary-blue-600: 0 157 214; - --color-primary-blue-800: 0 120 164; - --color-primary-blue-1000: 7 49 68; - --color-primary-green-200: 206 255 243; - --color-primary-green-400: 44 211 169; - --color-primary-green-600: 2 161 122; - --color-primary-green-800: 10 77 59; - --color-primary-green-1000: 4 36 16; - --color-primary-orange-200: 255 203 184; - --color-primary-orange-400: 255 135 91; - --color-primary-orange-600: 243 106 61; - --color-primary-orange-800: 128 56 32; - --color-primary-orange-1000: 55 23 9; - --color-primary-orange-300: 255 158 122; - --color-primary-orange-18: 255, 135, 91, 0.18; - --color-primary-orange-6: 255, 135, 91, 0.06; - --color-primary-red-200: 255 221 225; - --color-primary-red-400: 233 95 114; - --color-primary-red-600: 219 59 78; - --color-primary-red-800: 99 9 21; - --color-primary-red-1000: 51 1 5; - --color-primary-red-dark: 193 32 38; - --color-primary-yellow-200: 252 239 211; - --color-primary-yellow-400: 255 191 61; - --color-primary-yellow-600: 255 171 0; - --color-primary-yellow-800: 241 159 0; - --color-primary-yellow-1000: 63 45 12; - --color-secondary-clementine: 255 168 92; - --color-secondary-coral: 255 103 92; - --color-secondary-hot-pink: 255 91 129; - --color-secondary-sky-blue: 41 197 255; - --color-white-100: 255 255 255; - --color-white-50: 255, 255, 255, 0.5; - --color-white-30: 255, 255, 255, 0.3; - --color-white-12: 255, 255, 255, 0.12; - --color-white-6: 255, 255, 255, 0.06; - --color-white-18: 255, 255, 255, 0.18; - --color-white-0: 255, 255, 255, 0; - - /** semantic color tokens */ - --color-accent-blue: rgba(var(--color-primary-blue-600)); - --color-accent-brand: rgba(var(--color-primary-orange-400)); - --color-accent-coral: rgba(var(--color-secondary-coral)); - --color-accent-green: rgba(var(--color-primary-green-400)); - --color-accent-hot-pink: rgba(var(--color-secondary-hot-pink)); - --color-accent-orange: rgba(var(--color-secondary-clementine)); - --color-accent-red: rgba(var(--color-primary-red-600)); - --color-accent-sky-blue: rgba(var(--color-secondary-sky-blue)); - --color-accent-yellow: rgba(var(--color-primary-yellow-400)); - --color-button-danger: rgba(var(--color-primary-red-600)); - --color-button-danger-hover: rgba(var(--color-primary-red-400)); - --color-button-info: rgba(var(--color-primary-blue-800)); - --color-button-info-hover: rgba(var(--color-primary-blue-600)); - --color-button-pressed-overlay: rgba(var(--color-black-12)); - --color-button-primary: rgba(var(--color-primary-orange-400)); - --color-button-primary-hover: rgba(var(--color-primary-orange-300)); - --color-button-secondary: rgba(var(--color-black-6)); - --color-button-secondary-hover: rgba(var(--color-black-12)); - --color-button-tertiary: rgba(var(--color-black-0)); - --color-button-tertiary-hover: rgba(var(--color-primary-orange-6)); - --color-button-tertiary-pressed: rgba(var(--color-primary-orange-18)); - --color-button-warning: rgba(var(--color-primary-yellow-800)); - --color-button-warning-hover: rgba(var(--color-primary-yellow-400)); - --color-icon-adaptive: rgba(var(--color-white-100)); - --color-icon-background: rgba(var(--color-black-6)); - --color-icon-background-brand: rgba(var(--color-primary-orange-400)); - --color-icon-brand: rgba(var(--color-primary-orange-600)); - --color-icon-danger: rgba(var(--color-primary-red-600)); - --color-icon-default: rgba(var(--color-neutrals-700)); - --color-icon-info: rgba(var(--color-primary-blue-600)); - --color-icon-secondary: rgba(var(--color-neutrals-400)); - --color-icon-stable: rgba(var(--color-white-100)); - --color-icon-subtle: rgba(var(--color-neutrals-300)); - --color-icon-success: rgba(var(--color-primary-green-600)); - --color-icon-warning: rgba(var(--color-primary-yellow-800)); - --color-ios-icon: rgb(80, 85, 92); - --color-ios-keyboard-button: rgb(0, 122, 255); - --color-ios-primary: rgb(0, 122, 255); - --color-ios-surface-dark: rgb(172, 180, 190); - --color-ios-surface-default: rgba(210, 213, 219, 0.9); - --color-ios-surface-elevated: rgb(255, 255, 255); - --color-ios-text: rgb(0, 0, 0); - --color-ios-text-inverted: rgb(255, 255, 255); - --color-shadow-default: rgba(var(--color-black-6)); - --color-shadow-strong: rgba(var(--color-black-30)); - --color-stroke-brand: rgba(var(--color-primary-orange-600)); - --color-stroke-danger: rgba(var(--color-primary-red-600)); - --color-stroke-default: rgba(var(--color-neutrals-200)); - --color-stroke-default-web: rgba(var(--color-neutrals-200)); - --color-stroke-focused: rgba(var(--color-black-30)); - --color-stroke-subtle: rgba(var(--color-black-6)); - --color-surface-brand: rgba(var(--color-primary-orange-400)); - --color-surface-danger-default: rgba(var(--color-primary-red-200)); - --color-surface-danger-vibrant: rgba(var(--color-primary-red-600)); - --color-surface-default: rgba(var(--color-neutrals-100)); - --color-surface-default-web: rgba(var(--color-neutrals-100)); - --color-surface-elevated: rgba(var(--color-white-100)); - --color-surface-elevated-web: rgba(var(--color-neutrals-200)); - --color-surface-info-default: rgba(var(--color-primary-blue-200)); - --color-surface-info-vibrant: rgba(var(--color-primary-blue-400)); - --color-surface-input: rgba(var(--color-black-4)); - --color-surface-inverted: rgba(var(--color-black-100)); - --color-surface-match-mode: rgba(var(--color-white-100)); - --color-surface-pressed-overlay: rgba(var(--color-black-12)); - --color-surface-stable-dark: rgba(var(--color-black-100)); - --color-surface-stable-light: rgba(var(--color-white-100)); - --color-surface-success-default: rgba(var(--color-primary-green-200)); - --color-surface-success-vibrant: rgba(var(--color-primary-green-400)); - --color-surface-sunken: rgba(var(--color-neutrals-200)); - --color-surface-text: rgba(var(--color-primary-orange-200)); - --color-surface-transparent: rgba(var(--color-black-6)); - --color-surface-warning-default: rgba(var(--color-primary-yellow-200)); - --color-surface-warning-vibrant: rgba(var(--color-primary-yellow-800)); - --color-text-brand: rgba(var(--color-primary-orange-600)); - --color-text-danger: rgba(var(--color-primary-red-600)); - --color-text-danger-accessible: rgba(var(--color-primary-red-1000)); - --color-text-info: rgba(var(--color-primary-blue-600)); - --color-text-info-accessible: rgba(var(--color-primary-blue-1000)); - --color-text-link: rgba(var(--color-primary-blue-600)); - --color-text-primary: rgba(var(--color-neutrals-700)); - --color-text-secondary: rgba(var(--color-neutrals-400)); - --color-text-secondary-web: rgba(var(--color-neutrals-500)); - --color-text-stable: rgba(var(--color-white-100)); - --color-text-subtle: rgba(var(--color-neutrals-300)); - --color-text-success: rgba(var(--color-primary-green-600)); - --color-text-success-accessible: rgba(var(--color-primary-green-1000)); - --color-text-warning: rgba(var(--color-primary-yellow-800)); - --color-text-warning-accessible: rgba(var(--color-primary-yellow-1000)); -} - -.dark { - /** dark theme semantic color tokens */ - --color-accent-blue: rgba(var(--color-primary-blue-600)); - --color-accent-brand: rgba(var(--color-primary-orange-600)); - --color-accent-coral: rgba(var(--color-secondary-coral)); - --color-accent-green: rgba(var(--color-primary-green-600)); - --color-accent-hot-pink: rgba(var(--color-secondary-hot-pink)); - --color-accent-orange: rgba(var(--color-secondary-clementine)); - --color-accent-red: rgba(var(--color-primary-red-dark)); - --color-accent-sky-blue: rgba(var(--color-primary-blue-400)); - --color-accent-yellow: rgba(var(--color-primary-yellow-600)); - --color-button-danger: rgba(var(--color-primary-red-600)); - --color-button-danger-hover: rgba(var(--color-primary-red-400)); - --color-button-info: rgba(var(--color-primary-blue-800)); - --color-button-info-hover: rgba(var(--color-primary-blue-600)); - --color-button-pressed-overlay: rgba(var(--color-black-12)); - --color-button-primary: rgba(var(--color-primary-orange-600)); - --color-button-primary-hover: rgba(var(--color-primary-orange-400)); - --color-button-secondary: rgba(var(--color-white-12)); - --color-button-secondary-hover: rgba(var(--color-white-18)); - --color-button-tertiary: rgba(var(--color-white-0)); - --color-button-tertiary-hover: rgba(var(--color-primary-orange-6)); - --color-button-tertiary-pressed: rgba(var(--color-primary-orange-18)); - --color-button-warning: rgba(var(--color-primary-yellow-600)); - --color-button-warning-hover: rgba(var(--color-primary-yellow-400)); - --color-icon-adaptive: rgba(var(--color-neutrals-1000)); - --color-icon-background: rgba(var(--color-white-12)); - --color-icon-background-brand: rgba(var(--color-primary-orange-600)); - --color-icon-brand: rgba(var(--color-primary-orange-400)); - --color-icon-danger: rgba(var(--color-primary-red-400)); - --color-icon-default: rgba(var(--color-white-100)); - --color-icon-info: rgba(var(--color-primary-blue-400)); - --color-icon-secondary: rgba(var(--color-neutrals-400)); - --color-icon-stable: rgba(var(--color-white-100)); - --color-icon-subtle: rgba(var(--color-neutrals-500)); - --color-icon-success: rgba(var(--color-primary-green-400)); - --color-icon-warning: rgba(var(--color-primary-yellow-600)); - --color-ios-icon: rgb(231, 231, 231); - --color-ios-keyboard-button: rgb(36, 36, 36); - --color-ios-primary: rgb(0, 122, 255); - --color-ios-surface-dark: rgb(36, 36, 36); - --color-ios-surface-default: rgba(32, 32, 32, 0.92); - --color-ios-surface-elevated: rgb(67, 67, 67); - --color-ios-text: rgb(255, 255, 255); - --color-ios-text-inverted: rgb(255, 255, 255); - --color-shadow-default: rgba(var(--color-black-30)); - --color-shadow-strong: rgba(var(--color-black-100)); - --color-stroke-brand: rgba(var(--color-primary-orange-600)); - --color-stroke-danger: rgba(var(--color-primary-red-400)); - --color-stroke-default: rgba(var(--color-black-100)); - --color-stroke-default-web: rgba(var(--color-neutrals-700)); - --color-stroke-focused: rgba(var(--color-white-30)); - --color-stroke-subtle: rgba(var(--color-white-12)); - --color-surface-brand: rgba(var(--color-primary-orange-600)); - --color-surface-danger-default: rgba(var(--color-primary-red-1000)); - --color-surface-danger-vibrant: rgba(var(--color-primary-red-600)); - --color-surface-default: rgba(var(--color-neutrals-1000)); - --color-surface-default-web: rgba(var(--color-black-100)); - --color-surface-elevated: rgba(var(--color-neutrals-900)); - --color-surface-elevated-web: rgba(var(--color-neutrals-900)); - --color-surface-info-default: rgba(var(--color-primary-blue-1000)); - --color-surface-info-vibrant: rgba(var(--color-primary-blue-400)); - --color-surface-input: rgba(var(--color-white-12)); - --color-surface-inverted: rgba(var(--color-white-100)); - --color-surface-match-mode: rgba(var(--color-black-100)); - --color-surface-pressed-overlay: rgba(var(--color-white-18)); - --color-surface-stable-dark: rgba(var(--color-black-100)); - --color-surface-stable-light: rgba(var(--color-white-100)); - --color-surface-success-default: rgba(var(--color-primary-green-800)); - --color-surface-success-vibrant: rgba(var(--color-primary-green-600)); - --color-surface-sunken: rgba(var(--color-black-100)); - --color-surface-text: rgba(var(--color-primary-orange-800)); - --color-surface-transparent: rgba(var(--color-white-12)); - --color-surface-warning-default: rgba(var(--color-primary-yellow-1000)); - --color-surface-warning-vibrant: rgba(var(--color-primary-yellow-600)); - --color-text-brand: rgba(var(--color-primary-orange-400)); - --color-text-danger: rgba(var(--color-primary-red-400)); - --color-text-danger-accessible: rgba(var(--color-primary-red-200)); - --color-text-info: rgba(var(--color-primary-blue-400)); - --color-text-info-accessible: rgba(var(--color-primary-blue-200)); - --color-text-link: rgba(var(--color-primary-blue-400)); - --color-text-primary: rgba(var(--color-white-100)); - --color-text-secondary: rgba(var(--color-neutrals-400)); - --color-text-secondary-web: rgba(var(--color-neutrals-300)); - --color-text-stable: rgba(var(--color-white-100)); - --color-text-subtle: rgba(var(--color-neutrals-500)); - --color-text-success: rgba(var(--color-primary-green-400)); - --color-text-success-accessible: rgba(var(--color-primary-green-200)); - --color-text-warning: rgba(var(--color-primary-yellow-600)); - --color-text-warning-accessible: rgba(var(--color-primary-yellow-200)); -} - - -.test-color { - color: yellow; - background-color: var(--color-primary-orange-400, green); -} +@import "@argent/x-ui/styles/tailwind.css"; .modal-font { font-family: