Skip to content

Commit

Permalink
chore: use tailwind styles generated from x-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cussone
Cussone committed Oct 23, 2024
1 parent bf9294e commit 2d26120
Showing 1 changed file with 1 addition and 273 deletions.
274 changes: 1 addition & 273 deletions src/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 2d26120

Please sign in to comment.