@eui/styles 23.0.0-alpha.1 → 23.0.0-alpha.3

package/dist/base/02-tokens/colors-extra-palettes.scss

@@ -1,512 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@use '../01-base/' as base;
-
-$color-map-extra: (
-    'red': (
-        50: #fef2f2,
-        100: #fee2e2,
-        200: #fecaca,
-        300: #fca5a5,
-        400: #f87171,
-        500: #ef4444,
-        600: #dc2626,
-        700: #b91c1c,
-        800: #991b1b,
-        900: #7f1d1d,
-        950: #450a0a,
-    ),
-    'orange': (
-        50: #fff7ed,
-        100: #ffedd5,
-        200: #fed7aa,
-        300: #fdba74,
-        400: #fb923c,
-        500: #f97316,
-        600: #ea580c,
-        700: #c2410c,
-        800: #9a3412,
-        900: #7c2d12,
-        950: #431407,
-    ),
-    
-    'amber': (
-        50: #fffbeb,
-        100: #fef3c7,
-        200: #fde68a,
-        300: #fcd34d,
-        400: #fbbf24,
-        500: #f59e0b,
-        600: #d97706,
-        700: #b45309,
-        800: #92400e,
-        900: #78350f,
-        950: #451a03,
-    ),
-    
-    'yellow': (
-        50: #fefce8,
-        100: #fef9c3,
-        200: #fef08a,
-        300: #fde047,
-        400: #facc15,
-        500: #eab308,
-        600: #ca8a04,
-        700: #a16207,
-        800: #854d0e,
-        900: #713f12,
-        950: #422006,
-    ),
-    
-    'lime': (
-        50: #f7fee7,
-        100: #ecfccb,
-        200: #d9f99d,
-        300: #bef264,
-        400: #a3e635,
-        500: #84cc16,
-        600: #65a30d,
-        700: #4d7c0f,
-        800: #3f6212,
-        900: #365314,
-        950: #1a2e05,
-    ),
-    
-    'green': (
-        50: #f0fdf4,
-        100: #dcfce7,
-        200: #bbf7d0,
-        300: #86efac,
-        400: #4ade80,
-        500: #22c55e,
-        600: #16a34a,
-        700: #15803d,
-        800: #166534,
-        900: #14532d,
-        950: #052e16,
-    ),
-
-    'emerald': (
-        50: #ecfdf5,
-        100: #d1fae5,
-        200: #a7f3d0,
-        300: #6ee7b7,
-        400: #34d399,
-        500: #10b981,
-        600: #059669,
-        700: #047857,
-        800: #065f46,
-        900: #064e3b,
-        950: #022c22,
-    ),    
-
-    'teal': (
-        50: #f0fdfa,
-        100: #ccfbf1,
-        200: #99f6e4,
-        300: #5eead4,
-        400: #2dd4bf,
-        500: #14b8a6,
-        600: #0d9488,
-        700: #0f766e,
-        800: #115e59,
-        900: #134e4a,
-        950: #042f2e,
-    ),    
-
-    'cyan': (
-        50: #ecfeff,
-        100: #cffafe,
-        200: #a5f3fc,
-        300: #67e8f9,
-        400: #22d3ee,
-        500: #06b6d4,
-        600: #0891b2,
-        700: #0e7490,
-        800: #155e75,
-        900: #164e63,
-        950: #083344,
-    ),    
-    
-    'sky': (
-        50: #f0f9ff,
-        100: #e0f2fe,
-        200: #bae6fd,
-        300: #7dd3fc,
-        400: #38bdf8,
-        500: #0ea5e9,
-        600: #0284c7,
-        700: #0369a1,
-        800: #075985,
-        900: #0c4a6e,
-        950: #082f49,
-    ),
-    'blue': (
-        50: #eff6ff,
-        100: #dbeafe,
-        200: #bfdbfe,
-        300: #93c5fd,
-        400: #60a5fa,
-        500: #3b82f6,
-        600: #2563eb,
-        700: #1d4ed8,
-        800: #1e40af,
-        900: #1e3a8a,
-        950: #172554,
-    ),    
-    'indigo': (
-        50: #eef2ff,
-        100: #e0e7ff,
-        200: #c7d2fe,
-        300: #a5b4fc,
-        400: #818cf8,
-        500: #6366f1,
-        600: #4f46e5,
-        700: #4338ca,
-        800: #3730a3,
-        900: #312e81,
-        950: #1e1b4b,
-    ),
-    'violet': (
-        50: #f5f3ff,
-        100: #ede9fe,
-        200: #ddd6fe,
-        300: #c4b5fd,
-        400: #a78bfa,
-        500: #8b5cf6,
-        600: #7c3aed,
-        700: #6d28d9,
-        800: #5b21b6,
-        900: #4c1d95,
-        950: #2e1065,
-    ),    
-    
-    'purple': (
-        50: #faf5ff,
-        100: #f3e8ff,
-        200: #e9d5ff,
-        300: #d8b4fe,
-        400: #c084fc,
-        500: #a855f7,
-        600: #9333ea,
-        700: #7e22ce,
-        800: #6b21a8,
-        900: #581c87,
-        950: #3b0764,
-    ),    
-    
-    'fuchsia': (
-        50: #fdf4ff,
-        100: #fae8ff,
-        200: #f5d0fe,
-        300: #f0abfc,
-        400: #e879f9,
-        500: #d946ef,
-        600: #c026d3,
-        700: #a21caf,
-        800: #86198f,
-        900: #701a75,
-        950: #4a044e,
-    ),
-    
-    'pink': (
-        50: #fdf2f8,
-        100: #fce7f3,
-        200: #fbcfe8,
-        300: #f9a8d4,
-        400: #f472b6,
-        500: #ec4899,
-        600: #db2777,
-        700: #be185d,
-        800: #9d174d,
-        900: #831843,
-        950: #500724,
-    ),
-    
-    'rose': (
-        50: #fff1f2,
-        100: #ffe4e6,
-        200: #fecdd3,
-        300: #fda4af,
-        400: #fb7185,
-        500: #f43f5e,
-        600: #e11d48,
-        700: #be123c,
-        800: #9f1239,
-        900: #881337,
-        950: #4c0519,
-    ),
-
-    'ecl-blue-navy': (
-        50: #f5f5fa,
-        100: #f0f0f8,
-        200: #d9d9ec,
-        300: #bfbfe0,
-        400: #a0a0d1,
-        500: #8c8cc7,
-        600: #4545a4,
-        700: #000083,
-        800: #000069,
-        900: #00002e,
-        950: base.shade_color(#00002e, 2%),
-    ),
-
-    'ecl-blue-electric': (
-        50: #e6f8fd,
-        100: #d9f5fb,
-        200: #b1eaf7,
-        300: #5bd3ef,
-        400: #03bbe6,
-        500: #03a8cf,
-        600: #028cad,
-        700: #02708a,
-        800: #015467,
-        900: #014959,
-        950: base.shade_color(#014959, 5%),
-    ),
-
-    'ecl-green': (
-        50: #e6f9f2,
-        100: #daf6eb,
-        200: #b2edd6,
-        300: #8fe5c4,
-        400: #5ddaa9,
-        500: #05c67b,
-        600: #05b26f,
-        700: #049e62,
-        800: #04955c,
-        900: #03774a,
-        950: base.shade_color(#03774a, 5%),
-    ),
-
-    'ecl-green-dark': (
-        50: #e6f0f0,
-        100: #d9e8e8,
-        200: #b0d0d0,
-        300: #8cbaba,
-        400: #599c9c,
-        500: #066,
-        600: #005c5c,
-        700: #005252,
-        800: #004d4d,
-        900: #003d3d,
-        950: base.shade_color(#003d3d, 5%),
-    ),
-
-    'ecl-orange': (
-        50: #fff3e9,
-        100: #ffe9d6,
-        200: #ffdbba,
-        300: #ffc998,
-        400: #ffb16a,
-        500: #ff8a20,
-        600: #e87e1d,
-        700: #b56217,
-        800: #8c4c12,
-        900: #6b3a0d,
-        950: base.shade_color(#6b3a0d, 5%),
-    ),
-
-    'ecl-purple': (
-        50: #f4effb,
-        100: #ebe1f8,
-        200: #ddcdf3,
-        300: #ccb5ee,
-        400: #b594e6,
-        500: #905fd9,
-        600: #8356c5,
-        700: #66439a,
-        800: #4f3477,
-        900: #3c285b,
-        950: base.shade_color(#3c285b, 5%),
-    ),
-
-    'ecl-blue-ocean': (
-        50: #e8f8f6,
-        100: #dcf5f2,
-        200: #b7eae4,
-        300: #97e0d8,
-        400: #69d2c6,
-        500: #18baa8,
-        600: #16a797,
-        700: #139586,
-        800: #128c7e,
-        900: #0e7065,
-        950: base.shade_color(#0e7065, 5%),
-    ),
-
-    'ecl-green-lemon': (
-        50: #fafcee,
-        100: #f7fbe5,
-        200: #eff6c9,
-        300: #e8f2b0,
-        400: #ddec8d,
-        500: #cbe250,
-        600: #b7cb48,
-        700: #a2b540,
-        800: #98aa3c,
-        900: #7a8830,
-        950: base.shade_color(#7a8830, 15%),
-    ),
-
-    'ecl-green-pine': (
-        50: #eff3f3,
-        100: #dae2e4,
-        200: #ced8db,
-        300: #b6c6ca,
-        400: #94abb1,
-        500: #809ba2,
-        600: #445c63,
-        700: #0a3f4d,
-        800: #08323e,
-        900: #082f3a,
-        950: base.shade_color(#082f3a, 5%),
-    ),
-
-    'ecl-red-crayola': (
-        50: #fcebee,
-        100: #f6c1ca,
-        200: #f2a3b1,
-        300: #ec798d,
-        400: #e95f77,
-        500: #e33755,
-        600: #cf324d,
-        700: #a1273c,
-        800: #7d1e2f,
-        900: #5f1724,
-        950: base.shade_color(#5f1724, 5%),
-    ),
-
-    'ecl-warm-grey': (
-        50: #f6f4f3,
-        100: #e2dcda,
-        200: #d3cbc8,
-        300: #bfb4af,
-        400: #b3a59f,
-        500: #a08f87,
-        600: #92827b,
-        700: #726660,
-        800: #584f4a,
-        900: #433c39,
-        950: base.shade_color(#433c39, 5%),
-    ),
-
-    'ecl-yellow-gold': (
-        50: #fffae6,
-        100: #fff3c2,
-        200: #ffea91,
-        300: #ffe05e,
-        400: #ffd72e,
-        500: #ffce00,
-        600: #d9af00,
-        700: #b59200,
-        800: #917500,
-        900: #735d00,
-        950: base.shade_color(#735d00, 5%),
-    ),
-
-    'ecl-orange-abricot': (
-        50: #fff9ed,
-        100: #fff1d4,
-        200: #ffdfa9,
-        300: #ffbe5c,
-        400: #fea439,
-        500: #fc8713,
-        600: #ed6c09,
-        700: #c55109,
-        800: #9c4010,
-        900: #7e3610,
-        950: base.shade_color(#7e3610, 5%),
-    ),
-
-    'ecl-purple-violet': (
-        50: #f3f1ff,
-        100: #dbd4ff,
-        200: #cabfff,
-        300: #b1a1ff,
-        400: #a28fff,
-        500: #8b73ff,
-        600: #7e69e8,
-        700: #6352b5,
-        800: #4c3f8c,
-        900: #3a306b,
-        950: base.shade_color(#3a306b, 5%),
-    ),
-
-    'ecl-red-tomato': (
-        50: #fff0ed,
-        100: #ffd0c7,
-        200: #ffbaac,
-        300: #ff9a86,
-        400: #ff866e,
-        500: #ff684a,
-        600: #e85f43,
-        700: #b54a35,
-        800: #8c3929,
-        900: #6b2c1f,
-        950: base.shade_color(#6b2c1f, 5%),
-    ),
-);
-
-@function getColorContextMap($palette) {
-    @return (
-        base: map.get($palette, 500), 
-        default: map.get($palette, 600), 
-        lighter: map.get($palette, 400), 
-        light: map.get($palette, 500), 
-        dark: map.get($palette, 700), 
-        darker: map.get($palette, 800), 
-        surface-light: map.get($palette, 100), 
-        on-surface-light: map.get($palette, 950), 
-        surface-light-hover: map.get($palette, 200), 
-        on-surface-light-hover: map.get($palette, 900), 
-        surface-medium: map.get($palette, 300), 
-        on-surface-medium: map.get($palette, 900), 
-        surface-medium-hover: map.get($palette, 400), 
-        on-surface-medium-hover: map.get($palette, 950),     
-        surface: map.get($palette, 400), 
-        on-surface: base.getContrast(map.get($palette, 400)),   
-        surface-hover: map.get($palette, 600), 
-        on-surface-hover: base.getContrast(map.get($palette, 600)), 
-        surface-dark: map.get($palette, 700), 
-        on-surface-dark: base.getContrast(map.get($palette, 700)), 
-        border: map.get($palette, 500), 
-        border-light: map.get($palette, 300), 
-        border-lighter: map.get($palette, 200),     
-    );
-}
-
-$color-context-map-extra: (
-    'red': getColorContextMap(map.get($color-map-extra, 'red')), 
-    'orange': getColorContextMap(map.get($color-map-extra, 'orange')), 
-    'amber': getColorContextMap(map.get($color-map-extra, 'amber')), 
-    'yellow': getColorContextMap(map.get($color-map-extra, 'yellow')), 
-    'lime': getColorContextMap(map.get($color-map-extra, 'lime')), 
-    'green': getColorContextMap(map.get($color-map-extra, 'green')), 
-    'emerald': getColorContextMap(map.get($color-map-extra, 'emerald')), 
-    'teal': getColorContextMap(map.get($color-map-extra, 'teal')), 
-    'cyan': getColorContextMap(map.get($color-map-extra, 'cyan')), 
-    'sky': getColorContextMap(map.get($color-map-extra, 'sky')), 
-    'blue': getColorContextMap(map.get($color-map-extra, 'blue')), 
-    'indigo': getColorContextMap(map.get($color-map-extra, 'indigo')), 
-    'violet': getColorContextMap(map.get($color-map-extra, 'violet')), 
-    'purple': getColorContextMap(map.get($color-map-extra, 'purple')), 
-    'fuchsia': getColorContextMap(map.get($color-map-extra, 'fuchsia')), 
-    'pink': getColorContextMap(map.get($color-map-extra, 'pink')), 
-    'rose': getColorContextMap(map.get($color-map-extra, 'rose')), 
-    
-    'ecl-blue-navy': getColorContextMap(map.get($color-map-extra, 'ecl-blue-navy')), 
-    'ecl-blue-electric': getColorContextMap(map.get($color-map-extra, 'ecl-blue-electric')), 
-    'ecl-blue-ocean': getColorContextMap(map.get($color-map-extra, 'ecl-blue-ocean')), 
-    'ecl-green': getColorContextMap(map.get($color-map-extra, 'ecl-green')), 
-    'ecl-green-dark': getColorContextMap(map.get($color-map-extra, 'ecl-green-dark')), 
-    'ecl-orange': getColorContextMap(map.get($color-map-extra, 'ecl-orange')), 
-    'ecl-purple': getColorContextMap(map.get($color-map-extra, 'ecl-purple')), 
-    'ecl-green-lemon': getColorContextMap(map.get($color-map-extra, 'ecl-green-lemon')), 
-    'ecl-green-pine': getColorContextMap(map.get($color-map-extra, 'ecl-green-pine')), 
-    'ecl-red-crayola': getColorContextMap(map.get($color-map-extra, 'ecl-red-crayola')), 
-    'ecl-yellow-gold': getColorContextMap(map.get($color-map-extra, 'ecl-yellow-gold')), 
-    'ecl-orange-abricot': getColorContextMap(map.get($color-map-extra, 'ecl-orange-abricot')), 
-    'ecl-purple-violet': getColorContextMap(map.get($color-map-extra, 'ecl-purple-violet')), 
-    'ecl-red-tomato': getColorContextMap(map.get($color-map-extra, 'ecl-red-tomato')), 
-);

package/dist/base/03-vars/vars-dark-theme.scss

@@ -1,61 +0,0 @@
-@use 'sass:map';
-@use '../01-base' as base;
-@use '../02-tokens/colors-dark-theme' as colors;
-
-html.eui-t-dark {
-    --eui-c-black: #fff;
-    --eui-c-white: #000;
-
-
-    --eui-c-secondary-min: #{map.get(map.get(colors.$color-map, gr), 950)};
-    --eui-c-secondary-max: #{map.get(map.get(colors.$color-map, gr), 25)};
-
-    --eui-c-surface-page: #{map.get(map.get(colors.$color-map, grn), 25)};
-    --eui-c-surface-shell: #{map.get(map.get(colors.$color-map, grn), 50)};
-    --eui-c-surface-container: #{map.get(map.get(colors.$color-map, grn), 50)};
-    --eui-c-surface-container-1: #{map.get(map.get(colors.$color-map, grn), 50)};
-    --eui-c-surface-container-2: #{map.get(map.get(colors.$color-map, grn), 75)};
-    --eui-c-surface-container-3: #{map.get(map.get(colors.$color-map, grn), 75)};
-
-
-    --eui-c-text: #{map.get(map.get(colors.$color-map, gr), 950)};
-    --eui-c-text-light: #{map.get(map.get(colors.$color-map, gr), 800)};
-    --eui-c-text-lighter: #{map.get(map.get(colors.$color-map, gr), 700)};
-    --eui-c-text-lightest: #{map.get(map.get(colors.$color-map, gr), 600)};
-
-    --eui-c-focus-visible: #{map.get(map.get(colors.$color-map, pr), 600)};
-    --eui-c-focus: #{map.get(map.get(colors.$color-map, pr), 400)};
-    
-    --eui-c-hover: #{map.get(map.get(colors.$color-map, pr), 75)};
-    --eui-c-hover-disabled: #{map.get(map.get(colors.$color-map, gr), 100)};
-
-    --eui-c-active: #{map.get(map.get(colors.$color-map, pr), 600)};
-    --eui-c-active-bg: #{map.get(map.get(colors.$color-map, pr), 200)};
-    --eui-c-active-bg-alt: #{map.get(map.get(colors.$color-map, pr), 100)};
-    --eui-c-active-bg-light: #{map.get(map.get(colors.$color-map, pr), 100)};
-    --eui-c-active-bg-lighter: #{map.get(map.get(colors.$color-map, pr), 75)};
-
-    --eui-c-disabled: #{map.get(map.get(colors.$color-map, gr), 500)};
-    --eui-c-disabled-bg: #{map.get(map.get(colors.$color-map, gr), 50)};
-    --eui-c-readonly: #{map.get(map.get(colors.$color-map, gr), 600)};
-
-    --eui-c-link: #{map.get(map.get(colors.$color-map, pr), 600)};
-
-    --eui-c-divider: #{map.get(map.get(colors.$color-map, gr), 300)};
-    --eui-c-divider-dark: #{map.get(map.get(colors.$color-map, gr), 100)};
-    --eui-c-divider-light: #{map.get(map.get(colors.$color-map, gr), 200)};
-
-
-    // CONTEXT COLORS FROM PALETTES
-    // ----------------------------
-
-    @each $color, $shades in colors.$color-state-map {
-        @each $shade, $value in $shades {
-            @if $shade == default {
-                --eui-c-#{$color}: #{$value};
-            } @else {
-                --eui-c-#{$color + '-' + $shade}: #{$value};
-            }
-        }
-    }
-}