@progress/kendo-theme-fluent 7.1.0-dev.7 → 7.1.0-dev.9

package/scss/core/color-system/_palettes.scss

@@ -1,5 +1,283 @@
 // Palettes
-$kendo-fluent-palettes: (
+$_default-palette-gray: (
+    white: #ffffff,
+    1: #faf9f8,
+    2: #f3f2f1,
+    3: #edebe9,
+    4: #e1dfdd,
+    5: #d2d0ce,
+    6: #c8c6c4,
+    7: #a19f9d,
+    8: #979593,
+    9: #8a8886,
+    10: #797775,
+    11: #605e5c,
+    12: #4e4d4b,
+    13: #3b3a39,
+    14: #323130,
+    15: #201f1e,
+    black: #000000,
+);
+
+$_default-palette-ocean-blue: (
+    1: #eff6fc,
+    2: #deecf9,
+    3: #c7e0f4,
+    4: #abd1ef,
+    5: #8ec2eb,
+    6: #72b3e6,
+    7: #1c87d9,
+    8: #0078d4,
+    9: #106ebe,
+    10: #005a9e,
+    11: #004578,
+    12: #003760,
+    13: #002948,
+    14: #001c30,
+    15: #000e18,
+);
+
+$_default-palette-crimson-red: (
+    1: #fef3f4,
+    2: #fde7e9,
+    3: #f3d2d4,
+    4: #e9bcbf,
+    5: #dfa7aa,
+    6: #d59195,
+    7: #cc7c80,
+    8: #c2666b,
+    9: #b85156,
+    10: #ae3b41,
+    11: #a4262c,
+    12: #831e23,
+    13: #62171a,
+    14: #420f12,
+    15: #220000,
+);
+
+$_default-palette-dandelion-yellow: (
+    1: #fff9e7,
+    2: #fff4ce,
+    3: #ffedad,
+    4: #ffe58d,
+    5: #ffde6c,
+    6: #ffd74b,
+    7: #ffcf2b,
+    8: #ffc80a,
+    9: #f5c000,
+    10: #e0b000,
+    11: #cca000,
+    12: #a38000,
+    13: #7a6000,
+    14: #524000,
+    15: #292000,
+);
+
+$_default-palette-forest-green: (
+    1: #effbee,
+    2: #dff6dd,
+    3: #c8e8c6,
+    4: #b1dbaf,
+    5: #9acd99,
+    6: #83c082,
+    7: #6cb26b,
+    8: #55a554,
+    9: #3e973e,
+    10: #278a27,
+    11: #107c10,
+    12: #0d630d,
+    13: #0a4a0a,
+    14: #063206,
+    15: #031903,
+);
+
+$_default-palette-cobalt-blue: (
+    1: #e7f2ff,
+    2: #cee5ff,
+    3: #add4ff,
+    4: #8dc3ff,
+    5: #6cb2ff,
+    6: #4ba0ff,
+    7: #2b8fff,
+    8: #0a7eff,
+    9: #096edf,
+    10: #085ebf,
+    11: #064f9f,
+    12: #053f80,
+    13: #042f60,
+    14: #032040,
+    15: #011020,
+);
+
+$_default-palette-azure-blue: (
+    1: #eaf3fb,
+    2: #deecf9,
+    3: #bfdbf3,
+    4: #aacfef,
+    5: #95c3ec,
+    6: #80b8e8,
+    7: #4094dc,
+    8: #2b88d8,
+    9: #287ec7,
+    10: #2473b7,
+    11: #2169a6,
+    12: #1e5e96,
+    13: #1a5485,
+    14: #174974,
+    15: #0d2a42,
+);
+
+$_default-palette-sapphire-blue: (
+    1: #ebf7fa,
+    2: #e0f3f7,
+    3: #d6eff4,
+    4: #bfe5ee,
+    5: #80ccdd,
+    6: #61c0d5,
+    7: #40b3cd,
+    8: #21a6c5,
+    9: #0099bc,
+    10: #0085a4,
+    11: #00738d,
+    12: #005f75,
+    13: #004d5e,
+    14: #00262f,
+    15: #001317,
+);
+
+$_default-palette-cardinal-red: (
+    1: #fdf0f1,
+    2: #fce9eb,
+    3: #fbe2e4,
+    4: #f9d1d5,
+    5: #f3a3aa,
+    6: #f08e96,
+    7: #ed7680,
+    8: #ea606c,
+    9: #e74856,
+    10: #c93f4b,
+    11: #ad3641,
+    12: #8f2d35,
+    13: #74242b,
+    14: #3a1216,
+    15: #1c090a,
+);
+
+$_default-palette-cyber-yellow: (
+    1: #fff9eb,
+    2: #fff7e0,
+    3: #fff4d6,
+    4: #ffedbf,
+    5: #ffdc80,
+    6: #ffd461,
+    7: #ffcb40,
+    8: #ffc221,
+    9: #ffb900,
+    10: #dea100,
+    11: #bf8b00,
+    12: #9e7300,
+    13: #805d00,
+    14: #402e00,
+    15: #1f1600,
+);
+
+$_default-palette-demin-blue: (
+    1: #ebf4fc,
+    2: #e0effa,
+    3: #d6e9f9,
+    4: #bfddf5,
+    5: #80bbeb,
+    6: #61abe6,
+    7: #409ae1,
+    8: #218adc,
+    9: #0078d7,
+    10: #0068bb,
+    11: #005aa1,
+    12: #004a85,
+    13: #003c6c,
+    14: #001e36,
+    15: #000e1a,
+);
+
+$_default-palette-iris-purple: (
+    1: #f5f3f9,
+    2: #f1ecf6,
+    3: #ece6f4,
+    4: #e1d8ed,
+    5: #c3b1db,
+    6: #b59fd3,
+    7: #a58bca,
+    8: #9778c1,
+    9: #8764b8,
+    10: #7557a0,
+    11: #654b8a,
+    12: #543e72,
+    13: #44325c,
+    14: #22192e,
+    15: #100c16,
+);
+
+$_default-palette-lime-green: (
+    1: #ebfbf3,
+    2: #e0f9ed,
+    3: #d6f7e7,
+    4: #bff2da,
+    5: #80e5b4,
+    6: #61dfa3,
+    7: #40d98f,
+    8: #21d37d,
+    9: #00cc6a,
+    10: #00b15c,
+    11: #009950,
+    12: #007e42,
+    13: #006635,
+    14: #00331b,
+    15: #00180d,
+);
+
+// stylelint-disable scss/no-global-function-names
+$kendo-palette-gray: $_default-palette-gray !default;
+$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
+
+$kendo-palette-ocean-blue: $_default-palette-ocean-blue !default;
+$kendo-palette-ocean-blue: map-merge($_default-palette-ocean-blue, $kendo-palette-ocean-blue);
+
+$kendo-palette-crimson-red: $_default-palette-crimson-red !default;
+$kendo-palette-crimson-red: map-merge($_default-palette-crimson-red, $kendo-palette-crimson-red);
+
+$kendo-palette-dandelion-yellow: $_default-palette-dandelion-yellow !default;
+$kendo-palette-dandelion-yellow: map-merge($_default-palette-dandelion-yellow, $kendo-palette-dandelion-yellow);
+
+$kendo-palette-forest-green: $_default-palette-forest-green !default;
+$kendo-palette-forest-green: map-merge($_default-palette-forest-green, $kendo-palette-forest-green);
+
+$kendo-palette-cobalt-blue: $_default-palette-cobalt-blue !default;
+$kendo-palette-cobalt-blue: map-merge($_default-palette-cobalt-blue, $kendo-palette-cobalt-blue);
+
+$kendo-palette-azure-blue: $_default-palette-azure-blue !default;
+$kendo-palette-azure-blue: map-merge($_default-palette-azure-blue, $kendo-palette-azure-blue);
+
+$kendo-palette-sapphire-blue: $_default-palette-sapphire-blue !default;
+$kendo-palette-sapphire-blue: map-merge($_default-palette-sapphire-blue, $kendo-palette-sapphire-blue);
+
+$kendo-palette-cardinal-red: $_default-palette-cardinal-red !default;
+$kendo-palette-cardinal-red: map-merge($_default-palette-cardinal-red, $kendo-palette-cardinal-red);
+
+$kendo-palette-cyber-yellow: $_default-palette-cyber-yellow !default;
+$kendo-palette-cyber-yellow: map-merge($_default-palette-cyber-yellow, $kendo-palette-cyber-yellow);
+
+$kendo-palette-demin-blue: $_default-palette-demin-blue !default;
+$kendo-palette-demin-blue: map-merge($_default-palette-demin-blue, $kendo-palette-demin-blue);
+
+$kendo-palette-iris-purple: $_default-palette-iris-purple !default;
+$kendo-palette-iris-purple: map-merge($_default-palette-iris-purple, $kendo-palette-iris-purple);
+
+$kendo-palette-lime-green: $_default-palette-lime-green !default;
+$kendo-palette-lime-green: map-merge($_default-palette-lime-green, $kendo-palette-lime-green);
+// stylelint-enable scss/no-global-function-names
+
+
+$kendo-palettes: (
     primary: (
         10: #eff6fc,
         20: #deecf9,
@@ -22,7 +300,7 @@ $kendo-fluent-palettes: (
         190: #162435,
         200: #131d29,
         210: #0e151e,
-        220: #070B10
+        220: #070b10,
     ),
     neutral: (
         10: #faf9f8,
@@ -46,7 +324,7 @@ $kendo-fluent-palettes: (
         190: #201f1e,
         200: #1b1a19,
         210: #161514,
-        220: #11100f
+        220: #11100f,
     ),
     error: (
         10: #fef3f4,
@@ -70,7 +348,7 @@ $kendo-fluent-palettes: (
         190: #a80000,
         200: #77231c,
         210: #4d211d,
-        220: #251616
+        220: #251616,
     ),
     success: (
         10: #effbee,
@@ -94,7 +372,7 @@ $kendo-fluent-palettes: (
         190: #107c10,
         200: #1d5d34,
         210: #193e2c,
-        220: #10211d
+        220: #10211d,
     ),
     warning: (
         10: #fff9e7,
@@ -118,7 +396,7 @@ $kendo-fluent-palettes: (
         190: #797775,
         200: #555557,
         210: #35373b,
-        220: #1a1c20
+        220: #1a1c20,
     ),
     info: (
         10: #e7f2ff,
@@ -142,7 +420,7 @@ $kendo-fluent-palettes: (
         190: #03274e,
         200: #021d3b,
         210: #021327,
-        220: #010a14
+        220: #010a14,
     ),
     tertiary: (
         10: #eaf3fb,
@@ -166,7 +444,7 @@ $kendo-fluent-palettes: (
         190: #0d2a42,
         200: #0a1f32,
         210: #071521,
-        220: #030a11
+        220: #030a11,
     ),
     series-a: (
         10: #bfe6ee,
@@ -190,7 +468,7 @@ $kendo-fluent-palettes: (
         190: #00262f,
         200: #001c23,
         210: #001318,
-        220: #000a0c
+        220: #000a0c,
     ),
     series-b: (
         10: #f9d1d5,
@@ -214,7 +492,7 @@ $kendo-fluent-palettes: (
         190: #3a1216,
         200: #2c0e10,
         210: #1d090b,
-        220: #0f0505
+        220: #0f0505,
     ),
     series-c: (
         10: #ffeebf,
@@ -238,7 +516,7 @@ $kendo-fluent-palettes: (
         190: #402e00,
         200: #302300,
         210: #201700,
-        220: #100c00
+        220: #100c00,
     ),
     series-d: (
         10: #bfddf5,
@@ -262,7 +540,7 @@ $kendo-fluent-palettes: (
         190: #001e36,
         200: #001623,
         210: #000f1b,
-        220: #00080e
+        220: #00080e,
     ),
     series-e: (
         10: #e1d8ed,
@@ -286,7 +564,7 @@ $kendo-fluent-palettes: (
         190: #22192e,
         200: #1a1323,
         210: #110d17,
-        220: #09060c
+        220: #09060c,
     ),
     series-f: (
         10: #bff2da,
@@ -310,6 +588,6 @@ $kendo-fluent-palettes: (
         190: #00331b,
         200: #002614,
         210: #001a0d,
-        220: #000d07
-    )
+        220: #000d07,
+    ),
 ) !default;

package/scss/core/color-system/_swatch-legacy.scss

@@ -0,0 +1,100 @@
+@use "@progress/kendo-theme-core/scss/index.import.scss" as core;
+
+@if(core.$kendo-enable-color-system) {
+    core.$kendo-body-bg: core.k-color( app-surface );
+    core.$kendo-body-text: core.k-color( on-app-surface );
+    core.$kendo-component-bg: core.$kendo-body-bg;
+    core.$kendo-component-text: core.$kendo-body-text;
+    core.$kendo-component-border: rgba( core.k-color( border, true ), .16 );
+    core.$kendo-hover-bg: core.k-color( base-hover );
+    core.$kendo-hover-text: core.k-color( on-base );
+    core.$kendo-hover-border: rgba( core.k-color( border, true ), .1 );
+    core.$kendo-selected-bg: core.k-color( base-active );
+    core.$kendo-selected-text: core.k-color( on-base );
+    core.$kendo-selected-border: rgba( core.k-color( border-alt, true ), .76 );
+    core.$kendo-selected-hover-bg: core.k-color( base-subtle-active );
+    core.$kendo-selected-hover-text: core.k-color( on-base );
+    core.$kendo-selected-hover-border: core.$kendo-selected-border;
+    core.$kendo-focus-outline: core.k-color( base-emphasis );
+    core.$kendo-subtle-text: core.k-color( subtle );
+    core.$kendo-link-text: core.k-color( primary );
+    core.$kendo-link-hover-text: core.k-color( primary-hover );
+    core.$kendo-invalid-bg: initial;
+    core.$kendo-invalid-text: core.k-color( error-on-surface );
+    core.$kendo-invalid-border: core.k-color( error-emphasis );
+    core.$kendo-invalid-shadow: null;
+    core.$kendo-disabled-bg: core.k-color( base-subtle );
+    core.$kendo-disabled-text: rgba( core.k-color( on-app-surface, true ), .46 );
+    core.$kendo-disabled-border: transparent;
+    core.$kendo-loading-bg: core.$kendo-component-bg;
+    core.$kendo-loading-text: currentColor;
+
+    core.$kendo-theme-colors: (
+        primary: (
+            text: core.k-color( primary-emphasis ),
+            bg: core.k-color( primary-subtle ),
+            border: core.k-color( primary-subtle ),
+        ),
+        info: (
+            text: core.k-color( info-on-surface ),
+            bg: core.k-color( info-subtle ),
+            border: core.k-color( info-subtle ),
+        ),
+        success: (
+            text: core.k-color( success-on-surface ),
+            bg: core.k-color( success-subtle ),
+            border: core.k-color( success-subtle ),
+        ),
+        warning: (
+            text: core.k-color( warning-on-surface ),
+            bg: core.k-color( warning-subtle ),
+            border: core.k-color( warning-subtle ),
+        ),
+        error: (
+            text: core.k-color( error-on-surface ),
+            bg: core.k-color( error-subtle ),
+            border: core.k-color( error-subtle ),
+        ),
+    );
+}
+
+:root {
+    --kendo-body-bg: #{core.$kendo-body-bg};
+    --kendo-body-text: #{core.$kendo-body-text};
+
+    --kendo-component-bg: #{core.$kendo-component-bg};
+    --kendo-component-text: #{core.$kendo-component-text};
+    --kendo-component-border: #{core.$kendo-component-border};
+
+    --kendo-link-text: #{core.$kendo-link-text};
+    --kendo-link-hover-text: #{core.$kendo-link-hover-text};
+
+    --kendo-disabled-bg: #{core.$kendo-disabled-bg};
+    --kendo-disabled-text: #{core.$kendo-disabled-text};
+    --kendo-disabled-border: #{core.$kendo-disabled-border};
+
+    --kendo-hover-bg: #{core.$kendo-hover-bg};
+    --kendo-hover-text: #{core.$kendo-hover-text};
+    --kendo-hover-border: #{core.$kendo-hover-border};
+
+    --kendo-selected-bg: #{core.$kendo-selected-bg};
+    --kendo-selected-text: #{core.$kendo-selected-text};
+    --kendo-selected-border: #{core.$kendo-selected-border};
+
+    --kendo-selected-hover-bg: #{core.$kendo-selected-hover-bg};
+    --kendo-selected-hover-text: #{core.$kendo-selected-hover-text};
+    --kendo-selected-hover-border: #{core.$kendo-selected-hover-border};
+
+    --kendo-focus-outline: #{core.$kendo-focus-outline};
+
+    --kendo-subtle-text: #{core.$kendo-subtle-text};
+
+    --kendo-invalid-bg: #{core.$kendo-invalid-bg};
+    --kendo-invalid-text: #{core.$kendo-invalid-text};
+    --kendo-invalid-border: #{core.$kendo-invalid-border};
+    --kendo-invalid-shadow: #{core.$kendo-invalid-shadow};
+
+    --kendo-border-radius-sm: #{core.$kendo-border-radius-sm};
+    --kendo-border-radius-md: #{core.$kendo-border-radius-md};
+    --kendo-border-radius-lg: #{core.$kendo-border-radius-lg};
+}