@clayui/css 3.163.0 → 3.165.0

package/src/scss/atlas-custom-properties/variables/_c-root.scss

@@ -3,198 +3,172 @@
 $c-root: () !default;
 $c-root: map-merge(
 	(
-		--black: #000,
-		--white: #fff,
-
-		--gray-100: #f7f8f9,
-		--gray-200: #f1f2f5,
-		--gray-300: #e7e7ed,
-		--gray-400: #cdced9,
-		--gray-500: #a7a9bc,
-		--gray-600: #6b6c7e,
-		--gray-700: #495057,
-		--gray-800: #393a4a,
-		--gray-900: #272833,
-
-		--blue: #006eff,
-
-		--blue-d1: #006be6,
-		--blue-d2: #005fcc,
-		--blue-d3: #0053b3,
-		--blue-d4: #004799,
-		--blue-l1: #338fff,
-		--blue-l2: #66abff,
-		--blue-l3: #97c5ff,
-		--blue-l4: #cce3ff,
-		--blue-l5: #e5f1ff,
-
-		--indigo: #4d5fff,
-
-		--indigo-d1: #3347ff,
-		--indigo-d2: #1a30ff,
-		--indigo-d3: #001aff,
-		--indigo-d4: #0017e5,
-		--indigo-l1: #808cff,
-		--indigo-l2: #99a3ff,
-		--indigo-l3: #b2baff,
-		--indigo-l4: #ccd1ff,
-		--indigo-l5: #e5e8ff,
-
-		--purple: #a3f,
-
-		--purple-d1: #9f1aff,
-		--purple-d2: #9500ff,
-		--purple-d3: #8600e6,
-		--purple-d4: #70c,
-		--purple-l1: #bf66ff,
-		--purple-l2: #ca80ff,
-		--purple-l3: #d499ff,
-		--purple-l4: #dfb3ff,
-		--purple-l5: #f2e5ff,
-
-		--pink: #e50082,
-
-		--pink-d1: #cc0074,
-		--pink-d2: #b30065,
-		--pink-d3: #990057,
-		--pink-d4: #800048,
-		--pink-l1: #ff4db2,
-		--pink-l2: #ff80c8,
-		--pink-l3: #ff99d3,
-		--pink-l4: #ffb3de,
-		--pink-l5: #ffe5f4,
-
-		--red: #e60000,
-
-		--red-d1: #c00,
-		--red-d2: #b30000,
-		--red-d3: #900,
-		--red-d4: #800000,
-		--red-l1: #ff4d4d,
-		--red-l2: #f66,
-		--red-l3: #ff8080,
-		--red-l4: #f99,
-		--red-l5: #ffe5e5,
-
-		--orange: #cc4e00,
-
-		--orange-d1: #b34400,
-		--orange-d2: #993b00,
-		--orange-d3: #803100,
-		--orange-d4: #662700,
-		--orange-l1: #ff6200,
-		--orange-l2: #ff8133,
-		--orange-l3: #ffa166,
-		--orange-l4: #ffc099,
-		--orange-l5: #fff0e5,
-
-		--yellow: #fb0,
-
-		--yellow-d1: #e6a800,
-		--yellow-d2: #cc9600,
-		--yellow-d3: #b38900,
-		--yellow-d4: #997000,
-		--yellow-l1: #ffc933,
-		--yellow-l2: #ffd666,
-		--yellow-l3: #ffe499,
-		--yellow-l4: #fff1cc,
-		--yellow-l5: #fff8e5,
-
-		--green: #458613,
-
-		--green-d1: #397010,
-		--green-d2: #2e590d,
-		--green-d3: #22430a,
-		--green-d4: #162d06,
-		--green-l1: #53a117,
-		--green-l2: #67c91d,
-		--green-l3: #81e236,
-		--green-l4: #9de963,
-		--green-l5: #f1fce9,
-
-		--teal: #1b7e6e,
-
-		--teal-d1: #16695b,
-		--teal-d2: #125449,
-		--teal-d3: #0d3f37,
-		--teal-d4: #092a25,
-		--teal-l1: #24a892,
-		--teal-l2: #42d7be,
-		--teal-l3: #6ce0cc,
-		--teal-l4: #96e9db,
-		--teal-l5: #eafbf8,
-
-		--cyan: #0077b3,
-
-		--cyan-d1: #069,
-		--cyan-d2: #005580,
-		--cyan-d3: #046,
-		--cyan-d4: #00334d,
-		--cyan-l1: #0099e6,
-		--cyan-l2: #3bf,
-		--cyan-l3: #6cf,
-		--cyan-l4: #9df,
-		--cyan-l5: #e5f6ff,
-
-		--primary: #0b5fff,
-
-		--primary-d1: #0053f0,
-		--primary-d2: #004ad7,
-		--primary-l0: #5791ff,
-		--primary-l1: #80acff,
-		--primary-l2: #b3cdff,
-		--primary-l3: #f0f5ff,
-
-		--secondary: #6b6c7e,
-
-		--secondary-d1: #393a4a,
-		--secondary-d2: #30313f,
-		--secondary-l0: #9b92a5,
-		--secondary-l1: #a7a9bc,
-		--secondary-l2: #cdced9,
-		--secondary-l3: #e7e7ed,
-
-		--info: #2e5aac,
-
-		--info-d1: #294f98,
-		--info-d2: #234584,
-		--info-l1: #89a7e0,
-		--info-l2: #eef2fa,
-
-		--success: #287d3c,
-
-		--success-d1: #226a33,
-		--success-d2: #1c5629,
-		--success-l1: #5aca75,
-		--success-l2: #edf9f0,
-
-		--warning: #b95000,
-
-		--warning-d1: #9f4500,
-		--warning-d2: #863a00,
-		--warning-l1: #ff8f39,
-		--warning-l2: #fff4ec,
-
-		--danger: #da1414,
-
-		--danger-d1: #c31212,
-		--danger-d2: #ab1010,
-		--danger-l1: #f48989,
-		--danger-l2: #feefef,
-
-		--light: #f1f2f5,
-
-		--light-d1: #e2e4ea,
-		--light-d2: #d3d6e0,
-		--light-l1: #f7f8f9,
-		--light-l2: #fff,
-
-		--dark: #272833,
-		--dark-d1: #1c1c24,
-		--dark-d2: #111116,
-		--dark-l1: #30313f,
-		--dark-l2: #393a4a,
-
+		color-scheme: light dark,
+
+		--black: light-dark(#000, #fff),
+		--white: light-dark(#fff, #111116),
+		--gray-100: light-dark(#f7f8f9, #272833),
+		--gray-200: light-dark(#f1f2f5, #393a4a),
+		--gray-300: light-dark(#e7e7ed, #495057),
+		--gray-400: light-dark(#cdced9, #6b6c7e),
+		--gray-500: light-dark(#a7a9bc, #a7a9bc),
+		--gray-600: light-dark(#6b6c7e, #cdced9),
+		--gray-700: light-dark(#495057, #e7e7ed),
+		--gray-800: light-dark(#393a4a, #f1f2f5),
+		--gray-900: light-dark(#272833, #f7f8f9),
+		--blue: light-dark(#006eff, #429aff),
+		--blue-d1: light-dark(#006be6, #70b1ff),
+		--blue-d2: light-dark(#005fcc, #94c4ff),
+		--blue-d3: light-dark(#0053b3, #b8d8ff),
+		--blue-d4: light-dark(#004799, #e5f1ff),
+		--blue-l1: light-dark(#338fff, #2487ff),
+		--blue-l2: light-dark(#66abff, #006be6),
+		--blue-l3: light-dark(#97c5ff, #0056b8),
+		--blue-l4: light-dark(#cce3ff, #004799),
+		--blue-l5: light-dark(#e5f1ff, #002147),
+		--indigo: light-dark(#4d5fff, #8a95ff),
+		--indigo-d1: light-dark(#3347ff, #a8b1ff),
+		--indigo-d2: light-dark(#1a30ff, #bdc3ff),
+		--indigo-d3: light-dark(#001aff, #d1d6ff),
+		--indigo-d4: light-dark(#0017e5, #f0f1ff),
+		--indigo-l1: light-dark(#808cff, #5c6dff),
+		--indigo-l2: light-dark(#99a3ff, #384cff),
+		--indigo-l3: light-dark(#b2baff, #0019fa),
+		--indigo-l4: light-dark(#ccd1ff, #0013c2),
+		--indigo-l5: light-dark(#e5e8ff, #000a66),
+		--purple: light-dark(#a3f, #c87aff),
+		--purple-d1: light-dark(#9f1aff, #d499ff),
+		--purple-d2: light-dark(#9500ff, #e1b8ff),
+		--purple-d3: light-dark(#8600e6, #ecd1ff),
+		--purple-d4: light-dark(#70c, #f5ebff),
+		--purple-l1: light-dark(#bf66ff, #b54dff),
+		--purple-l2: light-dark(#ca80ff, #9f1aff),
+		--purple-l3: light-dark(#d499ff, #8c00f0),
+		--purple-l4: light-dark(#dfb3ff, #6800b2),
+		--purple-l5: light-dark(#f2e5ff, #47007a),
+		--pink: light-dark(#e50082, #ff5cb8),
+		--pink-d1: light-dark(#cc0074, #ff8acc),
+		--pink-d2: light-dark(#b30065, #ffb2de),
+		--pink-d3: light-dark(#990057, #ffd6ed),
+		--pink-d4: light-dark(#800048, #fff0f9),
+		--pink-l1: light-dark(#ff4db2, #ff33a7),
+		--pink-l2: light-dark(#ff80c8, #fa008e),
+		--pink-l3: light-dark(#ff99d3, #c2006d),
+		--pink-l4: light-dark(#ffb3de, #85004b),
+		--pink-l5: light-dark(#ffe5f4, #570031),
+		--red: light-dark(#e60000, #ff6666),
+		--red-d1: light-dark(#c00, #ff8f8f),
+		--red-d2: light-dark(#b30000, #ffb2b2),
+		--red-d3: light-dark(#900, #ffcccc),
+		--red-d4: light-dark(#800000, #ffe5e5),
+		--red-l1: light-dark(#ff4d4d, #ff2e2e),
+		--red-l2: light-dark(#f66, #f50000),
+		--red-l3: light-dark(#ff8080, #c70000),
+		--red-l4: light-dark(#f99, #8f0000),
+		--red-l5: light-dark(#ffe5e5, #420000),
+		--orange: light-dark(#cc4e00, #ff6e14),
+		--orange-d1: light-dark(#b34400, #ff8a42),
+		--orange-d2: light-dark(#993b00, #ffa770),
+		--orange-d3: light-dark(#803100, #ffc099),
+		--orange-d4: light-dark(#662700, #ffe7d6),
+		--orange-l1: light-dark(#ff6200, #e55800),
+		--orange-l2: light-dark(#ff8133, #b84600),
+		--orange-l3: light-dark(#ffa166, #8f3700),
+		--orange-l4: light-dark(#ffc099, #6b2900),
+		--orange-l5: light-dark(#fff0e5, #3d1700),
+		--yellow: light-dark(#fb0, #ffc524),
+		--yellow-d1: light-dark(#e6a800, #ffcc42),
+		--yellow-d2: light-dark(#cc9600, #ffdc7a),
+		--yellow-d3: light-dark(#b38900, #ffeab2),
+		--yellow-d4: light-dark(#997000, #fff8e5),
+		--yellow-l1: light-dark(#ffc933, #d69c00),
+		--yellow-l2: light-dark(#ffd666, #b88600),
+		--yellow-l3: light-dark(#ffe499, #8a6500),
+		--yellow-l4: light-dark(#fff1cc, #664e00),
+		--yellow-l5: light-dark(#fff8e5, #473400),
+		--green: light-dark(#458613, #5cb21a),
+		--green-d1: light-dark(#397010, #79e029),
+		--green-d2: light-dark(#2e590d, #9ae85f),
+		--green-d3: light-dark(#22430a, #bcf094),
+		--green-d4: light-dark(#162d06, #ddf8c9),
+		--green-l1: light-dark(#53a117, #4a8f14),
+		--green-l2: light-dark(#67c91d, #397010),
+		--green-l3: light-dark(#81e236, #2c550c),
+		--green-l4: light-dark(#9de963, #22430a),
+		--green-l5: light-dark(#f1fce9, #162d06),
+		--teal: light-dark(#1b7e6e, #28bda4),
+		--teal-d1: light-dark(#16695b, #4ad9c0),
+		--teal-d2: light-dark(#125449, #7ce4d2),
+		--teal-d3: light-dark(#0d3f37, #abede2),
+		--teal-d4: light-dark(#092a25, #ddf8f4),
+		--teal-l1: light-dark(#24a892, #22a08b),
+		--teal-l2: light-dark(#42d7be, #1b7e6e),
+		--teal-l3: light-dark(#6ce0cc, #156154),
+		--teal-l4: light-dark(#96e9db, #0e443b),
+		--teal-l5: light-dark(#eafbf8, #0a2e29),
+		--cyan: light-dark(#0077b3, #05acff),
+		--cyan-d1: light-dark(#069, #38bdff),
+		--cyan-d2: light-dark(#005580, #70cfff),
+		--cyan-d3: light-dark(#046, #99ddff),
+		--cyan-d4: light-dark(#00334d, #d1efff),
+		--cyan-l1: light-dark(#0099e6, #0095e0),
+		--cyan-l2: light-dark(#3bf, #007ebd),
+		--cyan-l3: light-dark(#6cf, #006699),
+		--cyan-l4: light-dark(#9df, #004e75),
+		--cyan-l5: light-dark(#e5f6ff, #00334d),
+		--primary: light-dark(#0b5fff, #6198ff),
+		--primary-d1: light-dark(#0053f0, #7aa8ff),
+		--primary-d2: light-dark(#004ad7, #d6e4ff),
+		--primary-d3: light-dark(#004ad7, #f0f5ff),
+		--primary-l0: light-dark(#5791ff, #0f62ff),
+		--primary-l1: light-dark(#80acff, #004cdb),
+		--primary-l2: light-dark(#b3cdff, #003aa8),
+		--primary-l3: light-dark(#f0f5ff, #001a4d),
+		--secondary: light-dark(#6b6c7e, #a2a2b9),
+		--secondary-d1: light-dark(#393a4a, #a5a7bb),
+		--secondary-d2: light-dark(#30313f, #8b8da7),
+		--secondary-l0: light-dark(#9b92a5, #7d7f9c),
+		--secondary-l1: light-dark(#a7a9bc, #636682),
+		--secondary-l2: light-dark(#cdced9, #525361),
+		--secondary-l3: light-dark(#e7e7ed, #34343d),
+		--info: light-dark(#2e5aac, #7e9fdd),
+		--info-d1: light-dark(#294f98, #9eb7e6),
+		--info-d2: light-dark(#234584, #dce4f5),
+		--info-d3: light-dark(#234584, #f3f6fc),
+		--info-l1: light-dark(#89a7e0, #4e7bd0),
+		--info-l2: light-dark(#eef2fa, #142648),
+		--info-l3: light-dark(#eef2fa, #0c172c),
+		--success: light-dark(#287d3c, #3bb959),
+		--success-d1: light-dark(#226a33, #59c974),
+		--success-d2: light-dark(#1c5629, #bae8c6),
+		--success-d3: light-dark(#1c5629, #d9f2df),
+		--success-l1: light-dark(#5aca75, #2a8340),
+		--success-l2: light-dark(#edf9f0, #13391b),
+		--success-l3: light-dark(#edf9f0, #102e16),
+		--warning: light-dark(#b95000, #ff7a14),
+		--warning-d1: light-dark(#9f4500, #ff9a4d),
+		--warning-d2: light-dark(#863a00, #ffdfc7),
+		--warning-d3: light-dark(#863a00, #fff4ec),
+		--warning-l1: light-dark(#ff8f39, #d15b00),
+		--warning-l2: light-dark(#fff4ec, #4d2100),
+		--warning-l3: light-dark(#fff4ec, #331600),
+		--danger: light-dark(#da1414, #f67474),
+		--danger-d1: light-dark(#c31212, #f69d9d),
+		--danger-d2: light-dark(#ab1010, #fde2e2),
+		--danger-d3: light-dark(#ab1010, #fef1f1),
+		--danger-l1: light-dark(#f48989, #ec2d2d),
+		--danger-l2: light-dark(#feefef, #470606),
+		--danger-l3: light-dark(#feefef, #420606),
+		--light: light-dark(#f1f2f5, #272833),
+		--light-d1: light-dark(#e2e4ea, #30313f),
+		--light-d2: light-dark(#d3d6e0, #30313f),
+		--light-l1: light-dark(#f7f8f9, #1c1c24),
+		--light-l2: light-dark(#fff, #111116),
+		--dark: light-dark(#272833, #f1f2f5),
+		--dark-d1: light-dark(#1c1c24, #f7f8f9),
+		--dark-d2: light-dark(#111116, #ffffff),
+		--dark-l1: light-dark(#30313f, #e2e4ea),
+		--dark-l2: light-dark(#393a4a, #e2e4ea),
 		--spacer: 1rem,
 
 		--spacer-0: map-get($spacers, 0),
@@ -213,24 +187,26 @@ $c-root: map-merge(
 
 		--line-height-base: 1.5,
 
-		--border-color: $gray-200,
+		--border-color: var(--gray-200),
 		--border-width: 0.0625rem,
 
 		--border-radius: 0.25rem,
 
 		--border-radius-lg: 0.375rem,
 		--border-radius-sm: 0.1875rem,
+		--border-radius-xl: 1rem,
 
 		--rounded-0-border-radius: 0,
 		--rounded-border-radius: $border-radius,
 		--rounded-circle-border-radius: 50%,
 		--rounded-pill: 50rem,
 
-		--box-shadow: 0 0.5rem 1rem unquote('hsl(from #{$black} h s l / 0.15)'),
-		--box-shadow-lg: 0 1rem 3rem
-			unquote('hsl(from #{$black} h s l / 0.175)'),
-		--box-shadow-sm: 0 0.125rem 0.25rem
-			unquote('hsl(from #{$black} h s l / 0.075)'),
+		--box-shadow:
+			unquote('0 0.5rem 1rem hsl(from var(--black) h s l / 0.15)'),
+		--box-shadow-lg:
+			unquote('0 1rem 3rem hsl(from var(--black) h s l / 0.175)'),
+		--box-shadow-sm:
+			unquote('0 0.125rem 0.25rem hsl(from var(--black) h s l / 0.075)'),
 		--transition-base: all 0.2s ease-in-out,
 		--transition-collapse: height 0.35s ease,
 		--transition-fade: opacity 0.15s linear,
@@ -239,14 +215,16 @@ $c-root: map-merge(
 			unquote(
 				'color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
 			),
-		--component-active-background-color: $primary,
-		--component-active-color: $white,
-
+		--component-active-background-color: var(--primary),
+		--component-active-bg: var(--component-active-background-color),
+		--component-active-color: var(--white),
 		--component-focus-box-shadow:
-			unquote('0 0 0 0.125rem #{$white}, 0 0 0 0.25rem #{$primary-l1}'),
+			unquote(
+				'0 0 0 0.125rem var(--white), 0 0 0 0.25rem var(--primary-l1)'
+			),
 		--component-focus-inset-box-shadow:
 			unquote(
-				'inset 0 0 0 0.125rem #{$primary-l1}, inset 0 0 0 0.25rem #{$white}'
+				'inset 0 0 0 0.125rem var(--primary-l1), inset 0 0 0 0.25rem var(--white)'
 			),
 		--component-disabled-opacity: 0.4,
 
@@ -263,8 +241,7 @@ $c-root: map-merge(
 				"system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
 			),
 		--font-family-serif: unquote("georgia, 'Times New Roman', times, serif"),
-		--font-family-base: $font-family-sans-serif,
-
+		--font-family-base: var(--font-family-sans-serif),
 		--font-size-base: 1rem,
 
 		--font-size-lg: 1.125rem,
@@ -286,21 +263,22 @@ $c-root: map-merge(
 
 		--headings-color: inherit,
 		--headings-font-family: inherit,
-		--headings-font-weight: $font-weight-bold,
+		--headings-font-weight: var(--font-weight-bold),
 		--headings-line-height: 1.2,
 		--headings-margin-bottom: 0.5rem,
 
-		--body-background-color: $white,
-		--body-color: $dark-d1,
-		--body-font-family: $font-family-base,
-		--body-font-size: $font-size-base,
+		--body-background-color: var(--white),
+		--body-bg: var(--body-background-color),
+		--body-color: var(--dark-d1),
+		--body-font-family: var(--font-family-base),
+		--body-font-size: var(--font-size-base),
 		--body-font-weight: $font-weight-base,
 		--body-line-height: $line-height-base,
 		--body-margin: 0,
 
-		--link-color: $primary,
+		--link-color: var(--primary),
 		--link-decoration: none,
-		--link-hover-color: $primary-d2,
+		--link-hover-color: var(--primary-d2),
 		--link-hover-decoration: underline,
 
 		--paragraph-margin-bottom: 1rem,
@@ -320,24 +298,240 @@ $c-root: map-merge(
 		--lead-font-size: 1.25rem,
 		--lead-font-weight: 400,
 
-		--text-muted: $gray-500,
-
+		--text-muted: var(--gray-500),
 		--blockquote-font-size: 1.25rem,
 
-		--blockquote-small-color: $gray-600,
+		--blockquote-small-color: var(--gray-600),
 		--blockquote-small-font-size: $small-font-size,
 
-		--hr-border-color: unquote('hsl(from #{$black} h s l / 0.1)'),
+		--hr-border-color: unquote('hsl(from var(--black) h s l / 0.1)'),
 		--hr-border-width: $border-width,
 		--hr-margin-y: $spacer,
 
-		--code-color: $pink,
+		--code-color: var(--pink),
 		--code-font-size: 87.5%,
 
 		--focus-ring-animation-from-box-shadow:
-			unquote('0 0 0 0.25rem #{$white}, 0 0 0 0.75rem #{$primary-l2}'),
+			unquote(
+				'0 0 0 0.25rem var(--white), 0 0 0 0.75rem var(--primary-l2)'
+			),
 		--focus-ring-animation-to-box-shadow:
-			unquote('0 0 0 0.125rem #{$white}, 0 0 0 0.25rem #{$primary-l0}'),
+			unquote(
+				'0 0 0 0.125rem var(--white), 0 0 0 0.25rem var(--primary-l0)'
+			),
+		--btn-outline-secondary-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-hover-border-color:
+			light-dark(transparent, var(--secondary)),
+		--btn-outline-secondary-hover-color:
+			light-dark(var(--gray-900), var(--secondary)),
+		--btn-outline-secondary-active-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-active-color:
+			light-dark(var(--gray-900), var(--secondary)),
+		--btn-outline-secondary-disabled-border-color:
+			light-dark(var(--secondary-l2), var(--secondary)),
+		--btn-outline-secondary-disabled-color:
+			light-dark(var(--secondary), var(--secondary)),
+		--modal-backdrop-background-color:
+			light-dark(var(--gray-800), var(--gray-200)),
+		--modal-backdrop-opacity: 0.8,
 	),
 	$c-root
 );
+
+$c-dark: () !default;
+$c-dark: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--breadcrumb-divider-svg-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M375.2 239.2 173.3 37c-23.6-23-59.9 11.9-36 35.1l183 183.9-182.9 183.8c-24 23.5 12.5 58.2 36.1 35.2l201.7-202.1c10.2-10.1 9.3-24.4 0-33.7z" fill="%23cdced9"/></svg>'),
+		--custom-checkbox-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23111116"/></svg>'),
+		--custom-checkbox-indicator-icon-checked-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M220.9 377.2c-8 0-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1 14.8-71 42.9-42.9l68.2 68.2 139.8-157.2c26.4-30 72 10.1 45.6 40.1L243.7 366.9c-5.5 6.3-13.4 10-21.8 10.3h-1z" fill="%23525361"/></svg>'),
+		--custom-checkbox-indicator-icon-indeterminate:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%23111116"/></svg>'),
+		--custom-checkbox-indicator-icon-indeterminate-readonly:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="%236b6c7e"/></svg>'),
+		--custom-radio-indicator-icon-checked:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><circle class="lexicon-icon-outline" cx="256" cy="256" r="256" fill="%23111116"/></svg>'),
+		--input-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--input-select-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23cdced9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23cdced9"></path></svg>'),
+		--input-select-icon-disabled:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23a7a9bc"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23a7a9bc"></path></svg>'),
+		--input-danger-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23ec2d2d"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23ec2d2d"></path></svg>'),
+		--input-success-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%232a8340"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%232a8340"></path></svg>'),
+		--input-warning-select-icon:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23d15b00"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23d15b00"></path></svg>'),
+		--form-control-select-secondary-icon-focus:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--form-control-select-secondary-icon-show:
+			url('data:image/svg+xml,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline caret-double-l-top" d="M347.913 199.336l-81.538-85c-5.413-5.642-14.188-5.642-19.6 0l-81.538 85c-8.731 9.101-2.548 24.664 9.8 24.664h163.077c12.348 0 18.531-15.563 9.8-24.664z" fill="%23f7f8f9"></path><path class="lexicon-icon-outline caret-double-l-bottom" d="M165.236 312.664l81.538 85c5.412 5.642 14.188 5.642 19.6 0l81.538-85c8.731-9.101 2.548-24.664-9.8-24.664h-163.077c-12.347 0-18.531 15.563-9.8 24.664z" fill="%23f7f8f9"></path></svg>'),
+		--multi-step-item-error-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M300.4 256 467 89.4c29.6-29.6-14.8-74.1-44.4-44.4L256 211.6 89.4 45C59.8 15.3 15.3 59.8 45 89.4L211.6 256 45 422.6c-29.7 29.7 14.7 74.1 44.4 44.4L256 300.4 422.6 467c29.7 29.7 74.1-14.7 44.4-44.4L300.4 256z" fill="%23111116"/></svg>'),
+		--multi-step-icon-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23111116"/></svg>'),
+		--multi-step-dropdown-indicator-complete-icon:
+			url('data:image/svg+xml;charset=utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M192.9 429.5c-8.3 0-16.4-3.3-22.3-9.2L44.5 294.1C15 263.2 62.7 222 89.1 249.5L191.5 352l230-258.9c27.2-30.5 74.3 11.5 47.1 41.9L216.4 418.9c-5.8 6.5-14 10.3-22.6 10.6h-.9z" fill="%23f7f8f9"/></svg>'),
+	),
+	$c-dark
+);
+
+$c-dark-high-contrast: () !default;
+$c-dark-high-contrast: map-deep-merge(
+	(
+		color-scheme: dark,
+
+		--white: #111116,
+
+		--blue-d1: #a8cfff,
+		--blue-d2: #c2ddff,
+		--blue-d3: #d6e9ff,
+		--blue-d4: #f0f7ff,
+		--blue-l1: #006cf0,
+		--blue-l2: #005dc7,
+		--blue-l3: #004594,
+		--blue-l4: #002f66,
+		--blue-l5: #002147,
+		--blue: #94c4ff,
+		--cyan-d1: #94dbff,
+		--cyan-d2: #ade4ff,
+		--cyan-d3: #c7ecff,
+		--cyan-d4: #e5f6ff,
+		--cyan-l1: #0095e0,
+		--cyan-l2: #0073ad,
+		--cyan-l3: #005f8f,
+		--cyan-l4: #00476b,
+		--cyan-l5: #00334d,
+		--cyan: #75d1ff,
+		--green-d1: #92e651,
+		--green-d2: #a6ea70,
+		--green-d3: #cff4b3,
+		--green-d4: #f1fce9,
+		--green-l1: #57aa18,
+		--green-l2: #498f14,
+		--green-l3: #3a6f10,
+		--green-l4: #29500c,
+		--green-l5: #162d06,
+		--green: #79e029,
+		--indigo-d1: #d6daff,
+		--indigo-d2: #d6daff,
+		--indigo-d3: #d6daff,
+		--indigo-d4: #f0f1ff,
+		--indigo-l1: #051fff,
+		--indigo-l2: #0015d1,
+		--indigo-l3: #0012b2,
+		--indigo-l4: #000d85,
+		--indigo-l5: #000a66,
+		--indigo: #bdc3ff,
+		--orange-d1: #ffc39e,
+		--orange-d2: #ffd6bd,
+		--orange-d3: #ffe6d6,
+		--orange-d4: #fff6f0,
+		--orange-l1: #eb5a00,
+		--orange-l2: #c24a00,
+		--orange-l3: #a33f00,
+		--orange-l4: #803100,
+		--orange-l5: #3d1700,
+		--orange: #ffb385,
+		--pink-d1: #ffc7e7,
+		--pink-d2: #ffd6ed,
+		--pink-d3: #ffe5f4,
+		--pink-d4: #fff5fb,
+		--pink-l1: #f5008b,
+		--pink-l2: #c2006e,
+		--pink-l3: #940053,
+		--pink-l4: #610037,
+		--pink-l5: #3d0022,
+		--pink: #ffaddc,
+		--purple-d1: #ecd1ff,
+		--purple-d2: #ecd1ff,
+		--purple-d3: #ecd1ff,
+		--purple-d4: #f5ebff,
+		--purple-l1: #9b0fff,
+		--purple-l2: #7f00db,
+		--purple-l3: #6e00bd,
+		--purple-l4: #590099,
+		--purple-l5: #3c0066,
+		--purple: #e1b8ff,
+		--red-d1: #ffc7c7,
+		--red-d2: #ffd6d6,
+		--red-d3: #ffe0e0,
+		--red-d4: #fff5f5,
+		--red-l1: #f50000,
+		--red-l2: #c20000,
+		--red-l3: #990000,
+		--red-l4: #700000,
+		--red-l5: #420000,
+		--red: #ffadad,
+		--teal-d1: #96e9db,
+		--teal-d2: #b3efe5,
+		--teal-d3: #ccf4ed,
+		--teal-d4: #eafbf8,
+		--teal-l1: #28bea4,
+		--teal-l2: #1f9380,
+		--teal-l3: #197667,
+		--teal-l4: #12594e,
+		--teal-l5: #0d3b34,
+		--teal: #67dfca,
+		--yellow-d1: #ffcc42,
+		--yellow-d2: #ffdc7a,
+		--yellow-d3: #ffeab2,
+		--yellow-d4: #fff8e5,
+		--yellow-l1: #d69c00,
+		--yellow-l2: #b88600,
+		--yellow-l3: #8a6500,
+		--yellow-l4: #664e00,
+		--yellow-l5: #473400,
+		--yellow: #ffc524,
+
+		--danger-d1: #fac7c7,
+		--danger-d2: #fef1f1,
+		--danger-l1: #b61111,
+		--danger-l2: #420606,
+		--danger: #f8b0b0,
+		--dark-d1: #f7f8f9,
+		--dark-d2: #ffffff,
+		--dark-l1: #e2e4ea,
+		--dark-l2: #e2e4ea,
+		--dark: #f1f2f5,
+		--info-d1: #cad8f1,
+		--info-d2: #f3f6fc,
+		--info-l1: #254a8d,
+		--info-l2: #0c172c,
+		--info: #b6c9ec,
+		--light-d1: #30313f,
+		--light-d2: #30313f,
+		--light-l1: #111116,
+		--light: #272833,
+		--primary-d1: #c7daff,
+		--primary-d2: #f0f5ff,
+		--primary-l0: #003eb2,
+		--primary-l1: #00318f,
+		--primary-l2: #002366,
+		--primary-l3: #001a4d,
+		--primary: #b3cdff,
+		--secondary-l0: #d9d9e3,
+		--secondary-l1: #bcbdcc,
+		--secondary-l2: #a5a7bb,
+		--secondary-l3: #8b8da7,
+		--secondary: #f6f6f8,
+		--success-d1: #a2e1b2,
+		--success-d2: #d9f2df,
+		--success-l1: #26783a,
+		--success-l2: #102e16,
+		--success: #8cd99e,
+		--warning-d1: #ffcba3,
+		--warning-d2: #fff4ec,
+		--warning-l1: #b24d00,
+		--warning-l2: #331600,
+		--warning: #ffb780,
+	),
+	$c-dark-high-contrast
+);