diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb index fee9cb8e38..ffebface9d 100644 --- a/docs/app/views/pages/_color_values.html.erb +++ b/docs/app/views/pages/_color_values.html.erb @@ -1,192 +1,11 @@
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_100" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_100" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_100" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_200" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_200" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_200" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_300" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_300" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_300" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_400" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_400" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_400" - } %> -
-
-
-
-
-
-
"> -

Classname Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames::TYPE_COLORS::#{color.upcase}_500" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageClassnames.TYPE_COLORS.#{color.upcase}_500" - } %> -
-
-
-

Hex Token

-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]" - } %> -
-
- <%= sage_component SageCopyButton, { - borderless: true, - css_classes: "colors__copy-btn", - value: "SageTokens.COLOR_PALETTE.#{color.upcase}_500" - } %> -
-
-
-
+ <% if color == "primary" || color == "sage" || color == "orange" %> + <% [100, 200, 300, 400, 500].each do |value| %> + <%= render "color_values_body", color: color, value: value %> + <% end %> + <% else %> + <% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %> + <%= render "color_values_body", color: color, value: value %> + <% end %> + <% end %>
diff --git a/docs/app/views/pages/_color_values_body.html.erb b/docs/app/views/pages/_color_values_body.html.erb new file mode 100644 index 0000000000..5006844d44 --- /dev/null +++ b/docs/app/views/pages/_color_values_body.html.erb @@ -0,0 +1,38 @@ +
+
+
"> +

Classname Token

+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageClassnames::TYPE_COLORS::#{color.upcase}_#{value}" + } %> +
+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageClassnames.TYPE_COLORS.#{color.upcase}_#{value}" + } %> +
+
+
+

Hex Token

+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{value}]" + } %> +
+
+ <%= sage_component SageCopyButton, { + borderless: true, + css_classes: "colors__copy-btn", + value: "SageTokens.COLOR_PALETTE.#{color.upcase}_#{value}" + } %> +
+
+
+
diff --git a/docs/app/views/pages/color.html.erb b/docs/app/views/pages/color.html.erb index 650d7cc901..20837149db 100644 --- a/docs/app/views/pages/color.html.erb +++ b/docs/app/views/pages/color.html.erb @@ -26,17 +26,17 @@ General background and text colors. Text and border colors, drop-shadows, and other interface components. ", use_sage_type: true) %> - <%= render "color_values_neutral", color: "grey"%> - <%= render "color_values_neutral", color: "charcoal"%> + <%= render "color_values", color: "grey"%>
<%= md(" ## Primary palette -Kajabi blue is the primary color used to signify that an element is clickable or has a selected state. +To signify that an element is clickable or has a selected state. ", use_sage_type: true) %> - <%= render "color_values", color: "primary"%> + <%= render "color_values", color: "blue"%> + <%= render "color_values", color: "mercury"%>
@@ -45,7 +45,7 @@ Kajabi blue is the primary color used to signify that an element is clickable or To communicate success and positive states. ", use_sage_type: true) %> - <%= render "color_values", color: "sage"%> + <%= render "color_values", color: "green"%>
@@ -73,5 +73,24 @@ Reserved for times when something important is missing or for irreversible or de Used only when no other color option is available. ", use_sage_type: true) %> <%= render "color_values", color: "purple"%> +
+ +
+<%= md(" +## Deprecated colors + +It is no longer recommended to use these colors. +", use_sage_type: true) %> +

Primary

+

Blue should be used instead of primary.

+ <%= render "color_values", color: "primary"%> +

Sage

+

Green should be used instead of sage.

+ <%= render "color_values", color: "sage"%> +

Orange

+

Mercury should be used instead of orange.

<%= render "color_values", color: "orange"%> +

Charcoal

+

Grey should be used instead of charcoal.

+ <%= render "color_values_neutral", color: "charcoal"%>
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index 9c83ba03cd..a705c5abc4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -52,18 +52,39 @@ font-size: sage-font-size(body); background: $hex; - @if (($name == white) or ($name == grey)) { + @if ($name == grey and $value > 40) { + color: sage-color(white); + } + @else if ($name == white or $name == grey) { color: sage-color(charcoal, 500); } - - @else if (($name == black) or ($name == charcoal)) { + @else if ($name == black or $name == charcoal) { + color: sage-color(white); + } + @else if ($name == blue and $value > 40) { + color: sage-color(blue, 20); + } + @else if ($name == blue) { + color: sage-color(blue, 95); + } + @else if ($name == mercury and $value > 20) { + color: sage-color(white); + } + @else if ($name == mercury) { + color: sage-color(mercury, 50); + } + @else if ($name == green and $value > 20) { + color: sage-color(white); + } + @else if ($name == green) { + color: sage-color(green, 60); + } + @else if ($name == yellow and $value > 30) { color: sage-color(white); } - @else if (lightness($hex) < 65) { color: sage-color($name, 100); } - @else { color: sage-color($name, 400); } diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb index 9b9ccacc87..f76cae65af 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -21,124 +21,376 @@ module SageDictionary # # Static vars for COLOR BASE # - SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#e6f4fe" + SD_SAGE_COLOR_BASE_BLUE_5_HEX = "#fafcff" + SD_SAGE_COLOR_BASE_BLUE_5_CODE = "blue-5" + SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME = "t-sage--color-blue-5" + SD_SAGE_COLOR_BASE_BLUE_10_HEX = "#eff6ff" + SD_SAGE_COLOR_BASE_BLUE_10_CODE = "blue-10" + SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME = "t-sage--color-blue-10" + SD_SAGE_COLOR_BASE_BLUE_15_HEX = "#dbe9fe" + SD_SAGE_COLOR_BASE_BLUE_15_CODE = "blue-15" + SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME = "t-sage--color-blue-15" + SD_SAGE_COLOR_BASE_BLUE_20_HEX = "#bfdbfe" + SD_SAGE_COLOR_BASE_BLUE_20_CODE = "blue-20" + SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME = "t-sage--color-blue-20" + SD_SAGE_COLOR_BASE_BLUE_30_HEX = "#92c5fd" + SD_SAGE_COLOR_BASE_BLUE_30_CODE = "blue-30" + SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME = "t-sage--color-blue-30" + SD_SAGE_COLOR_BASE_BLUE_40_HEX = "#60a5fa" + SD_SAGE_COLOR_BASE_BLUE_40_CODE = "blue-40" + SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME = "t-sage--color-blue-40" + SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#3c82f6" + SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50" + SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50" + SD_SAGE_COLOR_BASE_BLUE_60_HEX = "#2463eb" + SD_SAGE_COLOR_BASE_BLUE_60_CODE = "blue-60" + SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME = "t-sage--color-blue-60" + SD_SAGE_COLOR_BASE_BLUE_70_HEX = "#1c4ed8" + SD_SAGE_COLOR_BASE_BLUE_70_CODE = "blue-70" + SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME = "t-sage--color-blue-70" + SD_SAGE_COLOR_BASE_BLUE_80_HEX = "#1d40ae" + SD_SAGE_COLOR_BASE_BLUE_80_CODE = "blue-80" + SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME = "t-sage--color-blue-80" + SD_SAGE_COLOR_BASE_BLUE_90_HEX = "#1f3a8a" + SD_SAGE_COLOR_BASE_BLUE_90_CODE = "blue-90" + SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME = "t-sage--color-blue-90" + SD_SAGE_COLOR_BASE_BLUE_95_HEX = "#172554" + SD_SAGE_COLOR_BASE_BLUE_95_CODE = "blue-95" + SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME = "t-sage--color-blue-95" + SD_SAGE_COLOR_BASE_GREEN_5_HEX = "#fbfefc" + SD_SAGE_COLOR_BASE_GREEN_5_CODE = "green-5" + SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME = "t-sage--color-green-5" + SD_SAGE_COLOR_BASE_GREEN_10_HEX = "#edfcf2" + SD_SAGE_COLOR_BASE_GREEN_10_CODE = "green-10" + SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME = "t-sage--color-green-10" + SD_SAGE_COLOR_BASE_GREEN_15_HEX = "#d3f8df" + SD_SAGE_COLOR_BASE_GREEN_15_CODE = "green-15" + SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME = "t-sage--color-green-15" + SD_SAGE_COLOR_BASE_GREEN_20_HEX = "#aaf0c4" + SD_SAGE_COLOR_BASE_GREEN_20_CODE = "green-20" + SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME = "t-sage--color-green-20" + SD_SAGE_COLOR_BASE_GREEN_30_HEX = "#73e2a3" + SD_SAGE_COLOR_BASE_GREEN_30_CODE = "green-30" + SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME = "t-sage--color-green-30" + SD_SAGE_COLOR_BASE_GREEN_40_HEX = "#3dcb7f" + SD_SAGE_COLOR_BASE_GREEN_40_CODE = "green-40" + SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME = "t-sage--color-green-40" + SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#17b365" + SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" + SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" + SD_SAGE_COLOR_BASE_GREEN_60_HEX = "#079250" + SD_SAGE_COLOR_BASE_GREEN_60_CODE = "green-60" + SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME = "t-sage--color-green-60" + SD_SAGE_COLOR_BASE_GREEN_70_HEX = "#097443" + SD_SAGE_COLOR_BASE_GREEN_70_CODE = "green-70" + SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME = "t-sage--color-green-70" + SD_SAGE_COLOR_BASE_GREEN_80_HEX = "#085c37" + SD_SAGE_COLOR_BASE_GREEN_80_CODE = "green-80" + SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME = "t-sage--color-green-80" + SD_SAGE_COLOR_BASE_GREEN_90_HEX = "#094c2f" + SD_SAGE_COLOR_BASE_GREEN_90_CODE = "green-90" + SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME = "t-sage--color-green-90" + SD_SAGE_COLOR_BASE_GREEN_95_HEX = "#052e1c" + SD_SAGE_COLOR_BASE_GREEN_95_CODE = "green-95" + SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME = "t-sage--color-green-95" + SD_SAGE_COLOR_BASE_MERCURY_5_HEX = "#fffcfa" + SD_SAGE_COLOR_BASE_MERCURY_5_CODE = "mercury-5" + SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME = "t-sage--color-mercury-5" + SD_SAGE_COLOR_BASE_MERCURY_10_HEX = "#fff3ed" + SD_SAGE_COLOR_BASE_MERCURY_10_CODE = "mercury-10" + SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME = "t-sage--color-mercury-10" + SD_SAGE_COLOR_BASE_MERCURY_15_HEX = "#ffe3d4" + SD_SAGE_COLOR_BASE_MERCURY_15_CODE = "mercury-15" + SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME = "t-sage--color-mercury-15" + SD_SAGE_COLOR_BASE_MERCURY_20_HEX = "#ffc3a8" + SD_SAGE_COLOR_BASE_MERCURY_20_CODE = "mercury-20" + SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME = "t-sage--color-mercury-20" + SD_SAGE_COLOR_BASE_MERCURY_30_HEX = "#ff9970" + SD_SAGE_COLOR_BASE_MERCURY_30_CODE = "mercury-30" + SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME = "t-sage--color-mercury-30" + SD_SAGE_COLOR_BASE_MERCURY_40_HEX = "#ff6337" + SD_SAGE_COLOR_BASE_MERCURY_40_CODE = "mercury-40" + SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME = "t-sage--color-mercury-40" + SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#ff3e15" + SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50" + SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50" + SD_SAGE_COLOR_BASE_MERCURY_60_HEX = "#f11f06" + SD_SAGE_COLOR_BASE_MERCURY_60_CODE = "mercury-60" + SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME = "t-sage--color-mercury-60" + SD_SAGE_COLOR_BASE_MERCURY_70_HEX = "#c81307" + SD_SAGE_COLOR_BASE_MERCURY_70_CODE = "mercury-70" + SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME = "t-sage--color-mercury-70" + SD_SAGE_COLOR_BASE_MERCURY_80_HEX = "#9e110e" + SD_SAGE_COLOR_BASE_MERCURY_80_CODE = "mercury-80" + SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME = "t-sage--color-mercury-80" + SD_SAGE_COLOR_BASE_MERCURY_90_HEX = "#7f120f" + SD_SAGE_COLOR_BASE_MERCURY_90_CODE = "mercury-90" + SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME = "t-sage--color-mercury-90" + SD_SAGE_COLOR_BASE_MERCURY_95_HEX = "#450506" + SD_SAGE_COLOR_BASE_MERCURY_95_CODE = "mercury-95" + SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME = "t-sage--color-mercury-95" + SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe" SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100" SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100" - SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#8ecafb" + SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#92c5fd" SD_SAGE_COLOR_BASE_PRIMARY_200_CODE = "primary-200" SD_SAGE_COLOR_BASE_PRIMARY_200_CLASSNAME = "t-sage--color-primary-200" - SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#0072ef" + SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#2463eb" SD_SAGE_COLOR_BASE_PRIMARY_300_CODE = "primary-300" SD_SAGE_COLOR_BASE_PRIMARY_300_CLASSNAME = "t-sage--color-primary-300" - SD_SAGE_COLOR_BASE_PRIMARY_400_HEX = "#054fb8" + SD_SAGE_COLOR_BASE_PRIMARY_400_HEX = "#1c4ed8" SD_SAGE_COLOR_BASE_PRIMARY_400_CODE = "primary-400" SD_SAGE_COLOR_BASE_PRIMARY_400_CLASSNAME = "t-sage--color-primary-400" - SD_SAGE_COLOR_BASE_PRIMARY_500_HEX = "#07265f" + SD_SAGE_COLOR_BASE_PRIMARY_500_HEX = "#172554" SD_SAGE_COLOR_BASE_PRIMARY_500_CODE = "primary-500" SD_SAGE_COLOR_BASE_PRIMARY_500_CLASSNAME = "t-sage--color-primary-500" - SD_SAGE_COLOR_BASE_SAGE_100_HEX = "#ddf8f0" + SD_SAGE_COLOR_BASE_SAGE_100_HEX = "#d3f8df" SD_SAGE_COLOR_BASE_SAGE_100_CODE = "sage-100" SD_SAGE_COLOR_BASE_SAGE_100_CLASSNAME = "t-sage--color-sage-100" - SD_SAGE_COLOR_BASE_SAGE_200_HEX = "#86d5bc" + SD_SAGE_COLOR_BASE_SAGE_200_HEX = "#73e2a3" SD_SAGE_COLOR_BASE_SAGE_200_CODE = "sage-200" SD_SAGE_COLOR_BASE_SAGE_200_CLASSNAME = "t-sage--color-sage-200" - SD_SAGE_COLOR_BASE_SAGE_300_HEX = "#23856d" + SD_SAGE_COLOR_BASE_SAGE_300_HEX = "#079250" SD_SAGE_COLOR_BASE_SAGE_300_CODE = "sage-300" SD_SAGE_COLOR_BASE_SAGE_300_CLASSNAME = "t-sage--color-sage-300" - SD_SAGE_COLOR_BASE_SAGE_400_HEX = "#225d53" + SD_SAGE_COLOR_BASE_SAGE_400_HEX = "#085c37" SD_SAGE_COLOR_BASE_SAGE_400_CODE = "sage-400" SD_SAGE_COLOR_BASE_SAGE_400_CLASSNAME = "t-sage--color-sage-400" - SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#183e3b" + SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c" SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500" SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500" - SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fef8e1" + SD_SAGE_COLOR_BASE_YELLOW_5_HEX = "#fffefa" + SD_SAGE_COLOR_BASE_YELLOW_5_CODE = "yellow-5" + SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME = "t-sage--color-yellow-5" + SD_SAGE_COLOR_BASE_YELLOW_10_HEX = "#fffbeb" + SD_SAGE_COLOR_BASE_YELLOW_10_CODE = "yellow-10" + SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME = "t-sage--color-yellow-10" + SD_SAGE_COLOR_BASE_YELLOW_15_HEX = "#fff3c6" + SD_SAGE_COLOR_BASE_YELLOW_15_CODE = "yellow-15" + SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME = "t-sage--color-yellow-15" + SD_SAGE_COLOR_BASE_YELLOW_20_HEX = "#fee589" + SD_SAGE_COLOR_BASE_YELLOW_20_CODE = "yellow-20" + SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME = "t-sage--color-yellow-20" + SD_SAGE_COLOR_BASE_YELLOW_30_HEX = "#fed04b" + SD_SAGE_COLOR_BASE_YELLOW_30_CODE = "yellow-30" + SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME = "t-sage--color-yellow-30" + SD_SAGE_COLOR_BASE_YELLOW_40_HEX = "#fdbb21" + SD_SAGE_COLOR_BASE_YELLOW_40_CODE = "yellow-40" + SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME = "t-sage--color-yellow-40" + SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#f79a0b" + SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50" + SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50" + SD_SAGE_COLOR_BASE_YELLOW_60_HEX = "#db7303" + SD_SAGE_COLOR_BASE_YELLOW_60_CODE = "yellow-60" + SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME = "t-sage--color-yellow-60" + SD_SAGE_COLOR_BASE_YELLOW_70_HEX = "#b64f06" + SD_SAGE_COLOR_BASE_YELLOW_70_CODE = "yellow-70" + SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME = "t-sage--color-yellow-70" + SD_SAGE_COLOR_BASE_YELLOW_80_HEX = "#943d0e" + SD_SAGE_COLOR_BASE_YELLOW_80_CODE = "yellow-80" + SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME = "t-sage--color-yellow-80" + SD_SAGE_COLOR_BASE_YELLOW_90_HEX = "#79330e" + SD_SAGE_COLOR_BASE_YELLOW_90_CODE = "yellow-90" + SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME = "t-sage--color-yellow-90" + SD_SAGE_COLOR_BASE_YELLOW_95_HEX = "#451902" + SD_SAGE_COLOR_BASE_YELLOW_95_CODE = "yellow-95" + SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME = "t-sage--color-yellow-95" + SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fff3c6" SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100" SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100" - SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fad980" + SD_SAGE_COLOR_BASE_YELLOW_200_HEX = "#fed04b" SD_SAGE_COLOR_BASE_YELLOW_200_CODE = "yellow-200" SD_SAGE_COLOR_BASE_YELLOW_200_CLASSNAME = "t-sage--color-yellow-200" - SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#ffc505" + SD_SAGE_COLOR_BASE_YELLOW_300_HEX = "#fdbb21" SD_SAGE_COLOR_BASE_YELLOW_300_CODE = "yellow-300" SD_SAGE_COLOR_BASE_YELLOW_300_CLASSNAME = "t-sage--color-yellow-300" - SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#c56a02" + SD_SAGE_COLOR_BASE_YELLOW_400_HEX = "#db7303" SD_SAGE_COLOR_BASE_YELLOW_400_CODE = "yellow-400" SD_SAGE_COLOR_BASE_YELLOW_400_CLASSNAME = "t-sage--color-yellow-400" - SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#8c3b08" + SD_SAGE_COLOR_BASE_YELLOW_500_HEX = "#451902" SD_SAGE_COLOR_BASE_YELLOW_500_CODE = "yellow-500" SD_SAGE_COLOR_BASE_YELLOW_500_CLASSNAME = "t-sage--color-yellow-500" - SD_SAGE_COLOR_BASE_RED_100_HEX = "#fff0f0" + SD_SAGE_COLOR_BASE_RED_5_HEX = "#fffafa" + SD_SAGE_COLOR_BASE_RED_5_CODE = "red-5" + SD_SAGE_COLOR_BASE_RED_5_CLASSNAME = "t-sage--color-red-5" + SD_SAGE_COLOR_BASE_RED_10_HEX = "#fef2f2" + SD_SAGE_COLOR_BASE_RED_10_CODE = "red-10" + SD_SAGE_COLOR_BASE_RED_10_CLASSNAME = "t-sage--color-red-10" + SD_SAGE_COLOR_BASE_RED_15_HEX = "#fee2e1" + SD_SAGE_COLOR_BASE_RED_15_CODE = "red-15" + SD_SAGE_COLOR_BASE_RED_15_CLASSNAME = "t-sage--color-red-15" + SD_SAGE_COLOR_BASE_RED_20_HEX = "#fecaca" + SD_SAGE_COLOR_BASE_RED_20_CODE = "red-20" + SD_SAGE_COLOR_BASE_RED_20_CLASSNAME = "t-sage--color-red-20" + SD_SAGE_COLOR_BASE_RED_30_HEX = "#fda5a5" + SD_SAGE_COLOR_BASE_RED_30_CODE = "red-30" + SD_SAGE_COLOR_BASE_RED_30_CLASSNAME = "t-sage--color-red-30" + SD_SAGE_COLOR_BASE_RED_40_HEX = "#f87171" + SD_SAGE_COLOR_BASE_RED_40_CODE = "red-40" + SD_SAGE_COLOR_BASE_RED_40_CLASSNAME = "t-sage--color-red-40" + SD_SAGE_COLOR_BASE_RED_50_HEX = "#ef4444" + SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" + SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_RED_60_HEX = "#dc2625" + SD_SAGE_COLOR_BASE_RED_60_CODE = "red-60" + SD_SAGE_COLOR_BASE_RED_60_CLASSNAME = "t-sage--color-red-60" + SD_SAGE_COLOR_BASE_RED_70_HEX = "#b91c1b" + SD_SAGE_COLOR_BASE_RED_70_CODE = "red-70" + SD_SAGE_COLOR_BASE_RED_70_CLASSNAME = "t-sage--color-red-70" + SD_SAGE_COLOR_BASE_RED_80_HEX = "#991b1b" + SD_SAGE_COLOR_BASE_RED_80_CODE = "red-80" + SD_SAGE_COLOR_BASE_RED_80_CLASSNAME = "t-sage--color-red-80" + SD_SAGE_COLOR_BASE_RED_90_HEX = "#7f1c1d" + SD_SAGE_COLOR_BASE_RED_90_CODE = "red-90" + SD_SAGE_COLOR_BASE_RED_90_CLASSNAME = "t-sage--color-red-90" + SD_SAGE_COLOR_BASE_RED_95_HEX = "#572627" + SD_SAGE_COLOR_BASE_RED_95_CODE = "red-95" + SD_SAGE_COLOR_BASE_RED_95_CLASSNAME = "t-sage--color-red-95" + SD_SAGE_COLOR_BASE_RED_100_HEX = "#fee2e1" SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" - SD_SAGE_COLOR_BASE_RED_200_HEX = "#fdb0aa" + SD_SAGE_COLOR_BASE_RED_200_HEX = "#fda5a5" SD_SAGE_COLOR_BASE_RED_200_CODE = "red-200" SD_SAGE_COLOR_BASE_RED_200_CLASSNAME = "t-sage--color-red-200" - SD_SAGE_COLOR_BASE_RED_300_HEX = "#cf3c32" + SD_SAGE_COLOR_BASE_RED_300_HEX = "#ef4444" SD_SAGE_COLOR_BASE_RED_300_CODE = "red-300" SD_SAGE_COLOR_BASE_RED_300_CLASSNAME = "t-sage--color-red-300" - SD_SAGE_COLOR_BASE_RED_400_HEX = "#99221e" + SD_SAGE_COLOR_BASE_RED_400_HEX = "#991b1b" SD_SAGE_COLOR_BASE_RED_400_CODE = "red-400" SD_SAGE_COLOR_BASE_RED_400_CLASSNAME = "t-sage--color-red-400" - SD_SAGE_COLOR_BASE_RED_500_HEX = "#5e0d0d" + SD_SAGE_COLOR_BASE_RED_500_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_500_CODE = "red-500" SD_SAGE_COLOR_BASE_RED_500_CLASSNAME = "t-sage--color-red-500" - SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#fef1e1" + SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" - SD_SAGE_COLOR_BASE_ORANGE_200_HEX = "#ffb36b" + SD_SAGE_COLOR_BASE_ORANGE_200_HEX = "#ff9970" SD_SAGE_COLOR_BASE_ORANGE_200_CODE = "orange-200" SD_SAGE_COLOR_BASE_ORANGE_200_CLASSNAME = "t-sage--color-orange-200" - SD_SAGE_COLOR_BASE_ORANGE_300_HEX = "#fb7e09" + SD_SAGE_COLOR_BASE_ORANGE_300_HEX = "#ff3e15" SD_SAGE_COLOR_BASE_ORANGE_300_CODE = "orange-300" SD_SAGE_COLOR_BASE_ORANGE_300_CLASSNAME = "t-sage--color-orange-300" - SD_SAGE_COLOR_BASE_ORANGE_400_HEX = "#b3501e" + SD_SAGE_COLOR_BASE_ORANGE_400_HEX = "#9e110e" SD_SAGE_COLOR_BASE_ORANGE_400_CODE = "orange-400" SD_SAGE_COLOR_BASE_ORANGE_400_CLASSNAME = "t-sage--color-orange-400" - SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#5a260c" + SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506" SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500" SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500" - SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#eee4f6" + SD_SAGE_COLOR_BASE_PURPLE_5_HEX = "#fafbff" + SD_SAGE_COLOR_BASE_PURPLE_5_CODE = "purple-5" + SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME = "t-sage--color-purple-5" + SD_SAGE_COLOR_BASE_PURPLE_10_HEX = "#edf1ff" + SD_SAGE_COLOR_BASE_PURPLE_10_CODE = "purple-10" + SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME = "t-sage--color-purple-10" + SD_SAGE_COLOR_BASE_PURPLE_15_HEX = "#e0e4ff" + SD_SAGE_COLOR_BASE_PURPLE_15_CODE = "purple-15" + SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME = "t-sage--color-purple-15" + SD_SAGE_COLOR_BASE_PURPLE_20_HEX = "#c7cdfe" + SD_SAGE_COLOR_BASE_PURPLE_20_CODE = "purple-20" + SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME = "t-sage--color-purple-20" + SD_SAGE_COLOR_BASE_PURPLE_30_HEX = "#a3acfd" + SD_SAGE_COLOR_BASE_PURPLE_30_CODE = "purple-30" + SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME = "t-sage--color-purple-30" + SD_SAGE_COLOR_BASE_PURPLE_40_HEX = "#8081f9" + SD_SAGE_COLOR_BASE_PURPLE_40_CODE = "purple-40" + SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME = "t-sage--color-purple-40" + SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#6a62f2" + SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50" + SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50" + SD_SAGE_COLOR_BASE_PURPLE_60_HEX = "#533be5" + SD_SAGE_COLOR_BASE_PURPLE_60_CODE = "purple-60" + SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME = "t-sage--color-purple-60" + SD_SAGE_COLOR_BASE_PURPLE_70_HEX = "#4f37cb" + SD_SAGE_COLOR_BASE_PURPLE_70_CODE = "purple-70" + SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME = "t-sage--color-purple-70" + SD_SAGE_COLOR_BASE_PURPLE_80_HEX = "#402fa4" + SD_SAGE_COLOR_BASE_PURPLE_80_CODE = "purple-80" + SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME = "t-sage--color-purple-80" + SD_SAGE_COLOR_BASE_PURPLE_90_HEX = "#372d82" + SD_SAGE_COLOR_BASE_PURPLE_90_CODE = "purple-90" + SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME = "t-sage--color-purple-90" + SD_SAGE_COLOR_BASE_PURPLE_95_HEX = "#221b4b" + SD_SAGE_COLOR_BASE_PURPLE_95_CODE = "purple-95" + SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME = "t-sage--color-purple-95" + SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#e0e4ff" SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100" SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100" - SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#d9c2ef" + SD_SAGE_COLOR_BASE_PURPLE_200_HEX = "#a3acfd" SD_SAGE_COLOR_BASE_PURPLE_200_CODE = "purple-200" SD_SAGE_COLOR_BASE_PURPLE_200_CLASSNAME = "t-sage--color-purple-200" - SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#8e5ad8" + SD_SAGE_COLOR_BASE_PURPLE_300_HEX = "#533be5" SD_SAGE_COLOR_BASE_PURPLE_300_CODE = "purple-300" SD_SAGE_COLOR_BASE_PURPLE_300_CLASSNAME = "t-sage--color-purple-300" - SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#50348a" + SD_SAGE_COLOR_BASE_PURPLE_400_HEX = "#402fa4" SD_SAGE_COLOR_BASE_PURPLE_400_CODE = "purple-400" SD_SAGE_COLOR_BASE_PURPLE_400_CLASSNAME = "t-sage--color-purple-400" - SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#381c5e" + SD_SAGE_COLOR_BASE_PURPLE_500_HEX = "#221b4b" SD_SAGE_COLOR_BASE_PURPLE_500_CODE = "purple-500" SD_SAGE_COLOR_BASE_PURPLE_500_CLASSNAME = "t-sage--color-purple-500" - SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#8d939a" + SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180" SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100" SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100" - SD_SAGE_COLOR_BASE_CHARCOAL_200_HEX = "#60666c" + SD_SAGE_COLOR_BASE_CHARCOAL_200_HEX = "#6c6a69" SD_SAGE_COLOR_BASE_CHARCOAL_200_CODE = "charcoal-200" SD_SAGE_COLOR_BASE_CHARCOAL_200_CLASSNAME = "t-sage--color-charcoal-200" - SD_SAGE_COLOR_BASE_CHARCOAL_300_HEX = "#43474b" + SD_SAGE_COLOR_BASE_CHARCOAL_300_HEX = "#4d4d4c" SD_SAGE_COLOR_BASE_CHARCOAL_300_CODE = "charcoal-300" SD_SAGE_COLOR_BASE_CHARCOAL_300_CLASSNAME = "t-sage--color-charcoal-300" - SD_SAGE_COLOR_BASE_CHARCOAL_400_HEX = "#202327" + SD_SAGE_COLOR_BASE_CHARCOAL_400_HEX = "#343332" SD_SAGE_COLOR_BASE_CHARCOAL_400_CODE = "charcoal-400" SD_SAGE_COLOR_BASE_CHARCOAL_400_CLASSNAME = "t-sage--color-charcoal-400" - SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#040506" + SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500" SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500" - SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f9fafa" + SD_SAGE_COLOR_BASE_GREY_5_HEX = "#fcfcfc" + SD_SAGE_COLOR_BASE_GREY_5_CODE = "grey-5" + SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME = "t-sage--color-grey-5" + SD_SAGE_COLOR_BASE_GREY_10_HEX = "#f8f8f8" + SD_SAGE_COLOR_BASE_GREY_10_CODE = "grey-10" + SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME = "t-sage--color-grey-10" + SD_SAGE_COLOR_BASE_GREY_15_HEX = "#f0f0f0" + SD_SAGE_COLOR_BASE_GREY_15_CODE = "grey-15" + SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME = "t-sage--color-grey-15" + SD_SAGE_COLOR_BASE_GREY_20_HEX = "#e4e4e4" + SD_SAGE_COLOR_BASE_GREY_20_CODE = "grey-20" + SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME = "t-sage--color-grey-20" + SD_SAGE_COLOR_BASE_GREY_30_HEX = "#d2d1d1" + SD_SAGE_COLOR_BASE_GREY_30_CODE = "grey-30" + SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME = "t-sage--color-grey-30" + SD_SAGE_COLOR_BASE_GREY_40_HEX = "#bbbab9" + SD_SAGE_COLOR_BASE_GREY_40_CODE = "grey-40" + SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME = "t-sage--color-grey-40" + SD_SAGE_COLOR_BASE_GREY_50_HEX = "#9b9a98" + SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50" + SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50" + SD_SAGE_COLOR_BASE_GREY_60_HEX = "#828180" + SD_SAGE_COLOR_BASE_GREY_60_CODE = "grey-60" + SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME = "t-sage--color-grey-60" + SD_SAGE_COLOR_BASE_GREY_70_HEX = "#6c6a69" + SD_SAGE_COLOR_BASE_GREY_70_CODE = "grey-70" + SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME = "t-sage--color-grey-70" + SD_SAGE_COLOR_BASE_GREY_80_HEX = "#4d4d4c" + SD_SAGE_COLOR_BASE_GREY_80_CODE = "grey-80" + SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME = "t-sage--color-grey-80" + SD_SAGE_COLOR_BASE_GREY_90_HEX = "#343332" + SD_SAGE_COLOR_BASE_GREY_90_CODE = "grey-90" + SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME = "t-sage--color-grey-90" + SD_SAGE_COLOR_BASE_GREY_95_HEX = "#1a1a19" + SD_SAGE_COLOR_BASE_GREY_95_CODE = "grey-95" + SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME = "t-sage--color-grey-95" + SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8" SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100" SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100" - SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f6f8f8" + SD_SAGE_COLOR_BASE_GREY_200_HEX = "#f0f0f0" SD_SAGE_COLOR_BASE_GREY_200_CODE = "grey-200" SD_SAGE_COLOR_BASE_GREY_200_CLASSNAME = "t-sage--color-grey-200" - SD_SAGE_COLOR_BASE_GREY_300_HEX = "#eceeef" + SD_SAGE_COLOR_BASE_GREY_300_HEX = "#e4e4e4" SD_SAGE_COLOR_BASE_GREY_300_CODE = "grey-300" SD_SAGE_COLOR_BASE_GREY_300_CLASSNAME = "t-sage--color-grey-300" - SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d3d5d9" + SD_SAGE_COLOR_BASE_GREY_400_HEX = "#d2d1d1" SD_SAGE_COLOR_BASE_GREY_400_CODE = "grey-400" SD_SAGE_COLOR_BASE_GREY_400_CLASSNAME = "t-sage--color-grey-400" - SD_SAGE_COLOR_BASE_GREY_500_HEX = "#b5bac0" + SD_SAGE_COLOR_BASE_GREY_500_HEX = "#9b9a98" SD_SAGE_COLOR_BASE_GREY_500_CODE = "grey-500" SD_SAGE_COLOR_BASE_GREY_500_CLASSNAME = "t-sage--color-grey-500" SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff" @@ -176,6 +428,192 @@ module SageDictionary # Map for COLOR BASE # SD_SAGE_COLOR = { + "BLUE": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_95_CLASSNAME, + }, + }, + "GREEN": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_95_CLASSNAME, + }, + }, + "MERCURY": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_95_CLASSNAME, + }, + }, "PRIMARY": { "100": { "HEX": SD_SAGE_COLOR_BASE_PRIMARY_100_HEX, @@ -231,6 +669,66 @@ module SageDictionary }, }, "YELLOW": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, @@ -258,6 +756,66 @@ module SageDictionary }, }, "RED": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_RED_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_RED_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_RED_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_RED_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_RED_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_RED_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_RED_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_RED_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_RED_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_RED_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_RED_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, @@ -312,6 +870,66 @@ module SageDictionary }, }, "PURPLE": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, @@ -366,6 +984,66 @@ module SageDictionary }, }, "GREY": { + "5": { + "HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME, + }, + "10": { + "HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME, + }, + "15": { + "HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME, + }, + "20": { + "HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME, + }, + "30": { + "HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME, + }, + "40": { + "HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME, + }, + "50": { + "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, + }, + "60": { + "HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME, + }, + "70": { + "HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME, + }, + "80": { + "HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME, + }, + "90": { + "HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME, + }, + "95": { + "HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME, + }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, @@ -455,74 +1133,74 @@ module SageDictionary # # Static vars for COLOR COMBOS # - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#202327" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#040506" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#eceeef" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d3d5d9" - SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#60666c" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#60666c" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = "#8d939a" - SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = "#8d939a" - SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = "#f6f8f8" - SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = "#202327" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = "#225d53" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = "#183e3b" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = "#ddf8f0" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = "#86d5bc" - SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = "#23856d" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = "#225d53" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = "#23856d" - SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = "#23856d" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#343332" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#1a1a19" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#e4e4e4" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d2d1d1" + SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#6c6a69" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#6c6a69" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = "#828180" + SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = "#828180" + SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = "#f0f0f0" + SD_SAGE_COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = "#343332" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = "#085c37" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = "#052e1c" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = "#d3f8df" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = "#73e2a3" + SD_SAGE_COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = "#079250" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = "#085c37" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = "#079250" + SD_SAGE_COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = "#079250" SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = "#23856d" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#054fb8" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#07265f" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#e6f4fe" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#8ecafb" - SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#0072ef" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#054fb8" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#0072ef" - SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#8ecafb" - SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#e6f4fe" - SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#0072ef" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#50348a" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = "#381c5e" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = "#eee4f6" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = "#d9c2ef" - SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = "#50348a" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = "#d9c2ef" - SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = "#eee4f6" - SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = "#8e5ad8" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = "#8c3b08" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = "#fef8e1" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = "#fad980" - SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = "#c56a02" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = "#ffc505" - SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = "#ffc505" + SD_SAGE_COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = "#079250" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#1c4ed8" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#172554" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#dbe9fe" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#2463eb" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#1c4ed8" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#2463eb" + SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#92c5fd" + SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#dbe9fe" + SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#2463eb" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#402fa4" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = "#221b4b" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = "#e0e4ff" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = "#a3acfd" + SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = "#533be5" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = "#402fa4" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = "#533be5" + SD_SAGE_COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = "#a3acfd" + SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = "#e0e4ff" + SD_SAGE_COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = "#533be5" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = "#451902" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = "#fff3c6" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = "#fed04b" + SD_SAGE_COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = "#db7303" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = "#fdbb21" + SD_SAGE_COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = "#fdbb21" SD_SAGE_COLOR_COMBOS_WARNING_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_WARNING_BOLD_BACKGROUND = "#ffc505" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = "#99221e" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = "#5e0d0d" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = "#fff0f0" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = "#cf3c32" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = "#99221e" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = "#fdb0aa" - SD_SAGE_COLOR_COMBOS_DANGER_BOLD_FOREGROUND = "#fff0f0" - SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fdb0aa" + SD_SAGE_COLOR_COMBOS_WARNING_BOLD_BACKGROUND = "#fdbb21" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = "#991b1b" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = "#572627" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = "#fee2e1" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = "#ef4444" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = "#991b1b" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = "#fda5a5" + SD_SAGE_COLOR_COMBOS_DANGER_BOLD_FOREGROUND = "#fee2e1" + SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fda5a5" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#92c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = "#fff" SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#92c5fd" SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = "#fff" - SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#8ecafb" + SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#92c5fd" # # Map for COLOR COMBOS @@ -661,14 +1339,17 @@ module SageDictionary # # Static vars for COLOR CORE # - SD_SAGE_COLOR_CORE_PRIMARY = "#0072ef" - SD_SAGE_COLOR_CORE_SAGE = "#23856d" - SD_SAGE_COLOR_CORE_YELLOW = "#ffc505" - SD_SAGE_COLOR_CORE_RED = "#cf3c32" - SD_SAGE_COLOR_CORE_ORANGE = "#fb7e09" - SD_SAGE_COLOR_CORE_PURPLE = "#8e5ad8" - SD_SAGE_COLOR_CORE_CHARCOAL = "#43474b" - SD_SAGE_COLOR_CORE_GREY = "#8d939a" + SD_SAGE_COLOR_CORE_BLUE = "#2463eb" + SD_SAGE_COLOR_CORE_GREEN = "#079250" + SD_SAGE_COLOR_CORE_MERCURY = "#ff3e15" + SD_SAGE_COLOR_CORE_PRIMARY = "#2463eb" + SD_SAGE_COLOR_CORE_SAGE = "#079250" + SD_SAGE_COLOR_CORE_YELLOW = "#fdbb21" + SD_SAGE_COLOR_CORE_RED = "#ef4444" + SD_SAGE_COLOR_CORE_ORANGE = "#ff3e15" + SD_SAGE_COLOR_CORE_PURPLE = "#533be5" + SD_SAGE_COLOR_CORE_CHARCOAL = "#4d4d4c" + SD_SAGE_COLOR_CORE_GREY = "#828180" SD_SAGE_COLOR_CORE_WHITE = "#fff" SD_SAGE_COLOR_CORE_BLACK = "#000" @@ -676,6 +1357,9 @@ module SageDictionary # Map for COLOR CORE # SD_SAGE_COLOR_CORE = { + "BLUE": SD_SAGE_COLOR_CORE_BLUE, + "GREEN": SD_SAGE_COLOR_CORE_GREEN, + "MERCURY": SD_SAGE_COLOR_CORE_MERCURY, "PRIMARY": SD_SAGE_COLOR_CORE_PRIMARY, "SAGE": SD_SAGE_COLOR_CORE_SAGE, "YELLOW": SD_SAGE_COLOR_CORE_YELLOW, diff --git a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss index 71969d650d..bc67b9446f 100644 --- a/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss +++ b/packages/sage-assets/lib/stylesheets/components/_card_highlight.scss @@ -54,7 +54,18 @@ $-card-highlight-size: rem(12px); @each $-color-name, $-color-sliders in $sage-colors { .sage-card-highlight--#{"" + $-color-name} { - --color: #{sage-color($-color-name, 300)}; + @if ($-color-name == blue) { + --color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --color: #{sage-color($-color-name, 50)}; + } + @else { + --color: #{sage-color($-color-name, 300)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_dot.scss b/packages/sage-assets/lib/stylesheets/components/_dot.scss index fcc0eade96..c065fdc97c 100644 --- a/packages/sage-assets/lib/stylesheets/components/_dot.scss +++ b/packages/sage-assets/lib/stylesheets/components/_dot.scss @@ -42,6 +42,17 @@ $-sage-dot-size--badge: rem(6px); @each $-color-name, $-color-sliders in $sage-colors { .sage-dot--color-#{"" + $-color-name} { - --sage-dot-color: #{sage-color($-color-name)}; + @if ($-color-name == blue) { + --sage-dot-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --sage-dot-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --sage-dot-color: #{sage-color($-color-name, 50)}; + } + @else { + --sage-dot-color: #{sage-color($-color-name)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss index 9b32dfc981..0ef5c46ac2 100644 --- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss +++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss @@ -94,7 +94,18 @@ $-stat-box-image-max-width: rem(48px); @each $-color-name, $-color-sliders in $sage-colors { .sage-stat-box__title--legend-#{"" + $-color-name} { - --legend-color: #{sage-color($-color-name, 500)}; + @if ($-color-name == blue) { + --legend-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == green) { + --legend-color: #{sage-color($-color-name, 60)}; + } + @else if ($-color-name == mercury) { + --legend-color: #{sage-color($-color-name, 50)}; + } + @else { + --legend-color: #{sage-color($-color-name, 500)}; + } } } diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss index d863c9b042..1f2de1eadf 100644 --- a/packages/sage-assets/lib/stylesheets/core/_typography.scss +++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss @@ -209,14 +209,26 @@ body:not(.sage-excluded), // Generate text color modifiers @each $color-name, $color-slider in $sage-colors { - // Default color values - $color-value: sage-color($color-name); + $color-value: ""; - @if ($color-name == grey) { + @if ($color-name == blue) { + $color-value: sage-color($color-name, 60); + } + @else if ($color-name == green) { + $color-value: sage-color($color-name, 60); + } + @else if ($color-name == mercury) { + $color-value: sage-color($color-name, 50); + } + @else if ($color-name == grey) { $color-value: sage-color($color-name, 500); } - + @else { + // Default color values + $color-value: sage-color($color-name); + } .t-sage--color-#{"" + $color-name} { + color: $color-value; } diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index f630d3c5c8..8f5b4b5b52 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -22,189 +22,909 @@ // Static vars for color base // /// +/// color color-base-blue-5-hex +/// +$sd-sage-color-base-blue-5-hex: #fafcff; +/// +/// color color-base-blue-5-code +/// +$sd-sage-color-base-blue-5-code: "blue-5"; +/// +/// color color-base-blue-5-classname +/// +$sd-sage-color-base-blue-5-classname: "t-sage--color-blue-5"; +/// +/// color color-base-blue-10-hex +/// +$sd-sage-color-base-blue-10-hex: #eff6ff; +/// +/// color color-base-blue-10-code +/// +$sd-sage-color-base-blue-10-code: "blue-10"; +/// +/// color color-base-blue-10-classname +/// +$sd-sage-color-base-blue-10-classname: "t-sage--color-blue-10"; +/// +/// color color-base-blue-15-hex +/// +$sd-sage-color-base-blue-15-hex: #dbe9fe; +/// +/// color color-base-blue-15-code +/// +$sd-sage-color-base-blue-15-code: "blue-15"; +/// +/// color color-base-blue-15-classname +/// +$sd-sage-color-base-blue-15-classname: "t-sage--color-blue-15"; +/// +/// color color-base-blue-20-hex +/// +$sd-sage-color-base-blue-20-hex: #bfdbfe; +/// +/// color color-base-blue-20-code +/// +$sd-sage-color-base-blue-20-code: "blue-20"; +/// +/// color color-base-blue-20-classname +/// +$sd-sage-color-base-blue-20-classname: "t-sage--color-blue-20"; +/// +/// color color-base-blue-30-hex +/// +$sd-sage-color-base-blue-30-hex: #92c5fd; +/// +/// color color-base-blue-30-code +/// +$sd-sage-color-base-blue-30-code: "blue-30"; +/// +/// color color-base-blue-30-classname +/// +$sd-sage-color-base-blue-30-classname: "t-sage--color-blue-30"; +/// +/// color color-base-blue-40-hex +/// +$sd-sage-color-base-blue-40-hex: #60a5fa; +/// +/// color color-base-blue-40-code +/// +$sd-sage-color-base-blue-40-code: "blue-40"; +/// +/// color color-base-blue-40-classname +/// +$sd-sage-color-base-blue-40-classname: "t-sage--color-blue-40"; +/// +/// color color-base-blue-50-hex +/// +$sd-sage-color-base-blue-50-hex: #3c82f6; +/// +/// color color-base-blue-50-code +/// +$sd-sage-color-base-blue-50-code: "blue-50"; +/// +/// color color-base-blue-50-classname +/// +$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; +/// +/// color color-base-blue-60-hex +/// +$sd-sage-color-base-blue-60-hex: #2463eb; +/// +/// color color-base-blue-60-code +/// +$sd-sage-color-base-blue-60-code: "blue-60"; +/// +/// color color-base-blue-60-classname +/// +$sd-sage-color-base-blue-60-classname: "t-sage--color-blue-60"; +/// +/// color color-base-blue-70-hex +/// +$sd-sage-color-base-blue-70-hex: #1c4ed8; +/// +/// color color-base-blue-70-code +/// +$sd-sage-color-base-blue-70-code: "blue-70"; +/// +/// color color-base-blue-70-classname +/// +$sd-sage-color-base-blue-70-classname: "t-sage--color-blue-70"; +/// +/// color color-base-blue-80-hex +/// +$sd-sage-color-base-blue-80-hex: #1d40ae; +/// +/// color color-base-blue-80-code +/// +$sd-sage-color-base-blue-80-code: "blue-80"; +/// +/// color color-base-blue-80-classname +/// +$sd-sage-color-base-blue-80-classname: "t-sage--color-blue-80"; +/// +/// color color-base-blue-90-hex +/// +$sd-sage-color-base-blue-90-hex: #1f3a8a; +/// +/// color color-base-blue-90-code +/// +$sd-sage-color-base-blue-90-code: "blue-90"; +/// +/// color color-base-blue-90-classname +/// +$sd-sage-color-base-blue-90-classname: "t-sage--color-blue-90"; +/// +/// color color-base-blue-95-hex +/// +$sd-sage-color-base-blue-95-hex: #172554; +/// +/// color color-base-blue-95-code +/// +$sd-sage-color-base-blue-95-code: "blue-95"; +/// +/// color color-base-blue-95-classname +/// +$sd-sage-color-base-blue-95-classname: "t-sage--color-blue-95"; +/// +/// color color-base-green-5-hex +/// +$sd-sage-color-base-green-5-hex: #fbfefc; +/// +/// color color-base-green-5-code +/// +$sd-sage-color-base-green-5-code: "green-5"; +/// +/// color color-base-green-5-classname +/// +$sd-sage-color-base-green-5-classname: "t-sage--color-green-5"; +/// +/// color color-base-green-10-hex +/// +$sd-sage-color-base-green-10-hex: #edfcf2; +/// +/// color color-base-green-10-code +/// +$sd-sage-color-base-green-10-code: "green-10"; +/// +/// color color-base-green-10-classname +/// +$sd-sage-color-base-green-10-classname: "t-sage--color-green-10"; +/// +/// color color-base-green-15-hex +/// +$sd-sage-color-base-green-15-hex: #d3f8df; +/// +/// color color-base-green-15-code +/// +$sd-sage-color-base-green-15-code: "green-15"; +/// +/// color color-base-green-15-classname +/// +$sd-sage-color-base-green-15-classname: "t-sage--color-green-15"; +/// +/// color color-base-green-20-hex +/// +$sd-sage-color-base-green-20-hex: #aaf0c4; +/// +/// color color-base-green-20-code +/// +$sd-sage-color-base-green-20-code: "green-20"; +/// +/// color color-base-green-20-classname +/// +$sd-sage-color-base-green-20-classname: "t-sage--color-green-20"; +/// +/// color color-base-green-30-hex +/// +$sd-sage-color-base-green-30-hex: #73e2a3; +/// +/// color color-base-green-30-code +/// +$sd-sage-color-base-green-30-code: "green-30"; +/// +/// color color-base-green-30-classname +/// +$sd-sage-color-base-green-30-classname: "t-sage--color-green-30"; +/// +/// color color-base-green-40-hex +/// +$sd-sage-color-base-green-40-hex: #3dcb7f; +/// +/// color color-base-green-40-code +/// +$sd-sage-color-base-green-40-code: "green-40"; +/// +/// color color-base-green-40-classname +/// +$sd-sage-color-base-green-40-classname: "t-sage--color-green-40"; +/// +/// color color-base-green-50-hex +/// +$sd-sage-color-base-green-50-hex: #17b365; +/// +/// color color-base-green-50-code +/// +$sd-sage-color-base-green-50-code: "green-50"; +/// +/// color color-base-green-50-classname +/// +$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; +/// +/// color color-base-green-60-hex +/// +$sd-sage-color-base-green-60-hex: #079250; +/// +/// color color-base-green-60-code +/// +$sd-sage-color-base-green-60-code: "green-60"; +/// +/// color color-base-green-60-classname +/// +$sd-sage-color-base-green-60-classname: "t-sage--color-green-60"; +/// +/// color color-base-green-70-hex +/// +$sd-sage-color-base-green-70-hex: #097443; +/// +/// color color-base-green-70-code +/// +$sd-sage-color-base-green-70-code: "green-70"; +/// +/// color color-base-green-70-classname +/// +$sd-sage-color-base-green-70-classname: "t-sage--color-green-70"; +/// +/// color color-base-green-80-hex +/// +$sd-sage-color-base-green-80-hex: #085c37; +/// +/// color color-base-green-80-code +/// +$sd-sage-color-base-green-80-code: "green-80"; +/// +/// color color-base-green-80-classname +/// +$sd-sage-color-base-green-80-classname: "t-sage--color-green-80"; +/// +/// color color-base-green-90-hex +/// +$sd-sage-color-base-green-90-hex: #094c2f; +/// +/// color color-base-green-90-code +/// +$sd-sage-color-base-green-90-code: "green-90"; +/// +/// color color-base-green-90-classname +/// +$sd-sage-color-base-green-90-classname: "t-sage--color-green-90"; +/// +/// color color-base-green-95-hex +/// +$sd-sage-color-base-green-95-hex: #052e1c; +/// +/// color color-base-green-95-code +/// +$sd-sage-color-base-green-95-code: "green-95"; +/// +/// color color-base-green-95-classname +/// +$sd-sage-color-base-green-95-classname: "t-sage--color-green-95"; +/// +/// color color-base-mercury-5-hex +/// +$sd-sage-color-base-mercury-5-hex: #fffcfa; +/// +/// color color-base-mercury-5-code +/// +$sd-sage-color-base-mercury-5-code: "mercury-5"; +/// +/// color color-base-mercury-5-classname +/// +$sd-sage-color-base-mercury-5-classname: "t-sage--color-mercury-5"; +/// +/// color color-base-mercury-10-hex +/// +$sd-sage-color-base-mercury-10-hex: #fff3ed; +/// +/// color color-base-mercury-10-code +/// +$sd-sage-color-base-mercury-10-code: "mercury-10"; +/// +/// color color-base-mercury-10-classname +/// +$sd-sage-color-base-mercury-10-classname: "t-sage--color-mercury-10"; +/// +/// color color-base-mercury-15-hex +/// +$sd-sage-color-base-mercury-15-hex: #ffe3d4; +/// +/// color color-base-mercury-15-code +/// +$sd-sage-color-base-mercury-15-code: "mercury-15"; +/// +/// color color-base-mercury-15-classname +/// +$sd-sage-color-base-mercury-15-classname: "t-sage--color-mercury-15"; +/// +/// color color-base-mercury-20-hex +/// +$sd-sage-color-base-mercury-20-hex: #ffc3a8; +/// +/// color color-base-mercury-20-code +/// +$sd-sage-color-base-mercury-20-code: "mercury-20"; +/// +/// color color-base-mercury-20-classname +/// +$sd-sage-color-base-mercury-20-classname: "t-sage--color-mercury-20"; +/// +/// color color-base-mercury-30-hex +/// +$sd-sage-color-base-mercury-30-hex: #ff9970; +/// +/// color color-base-mercury-30-code +/// +$sd-sage-color-base-mercury-30-code: "mercury-30"; +/// +/// color color-base-mercury-30-classname +/// +$sd-sage-color-base-mercury-30-classname: "t-sage--color-mercury-30"; +/// +/// color color-base-mercury-40-hex +/// +$sd-sage-color-base-mercury-40-hex: #ff6337; +/// +/// color color-base-mercury-40-code +/// +$sd-sage-color-base-mercury-40-code: "mercury-40"; +/// +/// color color-base-mercury-40-classname +/// +$sd-sage-color-base-mercury-40-classname: "t-sage--color-mercury-40"; +/// +/// color color-base-mercury-50-hex +/// +$sd-sage-color-base-mercury-50-hex: #ff3e15; +/// +/// color color-base-mercury-50-code +/// +$sd-sage-color-base-mercury-50-code: "mercury-50"; +/// +/// color color-base-mercury-50-classname +/// +$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; +/// +/// color color-base-mercury-60-hex +/// +$sd-sage-color-base-mercury-60-hex: #f11f06; +/// +/// color color-base-mercury-60-code +/// +$sd-sage-color-base-mercury-60-code: "mercury-60"; +/// +/// color color-base-mercury-60-classname +/// +$sd-sage-color-base-mercury-60-classname: "t-sage--color-mercury-60"; +/// +/// color color-base-mercury-70-hex +/// +$sd-sage-color-base-mercury-70-hex: #c81307; +/// +/// color color-base-mercury-70-code +/// +$sd-sage-color-base-mercury-70-code: "mercury-70"; +/// +/// color color-base-mercury-70-classname +/// +$sd-sage-color-base-mercury-70-classname: "t-sage--color-mercury-70"; +/// +/// color color-base-mercury-80-hex +/// +$sd-sage-color-base-mercury-80-hex: #9e110e; +/// +/// color color-base-mercury-80-code +/// +$sd-sage-color-base-mercury-80-code: "mercury-80"; +/// +/// color color-base-mercury-80-classname +/// +$sd-sage-color-base-mercury-80-classname: "t-sage--color-mercury-80"; +/// +/// color color-base-mercury-90-hex +/// +$sd-sage-color-base-mercury-90-hex: #7f120f; +/// +/// color color-base-mercury-90-code +/// +$sd-sage-color-base-mercury-90-code: "mercury-90"; +/// +/// color color-base-mercury-90-classname +/// +$sd-sage-color-base-mercury-90-classname: "t-sage--color-mercury-90"; +/// +/// color color-base-mercury-95-hex +/// +$sd-sage-color-base-mercury-95-hex: #450506; +/// +/// color color-base-mercury-95-code +/// +$sd-sage-color-base-mercury-95-code: "mercury-95"; +/// +/// color color-base-mercury-95-classname +/// +$sd-sage-color-base-mercury-95-classname: "t-sage--color-mercury-95"; +/// /// color color-base-primary-100-hex /// -$sd-sage-color-base-primary-100-hex: #e6f4fe; +$sd-sage-color-base-primary-100-hex: #dbe9fe; +/// +/// color color-base-primary-100-code +/// +$sd-sage-color-base-primary-100-code: "primary-100"; +/// +/// color color-base-primary-100-classname +/// +$sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100"; +/// +/// color color-base-primary-200-hex +/// +$sd-sage-color-base-primary-200-hex: #92c5fd; +/// +/// color color-base-primary-200-code +/// +$sd-sage-color-base-primary-200-code: "primary-200"; +/// +/// color color-base-primary-200-classname +/// +$sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200"; +/// +/// color color-base-primary-300-hex +/// +$sd-sage-color-base-primary-300-hex: #2463eb; +/// +/// color color-base-primary-300-code +/// +$sd-sage-color-base-primary-300-code: "primary-300"; +/// +/// color color-base-primary-300-classname +/// +$sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300"; +/// +/// color color-base-primary-400-hex +/// +$sd-sage-color-base-primary-400-hex: #1c4ed8; +/// +/// color color-base-primary-400-code +/// +$sd-sage-color-base-primary-400-code: "primary-400"; +/// +/// color color-base-primary-400-classname +/// +$sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400"; +/// +/// color color-base-primary-500-hex +/// +$sd-sage-color-base-primary-500-hex: #172554; +/// +/// color color-base-primary-500-code +/// +$sd-sage-color-base-primary-500-code: "primary-500"; +/// +/// color color-base-primary-500-classname +/// +$sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500"; +/// +/// color color-base-sage-100-hex +/// +$sd-sage-color-base-sage-100-hex: #d3f8df; +/// +/// color color-base-sage-100-code +/// +$sd-sage-color-base-sage-100-code: "sage-100"; +/// +/// color color-base-sage-100-classname +/// +$sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100"; +/// +/// color color-base-sage-200-hex +/// +$sd-sage-color-base-sage-200-hex: #73e2a3; +/// +/// color color-base-sage-200-code +/// +$sd-sage-color-base-sage-200-code: "sage-200"; +/// +/// color color-base-sage-200-classname +/// +$sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200"; +/// +/// color color-base-sage-300-hex +/// +$sd-sage-color-base-sage-300-hex: #079250; +/// +/// color color-base-sage-300-code +/// +$sd-sage-color-base-sage-300-code: "sage-300"; +/// +/// color color-base-sage-300-classname +/// +$sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300"; +/// +/// color color-base-sage-400-hex +/// +$sd-sage-color-base-sage-400-hex: #085c37; +/// +/// color color-base-sage-400-code +/// +$sd-sage-color-base-sage-400-code: "sage-400"; +/// +/// color color-base-sage-400-classname +/// +$sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400"; +/// +/// color color-base-sage-500-hex +/// +$sd-sage-color-base-sage-500-hex: #052e1c; +/// +/// color color-base-sage-500-code +/// +$sd-sage-color-base-sage-500-code: "sage-500"; +/// +/// color color-base-sage-500-classname +/// +$sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; +/// +/// color color-base-yellow-5-hex +/// +$sd-sage-color-base-yellow-5-hex: #fffefa; +/// +/// color color-base-yellow-5-code +/// +$sd-sage-color-base-yellow-5-code: "yellow-5"; +/// +/// color color-base-yellow-5-classname +/// +$sd-sage-color-base-yellow-5-classname: "t-sage--color-yellow-5"; +/// +/// color color-base-yellow-10-hex +/// +$sd-sage-color-base-yellow-10-hex: #fffbeb; +/// +/// color color-base-yellow-10-code +/// +$sd-sage-color-base-yellow-10-code: "yellow-10"; +/// +/// color color-base-yellow-10-classname +/// +$sd-sage-color-base-yellow-10-classname: "t-sage--color-yellow-10"; +/// +/// color color-base-yellow-15-hex +/// +$sd-sage-color-base-yellow-15-hex: #fff3c6; +/// +/// color color-base-yellow-15-code +/// +$sd-sage-color-base-yellow-15-code: "yellow-15"; +/// +/// color color-base-yellow-15-classname +/// +$sd-sage-color-base-yellow-15-classname: "t-sage--color-yellow-15"; +/// +/// color color-base-yellow-20-hex +/// +$sd-sage-color-base-yellow-20-hex: #fee589; +/// +/// color color-base-yellow-20-code +/// +$sd-sage-color-base-yellow-20-code: "yellow-20"; +/// +/// color color-base-yellow-20-classname +/// +$sd-sage-color-base-yellow-20-classname: "t-sage--color-yellow-20"; +/// +/// color color-base-yellow-30-hex +/// +$sd-sage-color-base-yellow-30-hex: #fed04b; +/// +/// color color-base-yellow-30-code +/// +$sd-sage-color-base-yellow-30-code: "yellow-30"; +/// +/// color color-base-yellow-30-classname +/// +$sd-sage-color-base-yellow-30-classname: "t-sage--color-yellow-30"; +/// +/// color color-base-yellow-40-hex +/// +$sd-sage-color-base-yellow-40-hex: #fdbb21; +/// +/// color color-base-yellow-40-code +/// +$sd-sage-color-base-yellow-40-code: "yellow-40"; +/// +/// color color-base-yellow-40-classname +/// +$sd-sage-color-base-yellow-40-classname: "t-sage--color-yellow-40"; +/// +/// color color-base-yellow-50-hex +/// +$sd-sage-color-base-yellow-50-hex: #f79a0b; +/// +/// color color-base-yellow-50-code +/// +$sd-sage-color-base-yellow-50-code: "yellow-50"; +/// +/// color color-base-yellow-50-classname +/// +$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; +/// +/// color color-base-yellow-60-hex +/// +$sd-sage-color-base-yellow-60-hex: #db7303; +/// +/// color color-base-yellow-60-code +/// +$sd-sage-color-base-yellow-60-code: "yellow-60"; +/// +/// color color-base-yellow-60-classname +/// +$sd-sage-color-base-yellow-60-classname: "t-sage--color-yellow-60"; +/// +/// color color-base-yellow-70-hex +/// +$sd-sage-color-base-yellow-70-hex: #b64f06; +/// +/// color color-base-yellow-70-code +/// +$sd-sage-color-base-yellow-70-code: "yellow-70"; +/// +/// color color-base-yellow-70-classname +/// +$sd-sage-color-base-yellow-70-classname: "t-sage--color-yellow-70"; +/// +/// color color-base-yellow-80-hex +/// +$sd-sage-color-base-yellow-80-hex: #943d0e; +/// +/// color color-base-yellow-80-code +/// +$sd-sage-color-base-yellow-80-code: "yellow-80"; +/// +/// color color-base-yellow-80-classname +/// +$sd-sage-color-base-yellow-80-classname: "t-sage--color-yellow-80"; +/// +/// color color-base-yellow-90-hex +/// +$sd-sage-color-base-yellow-90-hex: #79330e; +/// +/// color color-base-yellow-90-code +/// +$sd-sage-color-base-yellow-90-code: "yellow-90"; +/// +/// color color-base-yellow-90-classname +/// +$sd-sage-color-base-yellow-90-classname: "t-sage--color-yellow-90"; +/// +/// color color-base-yellow-95-hex +/// +$sd-sage-color-base-yellow-95-hex: #451902; +/// +/// color color-base-yellow-95-code +/// +$sd-sage-color-base-yellow-95-code: "yellow-95"; +/// +/// color color-base-yellow-95-classname +/// +$sd-sage-color-base-yellow-95-classname: "t-sage--color-yellow-95"; +/// +/// color color-base-yellow-100-hex +/// +$sd-sage-color-base-yellow-100-hex: #fff3c6; +/// +/// color color-base-yellow-100-code +/// +$sd-sage-color-base-yellow-100-code: "yellow-100"; +/// +/// color color-base-yellow-100-classname +/// +$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; +/// +/// color color-base-yellow-200-hex +/// +$sd-sage-color-base-yellow-200-hex: #fed04b; /// -/// color color-base-primary-100-code +/// color color-base-yellow-200-code /// -$sd-sage-color-base-primary-100-code: "primary-100"; +$sd-sage-color-base-yellow-200-code: "yellow-200"; /// -/// color color-base-primary-100-classname +/// color color-base-yellow-200-classname /// -$sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100"; +$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; /// -/// color color-base-primary-200-hex +/// color color-base-yellow-300-hex /// -$sd-sage-color-base-primary-200-hex: #8ecafb; +$sd-sage-color-base-yellow-300-hex: #fdbb21; /// -/// color color-base-primary-200-code +/// color color-base-yellow-300-code /// -$sd-sage-color-base-primary-200-code: "primary-200"; +$sd-sage-color-base-yellow-300-code: "yellow-300"; /// -/// color color-base-primary-200-classname +/// color color-base-yellow-300-classname /// -$sd-sage-color-base-primary-200-classname: "t-sage--color-primary-200"; +$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; /// -/// color color-base-primary-300-hex +/// color color-base-yellow-400-hex /// -$sd-sage-color-base-primary-300-hex: #0072ef; +$sd-sage-color-base-yellow-400-hex: #db7303; /// -/// color color-base-primary-300-code +/// color color-base-yellow-400-code /// -$sd-sage-color-base-primary-300-code: "primary-300"; +$sd-sage-color-base-yellow-400-code: "yellow-400"; /// -/// color color-base-primary-300-classname +/// color color-base-yellow-400-classname /// -$sd-sage-color-base-primary-300-classname: "t-sage--color-primary-300"; +$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; /// -/// color color-base-primary-400-hex +/// color color-base-yellow-500-hex /// -$sd-sage-color-base-primary-400-hex: #054fb8; +$sd-sage-color-base-yellow-500-hex: #451902; /// -/// color color-base-primary-400-code +/// color color-base-yellow-500-code /// -$sd-sage-color-base-primary-400-code: "primary-400"; +$sd-sage-color-base-yellow-500-code: "yellow-500"; /// -/// color color-base-primary-400-classname +/// color color-base-yellow-500-classname /// -$sd-sage-color-base-primary-400-classname: "t-sage--color-primary-400"; +$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; /// -/// color color-base-primary-500-hex +/// color color-base-red-5-hex /// -$sd-sage-color-base-primary-500-hex: #07265f; +$sd-sage-color-base-red-5-hex: #fffafa; /// -/// color color-base-primary-500-code +/// color color-base-red-5-code /// -$sd-sage-color-base-primary-500-code: "primary-500"; +$sd-sage-color-base-red-5-code: "red-5"; /// -/// color color-base-primary-500-classname +/// color color-base-red-5-classname /// -$sd-sage-color-base-primary-500-classname: "t-sage--color-primary-500"; +$sd-sage-color-base-red-5-classname: "t-sage--color-red-5"; /// -/// color color-base-sage-100-hex +/// color color-base-red-10-hex /// -$sd-sage-color-base-sage-100-hex: #ddf8f0; +$sd-sage-color-base-red-10-hex: #fef2f2; /// -/// color color-base-sage-100-code +/// color color-base-red-10-code /// -$sd-sage-color-base-sage-100-code: "sage-100"; +$sd-sage-color-base-red-10-code: "red-10"; /// -/// color color-base-sage-100-classname +/// color color-base-red-10-classname /// -$sd-sage-color-base-sage-100-classname: "t-sage--color-sage-100"; +$sd-sage-color-base-red-10-classname: "t-sage--color-red-10"; /// -/// color color-base-sage-200-hex +/// color color-base-red-15-hex /// -$sd-sage-color-base-sage-200-hex: #86d5bc; +$sd-sage-color-base-red-15-hex: #fee2e1; /// -/// color color-base-sage-200-code +/// color color-base-red-15-code /// -$sd-sage-color-base-sage-200-code: "sage-200"; +$sd-sage-color-base-red-15-code: "red-15"; /// -/// color color-base-sage-200-classname +/// color color-base-red-15-classname /// -$sd-sage-color-base-sage-200-classname: "t-sage--color-sage-200"; +$sd-sage-color-base-red-15-classname: "t-sage--color-red-15"; /// -/// color color-base-sage-300-hex +/// color color-base-red-20-hex /// -$sd-sage-color-base-sage-300-hex: #23856d; +$sd-sage-color-base-red-20-hex: #fecaca; /// -/// color color-base-sage-300-code +/// color color-base-red-20-code /// -$sd-sage-color-base-sage-300-code: "sage-300"; +$sd-sage-color-base-red-20-code: "red-20"; /// -/// color color-base-sage-300-classname +/// color color-base-red-20-classname /// -$sd-sage-color-base-sage-300-classname: "t-sage--color-sage-300"; +$sd-sage-color-base-red-20-classname: "t-sage--color-red-20"; /// -/// color color-base-sage-400-hex +/// color color-base-red-30-hex /// -$sd-sage-color-base-sage-400-hex: #225d53; +$sd-sage-color-base-red-30-hex: #fda5a5; /// -/// color color-base-sage-400-code +/// color color-base-red-30-code /// -$sd-sage-color-base-sage-400-code: "sage-400"; +$sd-sage-color-base-red-30-code: "red-30"; /// -/// color color-base-sage-400-classname +/// color color-base-red-30-classname /// -$sd-sage-color-base-sage-400-classname: "t-sage--color-sage-400"; +$sd-sage-color-base-red-30-classname: "t-sage--color-red-30"; /// -/// color color-base-sage-500-hex +/// color color-base-red-40-hex /// -$sd-sage-color-base-sage-500-hex: #183e3b; +$sd-sage-color-base-red-40-hex: #f87171; /// -/// color color-base-sage-500-code +/// color color-base-red-40-code /// -$sd-sage-color-base-sage-500-code: "sage-500"; +$sd-sage-color-base-red-40-code: "red-40"; /// -/// color color-base-sage-500-classname +/// color color-base-red-40-classname /// -$sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; +$sd-sage-color-base-red-40-classname: "t-sage--color-red-40"; /// -/// color color-base-yellow-100-hex +/// color color-base-red-50-hex /// -$sd-sage-color-base-yellow-100-hex: #fef8e1; +$sd-sage-color-base-red-50-hex: #ef4444; /// -/// color color-base-yellow-100-code +/// color color-base-red-50-code /// -$sd-sage-color-base-yellow-100-code: "yellow-100"; +$sd-sage-color-base-red-50-code: "red-50"; /// -/// color color-base-yellow-100-classname +/// color color-base-red-50-classname /// -$sd-sage-color-base-yellow-100-classname: "t-sage--color-yellow-100"; +$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; /// -/// color color-base-yellow-200-hex +/// color color-base-red-60-hex /// -$sd-sage-color-base-yellow-200-hex: #fad980; +$sd-sage-color-base-red-60-hex: #dc2625; /// -/// color color-base-yellow-200-code +/// color color-base-red-60-code /// -$sd-sage-color-base-yellow-200-code: "yellow-200"; +$sd-sage-color-base-red-60-code: "red-60"; /// -/// color color-base-yellow-200-classname +/// color color-base-red-60-classname /// -$sd-sage-color-base-yellow-200-classname: "t-sage--color-yellow-200"; +$sd-sage-color-base-red-60-classname: "t-sage--color-red-60"; /// -/// color color-base-yellow-300-hex +/// color color-base-red-70-hex /// -$sd-sage-color-base-yellow-300-hex: #ffc505; +$sd-sage-color-base-red-70-hex: #b91c1b; /// -/// color color-base-yellow-300-code +/// color color-base-red-70-code /// -$sd-sage-color-base-yellow-300-code: "yellow-300"; +$sd-sage-color-base-red-70-code: "red-70"; /// -/// color color-base-yellow-300-classname +/// color color-base-red-70-classname /// -$sd-sage-color-base-yellow-300-classname: "t-sage--color-yellow-300"; +$sd-sage-color-base-red-70-classname: "t-sage--color-red-70"; /// -/// color color-base-yellow-400-hex +/// color color-base-red-80-hex /// -$sd-sage-color-base-yellow-400-hex: #c56a02; +$sd-sage-color-base-red-80-hex: #991b1b; /// -/// color color-base-yellow-400-code +/// color color-base-red-80-code /// -$sd-sage-color-base-yellow-400-code: "yellow-400"; +$sd-sage-color-base-red-80-code: "red-80"; /// -/// color color-base-yellow-400-classname +/// color color-base-red-80-classname /// -$sd-sage-color-base-yellow-400-classname: "t-sage--color-yellow-400"; +$sd-sage-color-base-red-80-classname: "t-sage--color-red-80"; /// -/// color color-base-yellow-500-hex +/// color color-base-red-90-hex /// -$sd-sage-color-base-yellow-500-hex: #8c3b08; +$sd-sage-color-base-red-90-hex: #7f1c1d; /// -/// color color-base-yellow-500-code +/// color color-base-red-90-code /// -$sd-sage-color-base-yellow-500-code: "yellow-500"; +$sd-sage-color-base-red-90-code: "red-90"; /// -/// color color-base-yellow-500-classname +/// color color-base-red-90-classname /// -$sd-sage-color-base-yellow-500-classname: "t-sage--color-yellow-500"; +$sd-sage-color-base-red-90-classname: "t-sage--color-red-90"; +/// +/// color color-base-red-95-hex +/// +$sd-sage-color-base-red-95-hex: #572627; +/// +/// color color-base-red-95-code +/// +$sd-sage-color-base-red-95-code: "red-95"; +/// +/// color color-base-red-95-classname +/// +$sd-sage-color-base-red-95-classname: "t-sage--color-red-95"; /// /// color color-base-red-100-hex /// -$sd-sage-color-base-red-100-hex: #fff0f0; +$sd-sage-color-base-red-100-hex: #fee2e1; /// /// color color-base-red-100-code /// @@ -216,7 +936,7 @@ $sd-sage-color-base-red-100-classname: "t-sage--color-red-100"; /// /// color color-base-red-200-hex /// -$sd-sage-color-base-red-200-hex: #fdb0aa; +$sd-sage-color-base-red-200-hex: #fda5a5; /// /// color color-base-red-200-code /// @@ -228,7 +948,7 @@ $sd-sage-color-base-red-200-classname: "t-sage--color-red-200"; /// /// color color-base-red-300-hex /// -$sd-sage-color-base-red-300-hex: #cf3c32; +$sd-sage-color-base-red-300-hex: #ef4444; /// /// color color-base-red-300-code /// @@ -240,7 +960,7 @@ $sd-sage-color-base-red-300-classname: "t-sage--color-red-300"; /// /// color color-base-red-400-hex /// -$sd-sage-color-base-red-400-hex: #99221e; +$sd-sage-color-base-red-400-hex: #991b1b; /// /// color color-base-red-400-code /// @@ -252,7 +972,7 @@ $sd-sage-color-base-red-400-classname: "t-sage--color-red-400"; /// /// color color-base-red-500-hex /// -$sd-sage-color-base-red-500-hex: #5e0d0d; +$sd-sage-color-base-red-500-hex: #572627; /// /// color color-base-red-500-code /// @@ -264,7 +984,7 @@ $sd-sage-color-base-red-500-classname: "t-sage--color-red-500"; /// /// color color-base-orange-100-hex /// -$sd-sage-color-base-orange-100-hex: #fef1e1; +$sd-sage-color-base-orange-100-hex: #ffe3d4; /// /// color color-base-orange-100-code /// @@ -276,7 +996,7 @@ $sd-sage-color-base-orange-100-classname: "t-sage--color-orange-100"; /// /// color color-base-orange-200-hex /// -$sd-sage-color-base-orange-200-hex: #ffb36b; +$sd-sage-color-base-orange-200-hex: #ff9970; /// /// color color-base-orange-200-code /// @@ -288,7 +1008,7 @@ $sd-sage-color-base-orange-200-classname: "t-sage--color-orange-200"; /// /// color color-base-orange-300-hex /// -$sd-sage-color-base-orange-300-hex: #fb7e09; +$sd-sage-color-base-orange-300-hex: #ff3e15; /// /// color color-base-orange-300-code /// @@ -300,7 +1020,7 @@ $sd-sage-color-base-orange-300-classname: "t-sage--color-orange-300"; /// /// color color-base-orange-400-hex /// -$sd-sage-color-base-orange-400-hex: #b3501e; +$sd-sage-color-base-orange-400-hex: #9e110e; /// /// color color-base-orange-400-code /// @@ -312,7 +1032,7 @@ $sd-sage-color-base-orange-400-classname: "t-sage--color-orange-400"; /// /// color color-base-orange-500-hex /// -$sd-sage-color-base-orange-500-hex: #5a260c; +$sd-sage-color-base-orange-500-hex: #450506; /// /// color color-base-orange-500-code /// @@ -322,9 +1042,153 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// +/// color color-base-purple-5-hex +/// +$sd-sage-color-base-purple-5-hex: #fafbff; +/// +/// color color-base-purple-5-code +/// +$sd-sage-color-base-purple-5-code: "purple-5"; +/// +/// color color-base-purple-5-classname +/// +$sd-sage-color-base-purple-5-classname: "t-sage--color-purple-5"; +/// +/// color color-base-purple-10-hex +/// +$sd-sage-color-base-purple-10-hex: #edf1ff; +/// +/// color color-base-purple-10-code +/// +$sd-sage-color-base-purple-10-code: "purple-10"; +/// +/// color color-base-purple-10-classname +/// +$sd-sage-color-base-purple-10-classname: "t-sage--color-purple-10"; +/// +/// color color-base-purple-15-hex +/// +$sd-sage-color-base-purple-15-hex: #e0e4ff; +/// +/// color color-base-purple-15-code +/// +$sd-sage-color-base-purple-15-code: "purple-15"; +/// +/// color color-base-purple-15-classname +/// +$sd-sage-color-base-purple-15-classname: "t-sage--color-purple-15"; +/// +/// color color-base-purple-20-hex +/// +$sd-sage-color-base-purple-20-hex: #c7cdfe; +/// +/// color color-base-purple-20-code +/// +$sd-sage-color-base-purple-20-code: "purple-20"; +/// +/// color color-base-purple-20-classname +/// +$sd-sage-color-base-purple-20-classname: "t-sage--color-purple-20"; +/// +/// color color-base-purple-30-hex +/// +$sd-sage-color-base-purple-30-hex: #a3acfd; +/// +/// color color-base-purple-30-code +/// +$sd-sage-color-base-purple-30-code: "purple-30"; +/// +/// color color-base-purple-30-classname +/// +$sd-sage-color-base-purple-30-classname: "t-sage--color-purple-30"; +/// +/// color color-base-purple-40-hex +/// +$sd-sage-color-base-purple-40-hex: #8081f9; +/// +/// color color-base-purple-40-code +/// +$sd-sage-color-base-purple-40-code: "purple-40"; +/// +/// color color-base-purple-40-classname +/// +$sd-sage-color-base-purple-40-classname: "t-sage--color-purple-40"; +/// +/// color color-base-purple-50-hex +/// +$sd-sage-color-base-purple-50-hex: #6a62f2; +/// +/// color color-base-purple-50-code +/// +$sd-sage-color-base-purple-50-code: "purple-50"; +/// +/// color color-base-purple-50-classname +/// +$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; +/// +/// color color-base-purple-60-hex +/// +$sd-sage-color-base-purple-60-hex: #533be5; +/// +/// color color-base-purple-60-code +/// +$sd-sage-color-base-purple-60-code: "purple-60"; +/// +/// color color-base-purple-60-classname +/// +$sd-sage-color-base-purple-60-classname: "t-sage--color-purple-60"; +/// +/// color color-base-purple-70-hex +/// +$sd-sage-color-base-purple-70-hex: #4f37cb; +/// +/// color color-base-purple-70-code +/// +$sd-sage-color-base-purple-70-code: "purple-70"; +/// +/// color color-base-purple-70-classname +/// +$sd-sage-color-base-purple-70-classname: "t-sage--color-purple-70"; +/// +/// color color-base-purple-80-hex +/// +$sd-sage-color-base-purple-80-hex: #402fa4; +/// +/// color color-base-purple-80-code +/// +$sd-sage-color-base-purple-80-code: "purple-80"; +/// +/// color color-base-purple-80-classname +/// +$sd-sage-color-base-purple-80-classname: "t-sage--color-purple-80"; +/// +/// color color-base-purple-90-hex +/// +$sd-sage-color-base-purple-90-hex: #372d82; +/// +/// color color-base-purple-90-code +/// +$sd-sage-color-base-purple-90-code: "purple-90"; +/// +/// color color-base-purple-90-classname +/// +$sd-sage-color-base-purple-90-classname: "t-sage--color-purple-90"; +/// +/// color color-base-purple-95-hex +/// +$sd-sage-color-base-purple-95-hex: #221b4b; +/// +/// color color-base-purple-95-code +/// +$sd-sage-color-base-purple-95-code: "purple-95"; +/// +/// color color-base-purple-95-classname +/// +$sd-sage-color-base-purple-95-classname: "t-sage--color-purple-95"; +/// /// color color-base-purple-100-hex /// -$sd-sage-color-base-purple-100-hex: #eee4f6; +$sd-sage-color-base-purple-100-hex: #e0e4ff; /// /// color color-base-purple-100-code /// @@ -336,7 +1200,7 @@ $sd-sage-color-base-purple-100-classname: "t-sage--color-purple-100"; /// /// color color-base-purple-200-hex /// -$sd-sage-color-base-purple-200-hex: #d9c2ef; +$sd-sage-color-base-purple-200-hex: #a3acfd; /// /// color color-base-purple-200-code /// @@ -348,7 +1212,7 @@ $sd-sage-color-base-purple-200-classname: "t-sage--color-purple-200"; /// /// color color-base-purple-300-hex /// -$sd-sage-color-base-purple-300-hex: #8e5ad8; +$sd-sage-color-base-purple-300-hex: #533be5; /// /// color color-base-purple-300-code /// @@ -360,7 +1224,7 @@ $sd-sage-color-base-purple-300-classname: "t-sage--color-purple-300"; /// /// color color-base-purple-400-hex /// -$sd-sage-color-base-purple-400-hex: #50348a; +$sd-sage-color-base-purple-400-hex: #402fa4; /// /// color color-base-purple-400-code /// @@ -372,7 +1236,7 @@ $sd-sage-color-base-purple-400-classname: "t-sage--color-purple-400"; /// /// color color-base-purple-500-hex /// -$sd-sage-color-base-purple-500-hex: #381c5e; +$sd-sage-color-base-purple-500-hex: #221b4b; /// /// color color-base-purple-500-code /// @@ -384,7 +1248,7 @@ $sd-sage-color-base-purple-500-classname: "t-sage--color-purple-500"; /// /// color color-base-charcoal-100-hex /// -$sd-sage-color-base-charcoal-100-hex: #8d939a; +$sd-sage-color-base-charcoal-100-hex: #828180; /// /// color color-base-charcoal-100-code /// @@ -396,7 +1260,7 @@ $sd-sage-color-base-charcoal-100-classname: "t-sage--color-charcoal-100"; /// /// color color-base-charcoal-200-hex /// -$sd-sage-color-base-charcoal-200-hex: #60666c; +$sd-sage-color-base-charcoal-200-hex: #6c6a69; /// /// color color-base-charcoal-200-code /// @@ -408,7 +1272,7 @@ $sd-sage-color-base-charcoal-200-classname: "t-sage--color-charcoal-200"; /// /// color color-base-charcoal-300-hex /// -$sd-sage-color-base-charcoal-300-hex: #43474b; +$sd-sage-color-base-charcoal-300-hex: #4d4d4c; /// /// color color-base-charcoal-300-code /// @@ -420,7 +1284,7 @@ $sd-sage-color-base-charcoal-300-classname: "t-sage--color-charcoal-300"; /// /// color color-base-charcoal-400-hex /// -$sd-sage-color-base-charcoal-400-hex: #202327; +$sd-sage-color-base-charcoal-400-hex: #343332; /// /// color color-base-charcoal-400-code /// @@ -432,7 +1296,7 @@ $sd-sage-color-base-charcoal-400-classname: "t-sage--color-charcoal-400"; /// /// color color-base-charcoal-500-hex /// -$sd-sage-color-base-charcoal-500-hex: #040506; +$sd-sage-color-base-charcoal-500-hex: #1a1a19; /// /// color color-base-charcoal-500-code /// @@ -442,9 +1306,153 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// +/// color color-base-grey-5-hex +/// +$sd-sage-color-base-grey-5-hex: #fcfcfc; +/// +/// color color-base-grey-5-code +/// +$sd-sage-color-base-grey-5-code: "grey-5"; +/// +/// color color-base-grey-5-classname +/// +$sd-sage-color-base-grey-5-classname: "t-sage--color-grey-5"; +/// +/// color color-base-grey-10-hex +/// +$sd-sage-color-base-grey-10-hex: #f8f8f8; +/// +/// color color-base-grey-10-code +/// +$sd-sage-color-base-grey-10-code: "grey-10"; +/// +/// color color-base-grey-10-classname +/// +$sd-sage-color-base-grey-10-classname: "t-sage--color-grey-10"; +/// +/// color color-base-grey-15-hex +/// +$sd-sage-color-base-grey-15-hex: #f0f0f0; +/// +/// color color-base-grey-15-code +/// +$sd-sage-color-base-grey-15-code: "grey-15"; +/// +/// color color-base-grey-15-classname +/// +$sd-sage-color-base-grey-15-classname: "t-sage--color-grey-15"; +/// +/// color color-base-grey-20-hex +/// +$sd-sage-color-base-grey-20-hex: #e4e4e4; +/// +/// color color-base-grey-20-code +/// +$sd-sage-color-base-grey-20-code: "grey-20"; +/// +/// color color-base-grey-20-classname +/// +$sd-sage-color-base-grey-20-classname: "t-sage--color-grey-20"; +/// +/// color color-base-grey-30-hex +/// +$sd-sage-color-base-grey-30-hex: #d2d1d1; +/// +/// color color-base-grey-30-code +/// +$sd-sage-color-base-grey-30-code: "grey-30"; +/// +/// color color-base-grey-30-classname +/// +$sd-sage-color-base-grey-30-classname: "t-sage--color-grey-30"; +/// +/// color color-base-grey-40-hex +/// +$sd-sage-color-base-grey-40-hex: #bbbab9; +/// +/// color color-base-grey-40-code +/// +$sd-sage-color-base-grey-40-code: "grey-40"; +/// +/// color color-base-grey-40-classname +/// +$sd-sage-color-base-grey-40-classname: "t-sage--color-grey-40"; +/// +/// color color-base-grey-50-hex +/// +$sd-sage-color-base-grey-50-hex: #9b9a98; +/// +/// color color-base-grey-50-code +/// +$sd-sage-color-base-grey-50-code: "grey-50"; +/// +/// color color-base-grey-50-classname +/// +$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; +/// +/// color color-base-grey-60-hex +/// +$sd-sage-color-base-grey-60-hex: #828180; +/// +/// color color-base-grey-60-code +/// +$sd-sage-color-base-grey-60-code: "grey-60"; +/// +/// color color-base-grey-60-classname +/// +$sd-sage-color-base-grey-60-classname: "t-sage--color-grey-60"; +/// +/// color color-base-grey-70-hex +/// +$sd-sage-color-base-grey-70-hex: #6c6a69; +/// +/// color color-base-grey-70-code +/// +$sd-sage-color-base-grey-70-code: "grey-70"; +/// +/// color color-base-grey-70-classname +/// +$sd-sage-color-base-grey-70-classname: "t-sage--color-grey-70"; +/// +/// color color-base-grey-80-hex +/// +$sd-sage-color-base-grey-80-hex: #4d4d4c; +/// +/// color color-base-grey-80-code +/// +$sd-sage-color-base-grey-80-code: "grey-80"; +/// +/// color color-base-grey-80-classname +/// +$sd-sage-color-base-grey-80-classname: "t-sage--color-grey-80"; +/// +/// color color-base-grey-90-hex +/// +$sd-sage-color-base-grey-90-hex: #343332; +/// +/// color color-base-grey-90-code +/// +$sd-sage-color-base-grey-90-code: "grey-90"; +/// +/// color color-base-grey-90-classname +/// +$sd-sage-color-base-grey-90-classname: "t-sage--color-grey-90"; +/// +/// color color-base-grey-95-hex +/// +$sd-sage-color-base-grey-95-hex: #1a1a19; +/// +/// color color-base-grey-95-code +/// +$sd-sage-color-base-grey-95-code: "grey-95"; +/// +/// color color-base-grey-95-classname +/// +$sd-sage-color-base-grey-95-classname: "t-sage--color-grey-95"; +/// /// color color-base-grey-100-hex /// -$sd-sage-color-base-grey-100-hex: #f9fafa; +$sd-sage-color-base-grey-100-hex: #f8f8f8; /// /// color color-base-grey-100-code /// @@ -456,7 +1464,7 @@ $sd-sage-color-base-grey-100-classname: "t-sage--color-grey-100"; /// /// color color-base-grey-200-hex /// -$sd-sage-color-base-grey-200-hex: #f6f8f8; +$sd-sage-color-base-grey-200-hex: #f0f0f0; /// /// color color-base-grey-200-code /// @@ -468,7 +1476,7 @@ $sd-sage-color-base-grey-200-classname: "t-sage--color-grey-200"; /// /// color color-base-grey-300-hex /// -$sd-sage-color-base-grey-300-hex: #eceeef; +$sd-sage-color-base-grey-300-hex: #e4e4e4; /// /// color color-base-grey-300-code /// @@ -480,7 +1488,7 @@ $sd-sage-color-base-grey-300-classname: "t-sage--color-grey-300"; /// /// color color-base-grey-400-hex /// -$sd-sage-color-base-grey-400-hex: #d3d5d9; +$sd-sage-color-base-grey-400-hex: #d2d1d1; /// /// color color-base-grey-400-code /// @@ -492,7 +1500,7 @@ $sd-sage-color-base-grey-400-classname: "t-sage--color-grey-400"; /// /// color color-base-grey-500-hex /// -$sd-sage-color-base-grey-500-hex: #b5bac0; +$sd-sage-color-base-grey-500-hex: #9b9a98; /// /// color color-base-grey-500-code /// @@ -626,6 +1634,192 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500"; /// Map for color base /// $sd-sage-color: ( + blue: ( + 5: ( + hex: $sd-sage-color-base-blue-5-hex, + code: $sd-sage-color-base-blue-5-code, + classname: $sd-sage-color-base-blue-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-blue-10-hex, + code: $sd-sage-color-base-blue-10-code, + classname: $sd-sage-color-base-blue-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-blue-15-hex, + code: $sd-sage-color-base-blue-15-code, + classname: $sd-sage-color-base-blue-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-blue-20-hex, + code: $sd-sage-color-base-blue-20-code, + classname: $sd-sage-color-base-blue-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-blue-30-hex, + code: $sd-sage-color-base-blue-30-code, + classname: $sd-sage-color-base-blue-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-blue-40-hex, + code: $sd-sage-color-base-blue-40-code, + classname: $sd-sage-color-base-blue-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-blue-50-hex, + code: $sd-sage-color-base-blue-50-code, + classname: $sd-sage-color-base-blue-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-blue-60-hex, + code: $sd-sage-color-base-blue-60-code, + classname: $sd-sage-color-base-blue-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-blue-70-hex, + code: $sd-sage-color-base-blue-70-code, + classname: $sd-sage-color-base-blue-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-blue-80-hex, + code: $sd-sage-color-base-blue-80-code, + classname: $sd-sage-color-base-blue-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-blue-90-hex, + code: $sd-sage-color-base-blue-90-code, + classname: $sd-sage-color-base-blue-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-blue-95-hex, + code: $sd-sage-color-base-blue-95-code, + classname: $sd-sage-color-base-blue-95-classname, + ), + ), + green: ( + 5: ( + hex: $sd-sage-color-base-green-5-hex, + code: $sd-sage-color-base-green-5-code, + classname: $sd-sage-color-base-green-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-green-10-hex, + code: $sd-sage-color-base-green-10-code, + classname: $sd-sage-color-base-green-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-green-15-hex, + code: $sd-sage-color-base-green-15-code, + classname: $sd-sage-color-base-green-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-green-20-hex, + code: $sd-sage-color-base-green-20-code, + classname: $sd-sage-color-base-green-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-green-30-hex, + code: $sd-sage-color-base-green-30-code, + classname: $sd-sage-color-base-green-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-green-40-hex, + code: $sd-sage-color-base-green-40-code, + classname: $sd-sage-color-base-green-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-green-50-hex, + code: $sd-sage-color-base-green-50-code, + classname: $sd-sage-color-base-green-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-green-60-hex, + code: $sd-sage-color-base-green-60-code, + classname: $sd-sage-color-base-green-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-green-70-hex, + code: $sd-sage-color-base-green-70-code, + classname: $sd-sage-color-base-green-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-green-80-hex, + code: $sd-sage-color-base-green-80-code, + classname: $sd-sage-color-base-green-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-green-90-hex, + code: $sd-sage-color-base-green-90-code, + classname: $sd-sage-color-base-green-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-green-95-hex, + code: $sd-sage-color-base-green-95-code, + classname: $sd-sage-color-base-green-95-classname, + ), + ), + mercury: ( + 5: ( + hex: $sd-sage-color-base-mercury-5-hex, + code: $sd-sage-color-base-mercury-5-code, + classname: $sd-sage-color-base-mercury-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-mercury-10-hex, + code: $sd-sage-color-base-mercury-10-code, + classname: $sd-sage-color-base-mercury-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-mercury-15-hex, + code: $sd-sage-color-base-mercury-15-code, + classname: $sd-sage-color-base-mercury-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-mercury-20-hex, + code: $sd-sage-color-base-mercury-20-code, + classname: $sd-sage-color-base-mercury-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-mercury-30-hex, + code: $sd-sage-color-base-mercury-30-code, + classname: $sd-sage-color-base-mercury-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-mercury-40-hex, + code: $sd-sage-color-base-mercury-40-code, + classname: $sd-sage-color-base-mercury-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-mercury-50-hex, + code: $sd-sage-color-base-mercury-50-code, + classname: $sd-sage-color-base-mercury-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-mercury-60-hex, + code: $sd-sage-color-base-mercury-60-code, + classname: $sd-sage-color-base-mercury-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-mercury-70-hex, + code: $sd-sage-color-base-mercury-70-code, + classname: $sd-sage-color-base-mercury-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-mercury-80-hex, + code: $sd-sage-color-base-mercury-80-code, + classname: $sd-sage-color-base-mercury-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-mercury-90-hex, + code: $sd-sage-color-base-mercury-90-code, + classname: $sd-sage-color-base-mercury-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-mercury-95-hex, + code: $sd-sage-color-base-mercury-95-code, + classname: $sd-sage-color-base-mercury-95-classname, + ), + ), primary: ( 100: ( hex: $sd-sage-color-base-primary-100-hex, @@ -681,6 +1875,66 @@ $sd-sage-color: ( ), ), yellow: ( + 5: ( + hex: $sd-sage-color-base-yellow-5-hex, + code: $sd-sage-color-base-yellow-5-code, + classname: $sd-sage-color-base-yellow-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-yellow-10-hex, + code: $sd-sage-color-base-yellow-10-code, + classname: $sd-sage-color-base-yellow-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-yellow-15-hex, + code: $sd-sage-color-base-yellow-15-code, + classname: $sd-sage-color-base-yellow-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-yellow-20-hex, + code: $sd-sage-color-base-yellow-20-code, + classname: $sd-sage-color-base-yellow-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-yellow-30-hex, + code: $sd-sage-color-base-yellow-30-code, + classname: $sd-sage-color-base-yellow-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-yellow-40-hex, + code: $sd-sage-color-base-yellow-40-code, + classname: $sd-sage-color-base-yellow-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-yellow-50-hex, + code: $sd-sage-color-base-yellow-50-code, + classname: $sd-sage-color-base-yellow-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-yellow-60-hex, + code: $sd-sage-color-base-yellow-60-code, + classname: $sd-sage-color-base-yellow-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-yellow-70-hex, + code: $sd-sage-color-base-yellow-70-code, + classname: $sd-sage-color-base-yellow-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-yellow-80-hex, + code: $sd-sage-color-base-yellow-80-code, + classname: $sd-sage-color-base-yellow-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-yellow-90-hex, + code: $sd-sage-color-base-yellow-90-code, + classname: $sd-sage-color-base-yellow-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-yellow-95-hex, + code: $sd-sage-color-base-yellow-95-code, + classname: $sd-sage-color-base-yellow-95-classname, + ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, @@ -708,6 +1962,66 @@ $sd-sage-color: ( ), ), red: ( + 5: ( + hex: $sd-sage-color-base-red-5-hex, + code: $sd-sage-color-base-red-5-code, + classname: $sd-sage-color-base-red-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-red-10-hex, + code: $sd-sage-color-base-red-10-code, + classname: $sd-sage-color-base-red-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-red-15-hex, + code: $sd-sage-color-base-red-15-code, + classname: $sd-sage-color-base-red-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-red-20-hex, + code: $sd-sage-color-base-red-20-code, + classname: $sd-sage-color-base-red-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-red-30-hex, + code: $sd-sage-color-base-red-30-code, + classname: $sd-sage-color-base-red-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-red-40-hex, + code: $sd-sage-color-base-red-40-code, + classname: $sd-sage-color-base-red-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-red-50-hex, + code: $sd-sage-color-base-red-50-code, + classname: $sd-sage-color-base-red-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-red-60-hex, + code: $sd-sage-color-base-red-60-code, + classname: $sd-sage-color-base-red-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-red-70-hex, + code: $sd-sage-color-base-red-70-code, + classname: $sd-sage-color-base-red-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-red-80-hex, + code: $sd-sage-color-base-red-80-code, + classname: $sd-sage-color-base-red-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-red-90-hex, + code: $sd-sage-color-base-red-90-code, + classname: $sd-sage-color-base-red-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-red-95-hex, + code: $sd-sage-color-base-red-95-code, + classname: $sd-sage-color-base-red-95-classname, + ), 100: ( hex: $sd-sage-color-base-red-100-hex, code: $sd-sage-color-base-red-100-code, @@ -762,6 +2076,66 @@ $sd-sage-color: ( ), ), purple: ( + 5: ( + hex: $sd-sage-color-base-purple-5-hex, + code: $sd-sage-color-base-purple-5-code, + classname: $sd-sage-color-base-purple-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-purple-10-hex, + code: $sd-sage-color-base-purple-10-code, + classname: $sd-sage-color-base-purple-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-purple-15-hex, + code: $sd-sage-color-base-purple-15-code, + classname: $sd-sage-color-base-purple-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-purple-20-hex, + code: $sd-sage-color-base-purple-20-code, + classname: $sd-sage-color-base-purple-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-purple-30-hex, + code: $sd-sage-color-base-purple-30-code, + classname: $sd-sage-color-base-purple-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-purple-40-hex, + code: $sd-sage-color-base-purple-40-code, + classname: $sd-sage-color-base-purple-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-purple-50-hex, + code: $sd-sage-color-base-purple-50-code, + classname: $sd-sage-color-base-purple-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-purple-60-hex, + code: $sd-sage-color-base-purple-60-code, + classname: $sd-sage-color-base-purple-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-purple-70-hex, + code: $sd-sage-color-base-purple-70-code, + classname: $sd-sage-color-base-purple-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-purple-80-hex, + code: $sd-sage-color-base-purple-80-code, + classname: $sd-sage-color-base-purple-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-purple-90-hex, + code: $sd-sage-color-base-purple-90-code, + classname: $sd-sage-color-base-purple-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-purple-95-hex, + code: $sd-sage-color-base-purple-95-code, + classname: $sd-sage-color-base-purple-95-classname, + ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, @@ -816,6 +2190,66 @@ $sd-sage-color: ( ), ), grey: ( + 5: ( + hex: $sd-sage-color-base-grey-5-hex, + code: $sd-sage-color-base-grey-5-code, + classname: $sd-sage-color-base-grey-5-classname, + ), + 10: ( + hex: $sd-sage-color-base-grey-10-hex, + code: $sd-sage-color-base-grey-10-code, + classname: $sd-sage-color-base-grey-10-classname, + ), + 15: ( + hex: $sd-sage-color-base-grey-15-hex, + code: $sd-sage-color-base-grey-15-code, + classname: $sd-sage-color-base-grey-15-classname, + ), + 20: ( + hex: $sd-sage-color-base-grey-20-hex, + code: $sd-sage-color-base-grey-20-code, + classname: $sd-sage-color-base-grey-20-classname, + ), + 30: ( + hex: $sd-sage-color-base-grey-30-hex, + code: $sd-sage-color-base-grey-30-code, + classname: $sd-sage-color-base-grey-30-classname, + ), + 40: ( + hex: $sd-sage-color-base-grey-40-hex, + code: $sd-sage-color-base-grey-40-code, + classname: $sd-sage-color-base-grey-40-classname, + ), + 50: ( + hex: $sd-sage-color-base-grey-50-hex, + code: $sd-sage-color-base-grey-50-code, + classname: $sd-sage-color-base-grey-50-classname, + ), + 60: ( + hex: $sd-sage-color-base-grey-60-hex, + code: $sd-sage-color-base-grey-60-code, + classname: $sd-sage-color-base-grey-60-classname, + ), + 70: ( + hex: $sd-sage-color-base-grey-70-hex, + code: $sd-sage-color-base-grey-70-code, + classname: $sd-sage-color-base-grey-70-classname, + ), + 80: ( + hex: $sd-sage-color-base-grey-80-hex, + code: $sd-sage-color-base-grey-80-code, + classname: $sd-sage-color-base-grey-80-classname, + ), + 90: ( + hex: $sd-sage-color-base-grey-90-hex, + code: $sd-sage-color-base-grey-90-code, + classname: $sd-sage-color-base-grey-90-classname, + ), + 95: ( + hex: $sd-sage-color-base-grey-95-hex, + code: $sd-sage-color-base-grey-95-code, + classname: $sd-sage-color-base-grey-95-classname, + ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, @@ -926,75 +2360,75 @@ $sd-sage-color: ( /// /// color combos color-combos-draft-default-foreground /// -$sd-sage-color-combos-draft-default-foreground: #202327; +$sd-sage-color-combos-draft-default-foreground: #343332; /// /// color combos color-combos-draft-default-foreground-accent /// -$sd-sage-color-combos-draft-default-foreground-accent: #040506; +$sd-sage-color-combos-draft-default-foreground-accent: #1a1a19; /// /// color combos color-combos-draft-default-background /// -$sd-sage-color-combos-draft-default-background: #eceeef; +$sd-sage-color-combos-draft-default-background: #e4e4e4; /// /// color combos color-combos-draft-default-background-accent /// -$sd-sage-color-combos-draft-default-background-accent: #d3d5d9; +$sd-sage-color-combos-draft-default-background-accent: #d2d1d1; /// /// color combos color-combos-draft-default-icon-background-accent /// -$sd-sage-color-combos-draft-default-icon-background-accent: #60666c; +$sd-sage-color-combos-draft-default-icon-background-accent: #6c6a69; /// /// color combos color-combos-draft-subtle-foreground /// -$sd-sage-color-combos-draft-subtle-foreground: #60666c; +$sd-sage-color-combos-draft-subtle-foreground: #6c6a69; /// /// color combos color-combos-draft-subtle-foreground-accent /// -$sd-sage-color-combos-draft-subtle-foreground-accent: #8d939a; +$sd-sage-color-combos-draft-subtle-foreground-accent: #828180; /// /// color combos color-combos-draft-subtle-background /// -$sd-sage-color-combos-draft-subtle-background: #8d939a; +$sd-sage-color-combos-draft-subtle-background: #828180; /// /// color combos color-combos-draft-bold-foreground /// -$sd-sage-color-combos-draft-bold-foreground: #f6f8f8; +$sd-sage-color-combos-draft-bold-foreground: #f0f0f0; /// /// color combos color-combos-draft-bold-background /// -$sd-sage-color-combos-draft-bold-background: #202327; +$sd-sage-color-combos-draft-bold-background: #343332; /// /// color combos color-combos-published-default-foreground /// -$sd-sage-color-combos-published-default-foreground: #225d53; +$sd-sage-color-combos-published-default-foreground: #085c37; /// /// color combos color-combos-published-default-foreground-accent /// -$sd-sage-color-combos-published-default-foreground-accent: #183e3b; +$sd-sage-color-combos-published-default-foreground-accent: #052e1c; /// /// color combos color-combos-published-default-background /// -$sd-sage-color-combos-published-default-background: #ddf8f0; +$sd-sage-color-combos-published-default-background: #d3f8df; /// /// color combos color-combos-published-default-background-accent /// -$sd-sage-color-combos-published-default-background-accent: #86d5bc; +$sd-sage-color-combos-published-default-background-accent: #73e2a3; /// /// color combos color-combos-published-default-icon-background-accent /// -$sd-sage-color-combos-published-default-icon-background-accent: #23856d; +$sd-sage-color-combos-published-default-icon-background-accent: #079250; /// /// color combos color-combos-published-subtle-foreground /// -$sd-sage-color-combos-published-subtle-foreground: #225d53; +$sd-sage-color-combos-published-subtle-foreground: #085c37; /// /// color combos color-combos-published-subtle-foreground-accent /// -$sd-sage-color-combos-published-subtle-foreground-accent: #23856d; +$sd-sage-color-combos-published-subtle-foreground-accent: #079250; /// /// color combos color-combos-published-subtle-background /// -$sd-sage-color-combos-published-subtle-background: #23856d; +$sd-sage-color-combos-published-subtle-background: #079250; /// /// color combos color-combos-published-bold-foreground /// @@ -1002,119 +2436,119 @@ $sd-sage-color-combos-published-bold-foreground: #fff; /// /// color combos color-combos-published-bold-background /// -$sd-sage-color-combos-published-bold-background: #23856d; +$sd-sage-color-combos-published-bold-background: #079250; /// /// color combos color-combos-info-default-foreground /// -$sd-sage-color-combos-info-default-foreground: #054fb8; +$sd-sage-color-combos-info-default-foreground: #1c4ed8; /// /// color combos color-combos-info-default-foreground-accent /// -$sd-sage-color-combos-info-default-foreground-accent: #07265f; +$sd-sage-color-combos-info-default-foreground-accent: #172554; /// /// color combos color-combos-info-default-background /// -$sd-sage-color-combos-info-default-background: #e6f4fe; +$sd-sage-color-combos-info-default-background: #dbe9fe; /// /// color combos color-combos-info-default-background-accent /// -$sd-sage-color-combos-info-default-background-accent: #8ecafb; +$sd-sage-color-combos-info-default-background-accent: #92c5fd; /// /// color combos color-combos-info-default-icon-background-accent /// -$sd-sage-color-combos-info-default-icon-background-accent: #0072ef; +$sd-sage-color-combos-info-default-icon-background-accent: #2463eb; /// /// color combos color-combos-info-subtle-foreground /// -$sd-sage-color-combos-info-subtle-foreground: #054fb8; +$sd-sage-color-combos-info-subtle-foreground: #1c4ed8; /// /// color combos color-combos-info-subtle-foreground-accent /// -$sd-sage-color-combos-info-subtle-foreground-accent: #0072ef; +$sd-sage-color-combos-info-subtle-foreground-accent: #2463eb; /// /// color combos color-combos-info-subtle-background /// -$sd-sage-color-combos-info-subtle-background: #8ecafb; +$sd-sage-color-combos-info-subtle-background: #92c5fd; /// /// color combos color-combos-info-bold-foreground /// -$sd-sage-color-combos-info-bold-foreground: #e6f4fe; +$sd-sage-color-combos-info-bold-foreground: #dbe9fe; /// /// color combos color-combos-info-bold-background /// -$sd-sage-color-combos-info-bold-background: #0072ef; +$sd-sage-color-combos-info-bold-background: #2463eb; /// /// color combos color-combos-locked-default-foreground /// -$sd-sage-color-combos-locked-default-foreground: #50348a; +$sd-sage-color-combos-locked-default-foreground: #402fa4; /// /// color combos color-combos-locked-default-foreground-accent /// -$sd-sage-color-combos-locked-default-foreground-accent: #381c5e; +$sd-sage-color-combos-locked-default-foreground-accent: #221b4b; /// /// color combos color-combos-locked-default-background /// -$sd-sage-color-combos-locked-default-background: #eee4f6; +$sd-sage-color-combos-locked-default-background: #e0e4ff; /// /// color combos color-combos-locked-default-background-accent /// -$sd-sage-color-combos-locked-default-background-accent: #d9c2ef; +$sd-sage-color-combos-locked-default-background-accent: #a3acfd; /// /// color combos color-combos-locked-default-icon-background-accent /// -$sd-sage-color-combos-locked-default-icon-background-accent: #8e5ad8; +$sd-sage-color-combos-locked-default-icon-background-accent: #533be5; /// /// color combos color-combos-locked-subtle-foreground /// -$sd-sage-color-combos-locked-subtle-foreground: #50348a; +$sd-sage-color-combos-locked-subtle-foreground: #402fa4; /// /// color combos color-combos-locked-subtle-foreground-accent /// -$sd-sage-color-combos-locked-subtle-foreground-accent: #8e5ad8; +$sd-sage-color-combos-locked-subtle-foreground-accent: #533be5; /// /// color combos color-combos-locked-subtle-background /// -$sd-sage-color-combos-locked-subtle-background: #d9c2ef; +$sd-sage-color-combos-locked-subtle-background: #a3acfd; /// /// color combos color-combos-locked-bold-foreground /// -$sd-sage-color-combos-locked-bold-foreground: #eee4f6; +$sd-sage-color-combos-locked-bold-foreground: #e0e4ff; /// /// color combos color-combos-locked-bold-background /// -$sd-sage-color-combos-locked-bold-background: #8e5ad8; +$sd-sage-color-combos-locked-bold-background: #533be5; /// /// color combos color-combos-warning-default-foreground /// -$sd-sage-color-combos-warning-default-foreground: #c56a02; +$sd-sage-color-combos-warning-default-foreground: #db7303; /// /// color combos color-combos-warning-default-foreground-accent /// -$sd-sage-color-combos-warning-default-foreground-accent: #8c3b08; +$sd-sage-color-combos-warning-default-foreground-accent: #451902; /// /// color combos color-combos-warning-default-background /// -$sd-sage-color-combos-warning-default-background: #fef8e1; +$sd-sage-color-combos-warning-default-background: #fff3c6; /// /// color combos color-combos-warning-default-background-accent /// -$sd-sage-color-combos-warning-default-background-accent: #fad980; +$sd-sage-color-combos-warning-default-background-accent: #fed04b; /// /// color combos color-combos-warning-default-icon-background-accent /// -$sd-sage-color-combos-warning-default-icon-background-accent: #c56a02; +$sd-sage-color-combos-warning-default-icon-background-accent: #db7303; /// /// color combos color-combos-warning-subtle-foreground /// -$sd-sage-color-combos-warning-subtle-foreground: #c56a02; +$sd-sage-color-combos-warning-subtle-foreground: #db7303; /// /// color combos color-combos-warning-subtle-foreground-accent /// -$sd-sage-color-combos-warning-subtle-foreground-accent: #ffc505; +$sd-sage-color-combos-warning-subtle-foreground-accent: #fdbb21; /// /// color combos color-combos-warning-subtle-background /// -$sd-sage-color-combos-warning-subtle-background: #ffc505; +$sd-sage-color-combos-warning-subtle-background: #fdbb21; /// /// color combos color-combos-warning-bold-foreground /// @@ -1122,47 +2556,47 @@ $sd-sage-color-combos-warning-bold-foreground: #fff; /// /// color combos color-combos-warning-bold-background /// -$sd-sage-color-combos-warning-bold-background: #ffc505; +$sd-sage-color-combos-warning-bold-background: #fdbb21; /// /// color combos color-combos-danger-default-foreground /// -$sd-sage-color-combos-danger-default-foreground: #99221e; +$sd-sage-color-combos-danger-default-foreground: #991b1b; /// /// color combos color-combos-danger-default-foreground-accent /// -$sd-sage-color-combos-danger-default-foreground-accent: #5e0d0d; +$sd-sage-color-combos-danger-default-foreground-accent: #572627; /// /// color combos color-combos-danger-default-background /// -$sd-sage-color-combos-danger-default-background: #fff0f0; +$sd-sage-color-combos-danger-default-background: #fee2e1; /// /// color combos color-combos-danger-default-background-accent /// -$sd-sage-color-combos-danger-default-background-accent: #fdb0aa; +$sd-sage-color-combos-danger-default-background-accent: #fda5a5; /// /// color combos color-combos-danger-default-icon-background-accent /// -$sd-sage-color-combos-danger-default-icon-background-accent: #cf3c32; +$sd-sage-color-combos-danger-default-icon-background-accent: #ef4444; /// /// color combos color-combos-danger-subtle-foreground /// -$sd-sage-color-combos-danger-subtle-foreground: #99221e; +$sd-sage-color-combos-danger-subtle-foreground: #991b1b; /// /// color combos color-combos-danger-subtle-foreground-accent /// -$sd-sage-color-combos-danger-subtle-foreground-accent: #fdb0aa; +$sd-sage-color-combos-danger-subtle-foreground-accent: #fda5a5; /// /// color combos color-combos-danger-subtle-background /// -$sd-sage-color-combos-danger-subtle-background: #fdb0aa; +$sd-sage-color-combos-danger-subtle-background: #fda5a5; /// /// color combos color-combos-danger-bold-foreground /// -$sd-sage-color-combos-danger-bold-foreground: #fff0f0; +$sd-sage-color-combos-danger-bold-foreground: #fee2e1; /// /// color combos color-combos-danger-bold-background /// -$sd-sage-color-combos-danger-bold-background: #fdb0aa; +$sd-sage-color-combos-danger-bold-background: #fda5a5; /// /// color combos color-combos-primary-default-foreground /// @@ -1174,7 +2608,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff; /// /// color combos color-combos-primary-default-background /// -$sd-sage-color-combos-primary-default-background: #8ecafb; +$sd-sage-color-combos-primary-default-background: #92c5fd; /// /// color combos color-combos-primary-subtle-foreground /// @@ -1186,7 +2620,7 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff; /// /// color combos color-combos-primary-subtle-background /// -$sd-sage-color-combos-primary-subtle-background: #8ecafb; +$sd-sage-color-combos-primary-subtle-background: #92c5fd; /// /// color combos color-combos-primary-bold-foreground /// @@ -1194,7 +2628,7 @@ $sd-sage-color-combos-primary-bold-foreground: #fff; /// /// color combos color-combos-primary-bold-background /// -$sd-sage-color-combos-primary-bold-background: #8ecafb; +$sd-sage-color-combos-primary-bold-background: #92c5fd; /// /// Map for color combos @@ -1352,37 +2786,49 @@ $sd-sage-color-combos: ( // Static vars for color core // /// +/// color core color-core-blue +/// +$sd-sage-color-core-blue: #2463eb; +/// +/// color core color-core-green +/// +$sd-sage-color-core-green: #079250; +/// +/// color core color-core-mercury +/// +$sd-sage-color-core-mercury: #ff3e15; +/// /// color core color-core-primary /// -$sd-sage-color-core-primary: #0072ef; +$sd-sage-color-core-primary: #2463eb; /// /// color core color-core-sage /// -$sd-sage-color-core-sage: #23856d; +$sd-sage-color-core-sage: #079250; /// /// color core color-core-yellow /// -$sd-sage-color-core-yellow: #ffc505; +$sd-sage-color-core-yellow: #fdbb21; /// /// color core color-core-red /// -$sd-sage-color-core-red: #cf3c32; +$sd-sage-color-core-red: #ef4444; /// /// color core color-core-orange /// -$sd-sage-color-core-orange: #fb7e09; +$sd-sage-color-core-orange: #ff3e15; /// /// color core color-core-purple /// -$sd-sage-color-core-purple: #8e5ad8; +$sd-sage-color-core-purple: #533be5; /// /// color core color-core-charcoal /// -$sd-sage-color-core-charcoal: #43474b; +$sd-sage-color-core-charcoal: #4d4d4c; /// /// color core color-core-grey /// -$sd-sage-color-core-grey: #8d939a; +$sd-sage-color-core-grey: #828180; /// /// color core color-core-white /// @@ -1396,6 +2842,9 @@ $sd-sage-color-core-black: #000; /// Map for color core /// $sd-sage-color-core: ( + blue: $sd-sage-color-core-blue, + green: $sd-sage-color-core-green, + mercury: $sd-sage-color-core-mercury, primary: $sd-sage-color-core-primary, sage: $sd-sage-color-core-sage, yellow: $sd-sage-color-core-yellow, diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index e99148786c..fc6635ea4f 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -19,124 +19,376 @@ // // Static vars for COLOR BASE // -export const COLOR_BASE_PRIMARY_100_HEX = '#e6f4fe'; +export const COLOR_BASE_BLUE_5_HEX = '#fafcff'; +export const COLOR_BASE_BLUE_5_CODE = 'blue-5'; +export const COLOR_BASE_BLUE_5_CLASSNAME = 't-sage--color-blue-5'; +export const COLOR_BASE_BLUE_10_HEX = '#eff6ff'; +export const COLOR_BASE_BLUE_10_CODE = 'blue-10'; +export const COLOR_BASE_BLUE_10_CLASSNAME = 't-sage--color-blue-10'; +export const COLOR_BASE_BLUE_15_HEX = '#dbe9fe'; +export const COLOR_BASE_BLUE_15_CODE = 'blue-15'; +export const COLOR_BASE_BLUE_15_CLASSNAME = 't-sage--color-blue-15'; +export const COLOR_BASE_BLUE_20_HEX = '#bfdbfe'; +export const COLOR_BASE_BLUE_20_CODE = 'blue-20'; +export const COLOR_BASE_BLUE_20_CLASSNAME = 't-sage--color-blue-20'; +export const COLOR_BASE_BLUE_30_HEX = '#92c5fd'; +export const COLOR_BASE_BLUE_30_CODE = 'blue-30'; +export const COLOR_BASE_BLUE_30_CLASSNAME = 't-sage--color-blue-30'; +export const COLOR_BASE_BLUE_40_HEX = '#60a5fa'; +export const COLOR_BASE_BLUE_40_CODE = 'blue-40'; +export const COLOR_BASE_BLUE_40_CLASSNAME = 't-sage--color-blue-40'; +export const COLOR_BASE_BLUE_50_HEX = '#3c82f6'; +export const COLOR_BASE_BLUE_50_CODE = 'blue-50'; +export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50'; +export const COLOR_BASE_BLUE_60_HEX = '#2463eb'; +export const COLOR_BASE_BLUE_60_CODE = 'blue-60'; +export const COLOR_BASE_BLUE_60_CLASSNAME = 't-sage--color-blue-60'; +export const COLOR_BASE_BLUE_70_HEX = '#1c4ed8'; +export const COLOR_BASE_BLUE_70_CODE = 'blue-70'; +export const COLOR_BASE_BLUE_70_CLASSNAME = 't-sage--color-blue-70'; +export const COLOR_BASE_BLUE_80_HEX = '#1d40ae'; +export const COLOR_BASE_BLUE_80_CODE = 'blue-80'; +export const COLOR_BASE_BLUE_80_CLASSNAME = 't-sage--color-blue-80'; +export const COLOR_BASE_BLUE_90_HEX = '#1f3a8a'; +export const COLOR_BASE_BLUE_90_CODE = 'blue-90'; +export const COLOR_BASE_BLUE_90_CLASSNAME = 't-sage--color-blue-90'; +export const COLOR_BASE_BLUE_95_HEX = '#172554'; +export const COLOR_BASE_BLUE_95_CODE = 'blue-95'; +export const COLOR_BASE_BLUE_95_CLASSNAME = 't-sage--color-blue-95'; +export const COLOR_BASE_GREEN_5_HEX = '#fbfefc'; +export const COLOR_BASE_GREEN_5_CODE = 'green-5'; +export const COLOR_BASE_GREEN_5_CLASSNAME = 't-sage--color-green-5'; +export const COLOR_BASE_GREEN_10_HEX = '#edfcf2'; +export const COLOR_BASE_GREEN_10_CODE = 'green-10'; +export const COLOR_BASE_GREEN_10_CLASSNAME = 't-sage--color-green-10'; +export const COLOR_BASE_GREEN_15_HEX = '#d3f8df'; +export const COLOR_BASE_GREEN_15_CODE = 'green-15'; +export const COLOR_BASE_GREEN_15_CLASSNAME = 't-sage--color-green-15'; +export const COLOR_BASE_GREEN_20_HEX = '#aaf0c4'; +export const COLOR_BASE_GREEN_20_CODE = 'green-20'; +export const COLOR_BASE_GREEN_20_CLASSNAME = 't-sage--color-green-20'; +export const COLOR_BASE_GREEN_30_HEX = '#73e2a3'; +export const COLOR_BASE_GREEN_30_CODE = 'green-30'; +export const COLOR_BASE_GREEN_30_CLASSNAME = 't-sage--color-green-30'; +export const COLOR_BASE_GREEN_40_HEX = '#3dcb7f'; +export const COLOR_BASE_GREEN_40_CODE = 'green-40'; +export const COLOR_BASE_GREEN_40_CLASSNAME = 't-sage--color-green-40'; +export const COLOR_BASE_GREEN_50_HEX = '#17b365'; +export const COLOR_BASE_GREEN_50_CODE = 'green-50'; +export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; +export const COLOR_BASE_GREEN_60_HEX = '#079250'; +export const COLOR_BASE_GREEN_60_CODE = 'green-60'; +export const COLOR_BASE_GREEN_60_CLASSNAME = 't-sage--color-green-60'; +export const COLOR_BASE_GREEN_70_HEX = '#097443'; +export const COLOR_BASE_GREEN_70_CODE = 'green-70'; +export const COLOR_BASE_GREEN_70_CLASSNAME = 't-sage--color-green-70'; +export const COLOR_BASE_GREEN_80_HEX = '#085c37'; +export const COLOR_BASE_GREEN_80_CODE = 'green-80'; +export const COLOR_BASE_GREEN_80_CLASSNAME = 't-sage--color-green-80'; +export const COLOR_BASE_GREEN_90_HEX = '#094c2f'; +export const COLOR_BASE_GREEN_90_CODE = 'green-90'; +export const COLOR_BASE_GREEN_90_CLASSNAME = 't-sage--color-green-90'; +export const COLOR_BASE_GREEN_95_HEX = '#052e1c'; +export const COLOR_BASE_GREEN_95_CODE = 'green-95'; +export const COLOR_BASE_GREEN_95_CLASSNAME = 't-sage--color-green-95'; +export const COLOR_BASE_MERCURY_5_HEX = '#fffcfa'; +export const COLOR_BASE_MERCURY_5_CODE = 'mercury-5'; +export const COLOR_BASE_MERCURY_5_CLASSNAME = 't-sage--color-mercury-5'; +export const COLOR_BASE_MERCURY_10_HEX = '#fff3ed'; +export const COLOR_BASE_MERCURY_10_CODE = 'mercury-10'; +export const COLOR_BASE_MERCURY_10_CLASSNAME = 't-sage--color-mercury-10'; +export const COLOR_BASE_MERCURY_15_HEX = '#ffe3d4'; +export const COLOR_BASE_MERCURY_15_CODE = 'mercury-15'; +export const COLOR_BASE_MERCURY_15_CLASSNAME = 't-sage--color-mercury-15'; +export const COLOR_BASE_MERCURY_20_HEX = '#ffc3a8'; +export const COLOR_BASE_MERCURY_20_CODE = 'mercury-20'; +export const COLOR_BASE_MERCURY_20_CLASSNAME = 't-sage--color-mercury-20'; +export const COLOR_BASE_MERCURY_30_HEX = '#ff9970'; +export const COLOR_BASE_MERCURY_30_CODE = 'mercury-30'; +export const COLOR_BASE_MERCURY_30_CLASSNAME = 't-sage--color-mercury-30'; +export const COLOR_BASE_MERCURY_40_HEX = '#ff6337'; +export const COLOR_BASE_MERCURY_40_CODE = 'mercury-40'; +export const COLOR_BASE_MERCURY_40_CLASSNAME = 't-sage--color-mercury-40'; +export const COLOR_BASE_MERCURY_50_HEX = '#ff3e15'; +export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50'; +export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50'; +export const COLOR_BASE_MERCURY_60_HEX = '#f11f06'; +export const COLOR_BASE_MERCURY_60_CODE = 'mercury-60'; +export const COLOR_BASE_MERCURY_60_CLASSNAME = 't-sage--color-mercury-60'; +export const COLOR_BASE_MERCURY_70_HEX = '#c81307'; +export const COLOR_BASE_MERCURY_70_CODE = 'mercury-70'; +export const COLOR_BASE_MERCURY_70_CLASSNAME = 't-sage--color-mercury-70'; +export const COLOR_BASE_MERCURY_80_HEX = '#9e110e'; +export const COLOR_BASE_MERCURY_80_CODE = 'mercury-80'; +export const COLOR_BASE_MERCURY_80_CLASSNAME = 't-sage--color-mercury-80'; +export const COLOR_BASE_MERCURY_90_HEX = '#7f120f'; +export const COLOR_BASE_MERCURY_90_CODE = 'mercury-90'; +export const COLOR_BASE_MERCURY_90_CLASSNAME = 't-sage--color-mercury-90'; +export const COLOR_BASE_MERCURY_95_HEX = '#450506'; +export const COLOR_BASE_MERCURY_95_CODE = 'mercury-95'; +export const COLOR_BASE_MERCURY_95_CLASSNAME = 't-sage--color-mercury-95'; +export const COLOR_BASE_PRIMARY_100_HEX = '#dbe9fe'; export const COLOR_BASE_PRIMARY_100_CODE = 'primary-100'; export const COLOR_BASE_PRIMARY_100_CLASSNAME = 't-sage--color-primary-100'; -export const COLOR_BASE_PRIMARY_200_HEX = '#8ecafb'; +export const COLOR_BASE_PRIMARY_200_HEX = '#92c5fd'; export const COLOR_BASE_PRIMARY_200_CODE = 'primary-200'; export const COLOR_BASE_PRIMARY_200_CLASSNAME = 't-sage--color-primary-200'; -export const COLOR_BASE_PRIMARY_300_HEX = '#0072ef'; +export const COLOR_BASE_PRIMARY_300_HEX = '#2463eb'; export const COLOR_BASE_PRIMARY_300_CODE = 'primary-300'; export const COLOR_BASE_PRIMARY_300_CLASSNAME = 't-sage--color-primary-300'; -export const COLOR_BASE_PRIMARY_400_HEX = '#054fb8'; +export const COLOR_BASE_PRIMARY_400_HEX = '#1c4ed8'; export const COLOR_BASE_PRIMARY_400_CODE = 'primary-400'; export const COLOR_BASE_PRIMARY_400_CLASSNAME = 't-sage--color-primary-400'; -export const COLOR_BASE_PRIMARY_500_HEX = '#07265f'; +export const COLOR_BASE_PRIMARY_500_HEX = '#172554'; export const COLOR_BASE_PRIMARY_500_CODE = 'primary-500'; export const COLOR_BASE_PRIMARY_500_CLASSNAME = 't-sage--color-primary-500'; -export const COLOR_BASE_SAGE_100_HEX = '#ddf8f0'; +export const COLOR_BASE_SAGE_100_HEX = '#d3f8df'; export const COLOR_BASE_SAGE_100_CODE = 'sage-100'; export const COLOR_BASE_SAGE_100_CLASSNAME = 't-sage--color-sage-100'; -export const COLOR_BASE_SAGE_200_HEX = '#86d5bc'; +export const COLOR_BASE_SAGE_200_HEX = '#73e2a3'; export const COLOR_BASE_SAGE_200_CODE = 'sage-200'; export const COLOR_BASE_SAGE_200_CLASSNAME = 't-sage--color-sage-200'; -export const COLOR_BASE_SAGE_300_HEX = '#23856d'; +export const COLOR_BASE_SAGE_300_HEX = '#079250'; export const COLOR_BASE_SAGE_300_CODE = 'sage-300'; export const COLOR_BASE_SAGE_300_CLASSNAME = 't-sage--color-sage-300'; -export const COLOR_BASE_SAGE_400_HEX = '#225d53'; +export const COLOR_BASE_SAGE_400_HEX = '#085c37'; export const COLOR_BASE_SAGE_400_CODE = 'sage-400'; export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400'; -export const COLOR_BASE_SAGE_500_HEX = '#183e3b'; +export const COLOR_BASE_SAGE_500_HEX = '#052e1c'; export const COLOR_BASE_SAGE_500_CODE = 'sage-500'; export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500'; -export const COLOR_BASE_YELLOW_100_HEX = '#fef8e1'; +export const COLOR_BASE_YELLOW_5_HEX = '#fffefa'; +export const COLOR_BASE_YELLOW_5_CODE = 'yellow-5'; +export const COLOR_BASE_YELLOW_5_CLASSNAME = 't-sage--color-yellow-5'; +export const COLOR_BASE_YELLOW_10_HEX = '#fffbeb'; +export const COLOR_BASE_YELLOW_10_CODE = 'yellow-10'; +export const COLOR_BASE_YELLOW_10_CLASSNAME = 't-sage--color-yellow-10'; +export const COLOR_BASE_YELLOW_15_HEX = '#fff3c6'; +export const COLOR_BASE_YELLOW_15_CODE = 'yellow-15'; +export const COLOR_BASE_YELLOW_15_CLASSNAME = 't-sage--color-yellow-15'; +export const COLOR_BASE_YELLOW_20_HEX = '#fee589'; +export const COLOR_BASE_YELLOW_20_CODE = 'yellow-20'; +export const COLOR_BASE_YELLOW_20_CLASSNAME = 't-sage--color-yellow-20'; +export const COLOR_BASE_YELLOW_30_HEX = '#fed04b'; +export const COLOR_BASE_YELLOW_30_CODE = 'yellow-30'; +export const COLOR_BASE_YELLOW_30_CLASSNAME = 't-sage--color-yellow-30'; +export const COLOR_BASE_YELLOW_40_HEX = '#fdbb21'; +export const COLOR_BASE_YELLOW_40_CODE = 'yellow-40'; +export const COLOR_BASE_YELLOW_40_CLASSNAME = 't-sage--color-yellow-40'; +export const COLOR_BASE_YELLOW_50_HEX = '#f79a0b'; +export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50'; +export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50'; +export const COLOR_BASE_YELLOW_60_HEX = '#db7303'; +export const COLOR_BASE_YELLOW_60_CODE = 'yellow-60'; +export const COLOR_BASE_YELLOW_60_CLASSNAME = 't-sage--color-yellow-60'; +export const COLOR_BASE_YELLOW_70_HEX = '#b64f06'; +export const COLOR_BASE_YELLOW_70_CODE = 'yellow-70'; +export const COLOR_BASE_YELLOW_70_CLASSNAME = 't-sage--color-yellow-70'; +export const COLOR_BASE_YELLOW_80_HEX = '#943d0e'; +export const COLOR_BASE_YELLOW_80_CODE = 'yellow-80'; +export const COLOR_BASE_YELLOW_80_CLASSNAME = 't-sage--color-yellow-80'; +export const COLOR_BASE_YELLOW_90_HEX = '#79330e'; +export const COLOR_BASE_YELLOW_90_CODE = 'yellow-90'; +export const COLOR_BASE_YELLOW_90_CLASSNAME = 't-sage--color-yellow-90'; +export const COLOR_BASE_YELLOW_95_HEX = '#451902'; +export const COLOR_BASE_YELLOW_95_CODE = 'yellow-95'; +export const COLOR_BASE_YELLOW_95_CLASSNAME = 't-sage--color-yellow-95'; +export const COLOR_BASE_YELLOW_100_HEX = '#fff3c6'; export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100'; export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100'; -export const COLOR_BASE_YELLOW_200_HEX = '#fad980'; +export const COLOR_BASE_YELLOW_200_HEX = '#fed04b'; export const COLOR_BASE_YELLOW_200_CODE = 'yellow-200'; export const COLOR_BASE_YELLOW_200_CLASSNAME = 't-sage--color-yellow-200'; -export const COLOR_BASE_YELLOW_300_HEX = '#ffc505'; +export const COLOR_BASE_YELLOW_300_HEX = '#fdbb21'; export const COLOR_BASE_YELLOW_300_CODE = 'yellow-300'; export const COLOR_BASE_YELLOW_300_CLASSNAME = 't-sage--color-yellow-300'; -export const COLOR_BASE_YELLOW_400_HEX = '#c56a02'; +export const COLOR_BASE_YELLOW_400_HEX = '#db7303'; export const COLOR_BASE_YELLOW_400_CODE = 'yellow-400'; export const COLOR_BASE_YELLOW_400_CLASSNAME = 't-sage--color-yellow-400'; -export const COLOR_BASE_YELLOW_500_HEX = '#8c3b08'; +export const COLOR_BASE_YELLOW_500_HEX = '#451902'; export const COLOR_BASE_YELLOW_500_CODE = 'yellow-500'; export const COLOR_BASE_YELLOW_500_CLASSNAME = 't-sage--color-yellow-500'; -export const COLOR_BASE_RED_100_HEX = '#fff0f0'; +export const COLOR_BASE_RED_5_HEX = '#fffafa'; +export const COLOR_BASE_RED_5_CODE = 'red-5'; +export const COLOR_BASE_RED_5_CLASSNAME = 't-sage--color-red-5'; +export const COLOR_BASE_RED_10_HEX = '#fef2f2'; +export const COLOR_BASE_RED_10_CODE = 'red-10'; +export const COLOR_BASE_RED_10_CLASSNAME = 't-sage--color-red-10'; +export const COLOR_BASE_RED_15_HEX = '#fee2e1'; +export const COLOR_BASE_RED_15_CODE = 'red-15'; +export const COLOR_BASE_RED_15_CLASSNAME = 't-sage--color-red-15'; +export const COLOR_BASE_RED_20_HEX = '#fecaca'; +export const COLOR_BASE_RED_20_CODE = 'red-20'; +export const COLOR_BASE_RED_20_CLASSNAME = 't-sage--color-red-20'; +export const COLOR_BASE_RED_30_HEX = '#fda5a5'; +export const COLOR_BASE_RED_30_CODE = 'red-30'; +export const COLOR_BASE_RED_30_CLASSNAME = 't-sage--color-red-30'; +export const COLOR_BASE_RED_40_HEX = '#f87171'; +export const COLOR_BASE_RED_40_CODE = 'red-40'; +export const COLOR_BASE_RED_40_CLASSNAME = 't-sage--color-red-40'; +export const COLOR_BASE_RED_50_HEX = '#ef4444'; +export const COLOR_BASE_RED_50_CODE = 'red-50'; +export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_RED_60_HEX = '#dc2625'; +export const COLOR_BASE_RED_60_CODE = 'red-60'; +export const COLOR_BASE_RED_60_CLASSNAME = 't-sage--color-red-60'; +export const COLOR_BASE_RED_70_HEX = '#b91c1b'; +export const COLOR_BASE_RED_70_CODE = 'red-70'; +export const COLOR_BASE_RED_70_CLASSNAME = 't-sage--color-red-70'; +export const COLOR_BASE_RED_80_HEX = '#991b1b'; +export const COLOR_BASE_RED_80_CODE = 'red-80'; +export const COLOR_BASE_RED_80_CLASSNAME = 't-sage--color-red-80'; +export const COLOR_BASE_RED_90_HEX = '#7f1c1d'; +export const COLOR_BASE_RED_90_CODE = 'red-90'; +export const COLOR_BASE_RED_90_CLASSNAME = 't-sage--color-red-90'; +export const COLOR_BASE_RED_95_HEX = '#572627'; +export const COLOR_BASE_RED_95_CODE = 'red-95'; +export const COLOR_BASE_RED_95_CLASSNAME = 't-sage--color-red-95'; +export const COLOR_BASE_RED_100_HEX = '#fee2e1'; export const COLOR_BASE_RED_100_CODE = 'red-100'; export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; -export const COLOR_BASE_RED_200_HEX = '#fdb0aa'; +export const COLOR_BASE_RED_200_HEX = '#fda5a5'; export const COLOR_BASE_RED_200_CODE = 'red-200'; export const COLOR_BASE_RED_200_CLASSNAME = 't-sage--color-red-200'; -export const COLOR_BASE_RED_300_HEX = '#cf3c32'; +export const COLOR_BASE_RED_300_HEX = '#ef4444'; export const COLOR_BASE_RED_300_CODE = 'red-300'; export const COLOR_BASE_RED_300_CLASSNAME = 't-sage--color-red-300'; -export const COLOR_BASE_RED_400_HEX = '#99221e'; +export const COLOR_BASE_RED_400_HEX = '#991b1b'; export const COLOR_BASE_RED_400_CODE = 'red-400'; export const COLOR_BASE_RED_400_CLASSNAME = 't-sage--color-red-400'; -export const COLOR_BASE_RED_500_HEX = '#5e0d0d'; +export const COLOR_BASE_RED_500_HEX = '#572627'; export const COLOR_BASE_RED_500_CODE = 'red-500'; export const COLOR_BASE_RED_500_CLASSNAME = 't-sage--color-red-500'; -export const COLOR_BASE_ORANGE_100_HEX = '#fef1e1'; +export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; -export const COLOR_BASE_ORANGE_200_HEX = '#ffb36b'; +export const COLOR_BASE_ORANGE_200_HEX = '#ff9970'; export const COLOR_BASE_ORANGE_200_CODE = 'orange-200'; export const COLOR_BASE_ORANGE_200_CLASSNAME = 't-sage--color-orange-200'; -export const COLOR_BASE_ORANGE_300_HEX = '#fb7e09'; +export const COLOR_BASE_ORANGE_300_HEX = '#ff3e15'; export const COLOR_BASE_ORANGE_300_CODE = 'orange-300'; export const COLOR_BASE_ORANGE_300_CLASSNAME = 't-sage--color-orange-300'; -export const COLOR_BASE_ORANGE_400_HEX = '#b3501e'; +export const COLOR_BASE_ORANGE_400_HEX = '#9e110e'; export const COLOR_BASE_ORANGE_400_CODE = 'orange-400'; export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400'; -export const COLOR_BASE_ORANGE_500_HEX = '#5a260c'; +export const COLOR_BASE_ORANGE_500_HEX = '#450506'; export const COLOR_BASE_ORANGE_500_CODE = 'orange-500'; export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500'; -export const COLOR_BASE_PURPLE_100_HEX = '#eee4f6'; +export const COLOR_BASE_PURPLE_5_HEX = '#fafbff'; +export const COLOR_BASE_PURPLE_5_CODE = 'purple-5'; +export const COLOR_BASE_PURPLE_5_CLASSNAME = 't-sage--color-purple-5'; +export const COLOR_BASE_PURPLE_10_HEX = '#edf1ff'; +export const COLOR_BASE_PURPLE_10_CODE = 'purple-10'; +export const COLOR_BASE_PURPLE_10_CLASSNAME = 't-sage--color-purple-10'; +export const COLOR_BASE_PURPLE_15_HEX = '#e0e4ff'; +export const COLOR_BASE_PURPLE_15_CODE = 'purple-15'; +export const COLOR_BASE_PURPLE_15_CLASSNAME = 't-sage--color-purple-15'; +export const COLOR_BASE_PURPLE_20_HEX = '#c7cdfe'; +export const COLOR_BASE_PURPLE_20_CODE = 'purple-20'; +export const COLOR_BASE_PURPLE_20_CLASSNAME = 't-sage--color-purple-20'; +export const COLOR_BASE_PURPLE_30_HEX = '#a3acfd'; +export const COLOR_BASE_PURPLE_30_CODE = 'purple-30'; +export const COLOR_BASE_PURPLE_30_CLASSNAME = 't-sage--color-purple-30'; +export const COLOR_BASE_PURPLE_40_HEX = '#8081f9'; +export const COLOR_BASE_PURPLE_40_CODE = 'purple-40'; +export const COLOR_BASE_PURPLE_40_CLASSNAME = 't-sage--color-purple-40'; +export const COLOR_BASE_PURPLE_50_HEX = '#6a62f2'; +export const COLOR_BASE_PURPLE_50_CODE = 'purple-50'; +export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50'; +export const COLOR_BASE_PURPLE_60_HEX = '#533be5'; +export const COLOR_BASE_PURPLE_60_CODE = 'purple-60'; +export const COLOR_BASE_PURPLE_60_CLASSNAME = 't-sage--color-purple-60'; +export const COLOR_BASE_PURPLE_70_HEX = '#4f37cb'; +export const COLOR_BASE_PURPLE_70_CODE = 'purple-70'; +export const COLOR_BASE_PURPLE_70_CLASSNAME = 't-sage--color-purple-70'; +export const COLOR_BASE_PURPLE_80_HEX = '#402fa4'; +export const COLOR_BASE_PURPLE_80_CODE = 'purple-80'; +export const COLOR_BASE_PURPLE_80_CLASSNAME = 't-sage--color-purple-80'; +export const COLOR_BASE_PURPLE_90_HEX = '#372d82'; +export const COLOR_BASE_PURPLE_90_CODE = 'purple-90'; +export const COLOR_BASE_PURPLE_90_CLASSNAME = 't-sage--color-purple-90'; +export const COLOR_BASE_PURPLE_95_HEX = '#221b4b'; +export const COLOR_BASE_PURPLE_95_CODE = 'purple-95'; +export const COLOR_BASE_PURPLE_95_CLASSNAME = 't-sage--color-purple-95'; +export const COLOR_BASE_PURPLE_100_HEX = '#e0e4ff'; export const COLOR_BASE_PURPLE_100_CODE = 'purple-100'; export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100'; -export const COLOR_BASE_PURPLE_200_HEX = '#d9c2ef'; +export const COLOR_BASE_PURPLE_200_HEX = '#a3acfd'; export const COLOR_BASE_PURPLE_200_CODE = 'purple-200'; export const COLOR_BASE_PURPLE_200_CLASSNAME = 't-sage--color-purple-200'; -export const COLOR_BASE_PURPLE_300_HEX = '#8e5ad8'; +export const COLOR_BASE_PURPLE_300_HEX = '#533be5'; export const COLOR_BASE_PURPLE_300_CODE = 'purple-300'; export const COLOR_BASE_PURPLE_300_CLASSNAME = 't-sage--color-purple-300'; -export const COLOR_BASE_PURPLE_400_HEX = '#50348a'; +export const COLOR_BASE_PURPLE_400_HEX = '#402fa4'; export const COLOR_BASE_PURPLE_400_CODE = 'purple-400'; export const COLOR_BASE_PURPLE_400_CLASSNAME = 't-sage--color-purple-400'; -export const COLOR_BASE_PURPLE_500_HEX = '#381c5e'; +export const COLOR_BASE_PURPLE_500_HEX = '#221b4b'; export const COLOR_BASE_PURPLE_500_CODE = 'purple-500'; export const COLOR_BASE_PURPLE_500_CLASSNAME = 't-sage--color-purple-500'; -export const COLOR_BASE_CHARCOAL_100_HEX = '#8d939a'; +export const COLOR_BASE_CHARCOAL_100_HEX = '#828180'; export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100'; export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100'; -export const COLOR_BASE_CHARCOAL_200_HEX = '#60666c'; +export const COLOR_BASE_CHARCOAL_200_HEX = '#6c6a69'; export const COLOR_BASE_CHARCOAL_200_CODE = 'charcoal-200'; export const COLOR_BASE_CHARCOAL_200_CLASSNAME = 't-sage--color-charcoal-200'; -export const COLOR_BASE_CHARCOAL_300_HEX = '#43474b'; +export const COLOR_BASE_CHARCOAL_300_HEX = '#4d4d4c'; export const COLOR_BASE_CHARCOAL_300_CODE = 'charcoal-300'; export const COLOR_BASE_CHARCOAL_300_CLASSNAME = 't-sage--color-charcoal-300'; -export const COLOR_BASE_CHARCOAL_400_HEX = '#202327'; +export const COLOR_BASE_CHARCOAL_400_HEX = '#343332'; export const COLOR_BASE_CHARCOAL_400_CODE = 'charcoal-400'; export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400'; -export const COLOR_BASE_CHARCOAL_500_HEX = '#040506'; +export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19'; export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500'; export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500'; -export const COLOR_BASE_GREY_100_HEX = '#f9fafa'; +export const COLOR_BASE_GREY_5_HEX = '#fcfcfc'; +export const COLOR_BASE_GREY_5_CODE = 'grey-5'; +export const COLOR_BASE_GREY_5_CLASSNAME = 't-sage--color-grey-5'; +export const COLOR_BASE_GREY_10_HEX = '#f8f8f8'; +export const COLOR_BASE_GREY_10_CODE = 'grey-10'; +export const COLOR_BASE_GREY_10_CLASSNAME = 't-sage--color-grey-10'; +export const COLOR_BASE_GREY_15_HEX = '#f0f0f0'; +export const COLOR_BASE_GREY_15_CODE = 'grey-15'; +export const COLOR_BASE_GREY_15_CLASSNAME = 't-sage--color-grey-15'; +export const COLOR_BASE_GREY_20_HEX = '#e4e4e4'; +export const COLOR_BASE_GREY_20_CODE = 'grey-20'; +export const COLOR_BASE_GREY_20_CLASSNAME = 't-sage--color-grey-20'; +export const COLOR_BASE_GREY_30_HEX = '#d2d1d1'; +export const COLOR_BASE_GREY_30_CODE = 'grey-30'; +export const COLOR_BASE_GREY_30_CLASSNAME = 't-sage--color-grey-30'; +export const COLOR_BASE_GREY_40_HEX = '#bbbab9'; +export const COLOR_BASE_GREY_40_CODE = 'grey-40'; +export const COLOR_BASE_GREY_40_CLASSNAME = 't-sage--color-grey-40'; +export const COLOR_BASE_GREY_50_HEX = '#9b9a98'; +export const COLOR_BASE_GREY_50_CODE = 'grey-50'; +export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50'; +export const COLOR_BASE_GREY_60_HEX = '#828180'; +export const COLOR_BASE_GREY_60_CODE = 'grey-60'; +export const COLOR_BASE_GREY_60_CLASSNAME = 't-sage--color-grey-60'; +export const COLOR_BASE_GREY_70_HEX = '#6c6a69'; +export const COLOR_BASE_GREY_70_CODE = 'grey-70'; +export const COLOR_BASE_GREY_70_CLASSNAME = 't-sage--color-grey-70'; +export const COLOR_BASE_GREY_80_HEX = '#4d4d4c'; +export const COLOR_BASE_GREY_80_CODE = 'grey-80'; +export const COLOR_BASE_GREY_80_CLASSNAME = 't-sage--color-grey-80'; +export const COLOR_BASE_GREY_90_HEX = '#343332'; +export const COLOR_BASE_GREY_90_CODE = 'grey-90'; +export const COLOR_BASE_GREY_90_CLASSNAME = 't-sage--color-grey-90'; +export const COLOR_BASE_GREY_95_HEX = '#1a1a19'; +export const COLOR_BASE_GREY_95_CODE = 'grey-95'; +export const COLOR_BASE_GREY_95_CLASSNAME = 't-sage--color-grey-95'; +export const COLOR_BASE_GREY_100_HEX = '#f8f8f8'; export const COLOR_BASE_GREY_100_CODE = 'grey-100'; export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100'; -export const COLOR_BASE_GREY_200_HEX = '#f6f8f8'; +export const COLOR_BASE_GREY_200_HEX = '#f0f0f0'; export const COLOR_BASE_GREY_200_CODE = 'grey-200'; export const COLOR_BASE_GREY_200_CLASSNAME = 't-sage--color-grey-200'; -export const COLOR_BASE_GREY_300_HEX = '#eceeef'; +export const COLOR_BASE_GREY_300_HEX = '#e4e4e4'; export const COLOR_BASE_GREY_300_CODE = 'grey-300'; export const COLOR_BASE_GREY_300_CLASSNAME = 't-sage--color-grey-300'; -export const COLOR_BASE_GREY_400_HEX = '#d3d5d9'; +export const COLOR_BASE_GREY_400_HEX = '#d2d1d1'; export const COLOR_BASE_GREY_400_CODE = 'grey-400'; export const COLOR_BASE_GREY_400_CLASSNAME = 't-sage--color-grey-400'; -export const COLOR_BASE_GREY_500_HEX = '#b5bac0'; +export const COLOR_BASE_GREY_500_HEX = '#9b9a98'; export const COLOR_BASE_GREY_500_CODE = 'grey-500'; export const COLOR_BASE_GREY_500_CLASSNAME = 't-sage--color-grey-500'; export const COLOR_BASE_WHITE_100_HEX = '#fff'; @@ -174,6 +426,192 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500'; // Map for COLOR BASE // export const COLOR = { + BLUE: { + 5: { + HEX: COLOR_BASE_BLUE_5_HEX, + CODE: COLOR_BASE_BLUE_5_CODE, + CLASSNAME: COLOR_BASE_BLUE_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_BLUE_10_HEX, + CODE: COLOR_BASE_BLUE_10_CODE, + CLASSNAME: COLOR_BASE_BLUE_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_BLUE_15_HEX, + CODE: COLOR_BASE_BLUE_15_CODE, + CLASSNAME: COLOR_BASE_BLUE_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_BLUE_20_HEX, + CODE: COLOR_BASE_BLUE_20_CODE, + CLASSNAME: COLOR_BASE_BLUE_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_BLUE_30_HEX, + CODE: COLOR_BASE_BLUE_30_CODE, + CLASSNAME: COLOR_BASE_BLUE_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_BLUE_40_HEX, + CODE: COLOR_BASE_BLUE_40_CODE, + CLASSNAME: COLOR_BASE_BLUE_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_BLUE_50_HEX, + CODE: COLOR_BASE_BLUE_50_CODE, + CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_BLUE_60_HEX, + CODE: COLOR_BASE_BLUE_60_CODE, + CLASSNAME: COLOR_BASE_BLUE_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_BLUE_70_HEX, + CODE: COLOR_BASE_BLUE_70_CODE, + CLASSNAME: COLOR_BASE_BLUE_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_BLUE_80_HEX, + CODE: COLOR_BASE_BLUE_80_CODE, + CLASSNAME: COLOR_BASE_BLUE_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_BLUE_90_HEX, + CODE: COLOR_BASE_BLUE_90_CODE, + CLASSNAME: COLOR_BASE_BLUE_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_BLUE_95_HEX, + CODE: COLOR_BASE_BLUE_95_CODE, + CLASSNAME: COLOR_BASE_BLUE_95_CLASSNAME, + }, + }, + GREEN: { + 5: { + HEX: COLOR_BASE_GREEN_5_HEX, + CODE: COLOR_BASE_GREEN_5_CODE, + CLASSNAME: COLOR_BASE_GREEN_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_GREEN_10_HEX, + CODE: COLOR_BASE_GREEN_10_CODE, + CLASSNAME: COLOR_BASE_GREEN_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_GREEN_15_HEX, + CODE: COLOR_BASE_GREEN_15_CODE, + CLASSNAME: COLOR_BASE_GREEN_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_GREEN_20_HEX, + CODE: COLOR_BASE_GREEN_20_CODE, + CLASSNAME: COLOR_BASE_GREEN_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_GREEN_30_HEX, + CODE: COLOR_BASE_GREEN_30_CODE, + CLASSNAME: COLOR_BASE_GREEN_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_GREEN_40_HEX, + CODE: COLOR_BASE_GREEN_40_CODE, + CLASSNAME: COLOR_BASE_GREEN_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_GREEN_50_HEX, + CODE: COLOR_BASE_GREEN_50_CODE, + CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_GREEN_60_HEX, + CODE: COLOR_BASE_GREEN_60_CODE, + CLASSNAME: COLOR_BASE_GREEN_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_GREEN_70_HEX, + CODE: COLOR_BASE_GREEN_70_CODE, + CLASSNAME: COLOR_BASE_GREEN_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_GREEN_80_HEX, + CODE: COLOR_BASE_GREEN_80_CODE, + CLASSNAME: COLOR_BASE_GREEN_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_GREEN_90_HEX, + CODE: COLOR_BASE_GREEN_90_CODE, + CLASSNAME: COLOR_BASE_GREEN_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_GREEN_95_HEX, + CODE: COLOR_BASE_GREEN_95_CODE, + CLASSNAME: COLOR_BASE_GREEN_95_CLASSNAME, + }, + }, + MERCURY: { + 5: { + HEX: COLOR_BASE_MERCURY_5_HEX, + CODE: COLOR_BASE_MERCURY_5_CODE, + CLASSNAME: COLOR_BASE_MERCURY_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_MERCURY_10_HEX, + CODE: COLOR_BASE_MERCURY_10_CODE, + CLASSNAME: COLOR_BASE_MERCURY_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_MERCURY_15_HEX, + CODE: COLOR_BASE_MERCURY_15_CODE, + CLASSNAME: COLOR_BASE_MERCURY_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_MERCURY_20_HEX, + CODE: COLOR_BASE_MERCURY_20_CODE, + CLASSNAME: COLOR_BASE_MERCURY_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_MERCURY_30_HEX, + CODE: COLOR_BASE_MERCURY_30_CODE, + CLASSNAME: COLOR_BASE_MERCURY_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_MERCURY_40_HEX, + CODE: COLOR_BASE_MERCURY_40_CODE, + CLASSNAME: COLOR_BASE_MERCURY_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_MERCURY_50_HEX, + CODE: COLOR_BASE_MERCURY_50_CODE, + CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_MERCURY_60_HEX, + CODE: COLOR_BASE_MERCURY_60_CODE, + CLASSNAME: COLOR_BASE_MERCURY_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_MERCURY_70_HEX, + CODE: COLOR_BASE_MERCURY_70_CODE, + CLASSNAME: COLOR_BASE_MERCURY_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_MERCURY_80_HEX, + CODE: COLOR_BASE_MERCURY_80_CODE, + CLASSNAME: COLOR_BASE_MERCURY_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_MERCURY_90_HEX, + CODE: COLOR_BASE_MERCURY_90_CODE, + CLASSNAME: COLOR_BASE_MERCURY_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_MERCURY_95_HEX, + CODE: COLOR_BASE_MERCURY_95_CODE, + CLASSNAME: COLOR_BASE_MERCURY_95_CLASSNAME, + }, + }, PRIMARY: { 100: { HEX: COLOR_BASE_PRIMARY_100_HEX, @@ -229,6 +667,66 @@ export const COLOR = { }, }, YELLOW: { + 5: { + HEX: COLOR_BASE_YELLOW_5_HEX, + CODE: COLOR_BASE_YELLOW_5_CODE, + CLASSNAME: COLOR_BASE_YELLOW_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_YELLOW_10_HEX, + CODE: COLOR_BASE_YELLOW_10_CODE, + CLASSNAME: COLOR_BASE_YELLOW_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_YELLOW_15_HEX, + CODE: COLOR_BASE_YELLOW_15_CODE, + CLASSNAME: COLOR_BASE_YELLOW_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_YELLOW_20_HEX, + CODE: COLOR_BASE_YELLOW_20_CODE, + CLASSNAME: COLOR_BASE_YELLOW_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_YELLOW_30_HEX, + CODE: COLOR_BASE_YELLOW_30_CODE, + CLASSNAME: COLOR_BASE_YELLOW_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_YELLOW_40_HEX, + CODE: COLOR_BASE_YELLOW_40_CODE, + CLASSNAME: COLOR_BASE_YELLOW_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_YELLOW_50_HEX, + CODE: COLOR_BASE_YELLOW_50_CODE, + CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_YELLOW_60_HEX, + CODE: COLOR_BASE_YELLOW_60_CODE, + CLASSNAME: COLOR_BASE_YELLOW_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_YELLOW_70_HEX, + CODE: COLOR_BASE_YELLOW_70_CODE, + CLASSNAME: COLOR_BASE_YELLOW_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_YELLOW_80_HEX, + CODE: COLOR_BASE_YELLOW_80_CODE, + CLASSNAME: COLOR_BASE_YELLOW_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_YELLOW_90_HEX, + CODE: COLOR_BASE_YELLOW_90_CODE, + CLASSNAME: COLOR_BASE_YELLOW_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_YELLOW_95_HEX, + CODE: COLOR_BASE_YELLOW_95_CODE, + CLASSNAME: COLOR_BASE_YELLOW_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, @@ -256,6 +754,66 @@ export const COLOR = { }, }, RED: { + 5: { + HEX: COLOR_BASE_RED_5_HEX, + CODE: COLOR_BASE_RED_5_CODE, + CLASSNAME: COLOR_BASE_RED_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_RED_10_HEX, + CODE: COLOR_BASE_RED_10_CODE, + CLASSNAME: COLOR_BASE_RED_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_RED_15_HEX, + CODE: COLOR_BASE_RED_15_CODE, + CLASSNAME: COLOR_BASE_RED_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_RED_20_HEX, + CODE: COLOR_BASE_RED_20_CODE, + CLASSNAME: COLOR_BASE_RED_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_RED_30_HEX, + CODE: COLOR_BASE_RED_30_CODE, + CLASSNAME: COLOR_BASE_RED_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_RED_40_HEX, + CODE: COLOR_BASE_RED_40_CODE, + CLASSNAME: COLOR_BASE_RED_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_RED_50_HEX, + CODE: COLOR_BASE_RED_50_CODE, + CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_RED_60_HEX, + CODE: COLOR_BASE_RED_60_CODE, + CLASSNAME: COLOR_BASE_RED_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_RED_70_HEX, + CODE: COLOR_BASE_RED_70_CODE, + CLASSNAME: COLOR_BASE_RED_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_RED_80_HEX, + CODE: COLOR_BASE_RED_80_CODE, + CLASSNAME: COLOR_BASE_RED_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_RED_90_HEX, + CODE: COLOR_BASE_RED_90_CODE, + CLASSNAME: COLOR_BASE_RED_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_RED_95_HEX, + CODE: COLOR_BASE_RED_95_CODE, + CLASSNAME: COLOR_BASE_RED_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_RED_100_HEX, CODE: COLOR_BASE_RED_100_CODE, @@ -310,6 +868,66 @@ export const COLOR = { }, }, PURPLE: { + 5: { + HEX: COLOR_BASE_PURPLE_5_HEX, + CODE: COLOR_BASE_PURPLE_5_CODE, + CLASSNAME: COLOR_BASE_PURPLE_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_PURPLE_10_HEX, + CODE: COLOR_BASE_PURPLE_10_CODE, + CLASSNAME: COLOR_BASE_PURPLE_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_PURPLE_15_HEX, + CODE: COLOR_BASE_PURPLE_15_CODE, + CLASSNAME: COLOR_BASE_PURPLE_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_PURPLE_20_HEX, + CODE: COLOR_BASE_PURPLE_20_CODE, + CLASSNAME: COLOR_BASE_PURPLE_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_PURPLE_30_HEX, + CODE: COLOR_BASE_PURPLE_30_CODE, + CLASSNAME: COLOR_BASE_PURPLE_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_PURPLE_40_HEX, + CODE: COLOR_BASE_PURPLE_40_CODE, + CLASSNAME: COLOR_BASE_PURPLE_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_PURPLE_50_HEX, + CODE: COLOR_BASE_PURPLE_50_CODE, + CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_PURPLE_60_HEX, + CODE: COLOR_BASE_PURPLE_60_CODE, + CLASSNAME: COLOR_BASE_PURPLE_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_PURPLE_70_HEX, + CODE: COLOR_BASE_PURPLE_70_CODE, + CLASSNAME: COLOR_BASE_PURPLE_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_PURPLE_80_HEX, + CODE: COLOR_BASE_PURPLE_80_CODE, + CLASSNAME: COLOR_BASE_PURPLE_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_PURPLE_90_HEX, + CODE: COLOR_BASE_PURPLE_90_CODE, + CLASSNAME: COLOR_BASE_PURPLE_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_PURPLE_95_HEX, + CODE: COLOR_BASE_PURPLE_95_CODE, + CLASSNAME: COLOR_BASE_PURPLE_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, @@ -364,6 +982,66 @@ export const COLOR = { }, }, GREY: { + 5: { + HEX: COLOR_BASE_GREY_5_HEX, + CODE: COLOR_BASE_GREY_5_CODE, + CLASSNAME: COLOR_BASE_GREY_5_CLASSNAME, + }, + 10: { + HEX: COLOR_BASE_GREY_10_HEX, + CODE: COLOR_BASE_GREY_10_CODE, + CLASSNAME: COLOR_BASE_GREY_10_CLASSNAME, + }, + 15: { + HEX: COLOR_BASE_GREY_15_HEX, + CODE: COLOR_BASE_GREY_15_CODE, + CLASSNAME: COLOR_BASE_GREY_15_CLASSNAME, + }, + 20: { + HEX: COLOR_BASE_GREY_20_HEX, + CODE: COLOR_BASE_GREY_20_CODE, + CLASSNAME: COLOR_BASE_GREY_20_CLASSNAME, + }, + 30: { + HEX: COLOR_BASE_GREY_30_HEX, + CODE: COLOR_BASE_GREY_30_CODE, + CLASSNAME: COLOR_BASE_GREY_30_CLASSNAME, + }, + 40: { + HEX: COLOR_BASE_GREY_40_HEX, + CODE: COLOR_BASE_GREY_40_CODE, + CLASSNAME: COLOR_BASE_GREY_40_CLASSNAME, + }, + 50: { + HEX: COLOR_BASE_GREY_50_HEX, + CODE: COLOR_BASE_GREY_50_CODE, + CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, + }, + 60: { + HEX: COLOR_BASE_GREY_60_HEX, + CODE: COLOR_BASE_GREY_60_CODE, + CLASSNAME: COLOR_BASE_GREY_60_CLASSNAME, + }, + 70: { + HEX: COLOR_BASE_GREY_70_HEX, + CODE: COLOR_BASE_GREY_70_CODE, + CLASSNAME: COLOR_BASE_GREY_70_CLASSNAME, + }, + 80: { + HEX: COLOR_BASE_GREY_80_HEX, + CODE: COLOR_BASE_GREY_80_CODE, + CLASSNAME: COLOR_BASE_GREY_80_CLASSNAME, + }, + 90: { + HEX: COLOR_BASE_GREY_90_HEX, + CODE: COLOR_BASE_GREY_90_CODE, + CLASSNAME: COLOR_BASE_GREY_90_CLASSNAME, + }, + 95: { + HEX: COLOR_BASE_GREY_95_HEX, + CODE: COLOR_BASE_GREY_95_CODE, + CLASSNAME: COLOR_BASE_GREY_95_CLASSNAME, + }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE, @@ -453,74 +1131,74 @@ export const COLOR = { // // Static vars for COLOR COMBOS // -export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = '#202327'; -export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = '#040506'; -export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#eceeef'; -export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = '#d3d5d9'; -export const COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = '#60666c'; -export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = '#60666c'; -export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = '#8d939a'; -export const COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = '#8d939a'; -export const COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = '#f6f8f8'; -export const COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = '#202327'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = '#225d53'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = '#183e3b'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = '#ddf8f0'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = '#86d5bc'; -export const COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = '#23856d'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = '#225d53'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = '#23856d'; -export const COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = '#23856d'; +export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = '#343332'; +export const COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = '#1a1a19'; +export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = '#e4e4e4'; +export const COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = '#d2d1d1'; +export const COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = '#6c6a69'; +export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = '#6c6a69'; +export const COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND_ACCENT = '#828180'; +export const COLOR_COMBOS_DRAFT_SUBTLE_BACKGROUND = '#828180'; +export const COLOR_COMBOS_DRAFT_BOLD_FOREGROUND = '#f0f0f0'; +export const COLOR_COMBOS_DRAFT_BOLD_BACKGROUND = '#343332'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND = '#085c37'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_FOREGROUND_ACCENT = '#052e1c'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND = '#d3f8df'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_BACKGROUND_ACCENT = '#73e2a3'; +export const COLOR_COMBOS_PUBLISHED_DEFAULT_ICON_BACKGROUND_ACCENT = '#079250'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND = '#085c37'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_FOREGROUND_ACCENT = '#079250'; +export const COLOR_COMBOS_PUBLISHED_SUBTLE_BACKGROUND = '#079250'; export const COLOR_COMBOS_PUBLISHED_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = '#23856d'; -export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = '#054fb8'; -export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = '#07265f'; -export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = '#e6f4fe'; -export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#8ecafb'; -export const COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = '#0072ef'; -export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = '#054fb8'; -export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = '#0072ef'; -export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#8ecafb'; -export const COLOR_COMBOS_INFO_BOLD_FOREGROUND = '#e6f4fe'; -export const COLOR_COMBOS_INFO_BOLD_BACKGROUND = '#0072ef'; -export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = '#50348a'; -export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = '#381c5e'; -export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = '#eee4f6'; -export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = '#d9c2ef'; -export const COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = '#8e5ad8'; -export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = '#50348a'; -export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = '#8e5ad8'; -export const COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = '#d9c2ef'; -export const COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = '#eee4f6'; -export const COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = '#8e5ad8'; -export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = '#c56a02'; -export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = '#8c3b08'; -export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = '#fef8e1'; -export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = '#fad980'; -export const COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = '#c56a02'; -export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = '#c56a02'; -export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = '#ffc505'; -export const COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = '#ffc505'; +export const COLOR_COMBOS_PUBLISHED_BOLD_BACKGROUND = '#079250'; +export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = '#1c4ed8'; +export const COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = '#172554'; +export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = '#dbe9fe'; +export const COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = '#92c5fd'; +export const COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = '#2463eb'; +export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = '#1c4ed8'; +export const COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = '#2463eb'; +export const COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = '#92c5fd'; +export const COLOR_COMBOS_INFO_BOLD_FOREGROUND = '#dbe9fe'; +export const COLOR_COMBOS_INFO_BOLD_BACKGROUND = '#2463eb'; +export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = '#402fa4'; +export const COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND_ACCENT = '#221b4b'; +export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND = '#e0e4ff'; +export const COLOR_COMBOS_LOCKED_DEFAULT_BACKGROUND_ACCENT = '#a3acfd'; +export const COLOR_COMBOS_LOCKED_DEFAULT_ICON_BACKGROUND_ACCENT = '#533be5'; +export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND = '#402fa4'; +export const COLOR_COMBOS_LOCKED_SUBTLE_FOREGROUND_ACCENT = '#533be5'; +export const COLOR_COMBOS_LOCKED_SUBTLE_BACKGROUND = '#a3acfd'; +export const COLOR_COMBOS_LOCKED_BOLD_FOREGROUND = '#e0e4ff'; +export const COLOR_COMBOS_LOCKED_BOLD_BACKGROUND = '#533be5'; +export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND = '#db7303'; +export const COLOR_COMBOS_WARNING_DEFAULT_FOREGROUND_ACCENT = '#451902'; +export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND = '#fff3c6'; +export const COLOR_COMBOS_WARNING_DEFAULT_BACKGROUND_ACCENT = '#fed04b'; +export const COLOR_COMBOS_WARNING_DEFAULT_ICON_BACKGROUND_ACCENT = '#db7303'; +export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND = '#db7303'; +export const COLOR_COMBOS_WARNING_SUBTLE_FOREGROUND_ACCENT = '#fdbb21'; +export const COLOR_COMBOS_WARNING_SUBTLE_BACKGROUND = '#fdbb21'; export const COLOR_COMBOS_WARNING_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_WARNING_BOLD_BACKGROUND = '#ffc505'; -export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = '#99221e'; -export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = '#5e0d0d'; -export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = '#fff0f0'; -export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = '#cf3c32'; -export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = '#99221e'; -export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = '#fdb0aa'; -export const COLOR_COMBOS_DANGER_BOLD_FOREGROUND = '#fff0f0'; -export const COLOR_COMBOS_DANGER_BOLD_BACKGROUND = '#fdb0aa'; +export const COLOR_COMBOS_WARNING_BOLD_BACKGROUND = '#fdbb21'; +export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND = '#991b1b'; +export const COLOR_COMBOS_DANGER_DEFAULT_FOREGROUND_ACCENT = '#572627'; +export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND = '#fee2e1'; +export const COLOR_COMBOS_DANGER_DEFAULT_BACKGROUND_ACCENT = '#fda5a5'; +export const COLOR_COMBOS_DANGER_DEFAULT_ICON_BACKGROUND_ACCENT = '#ef4444'; +export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND = '#991b1b'; +export const COLOR_COMBOS_DANGER_SUBTLE_FOREGROUND_ACCENT = '#fda5a5'; +export const COLOR_COMBOS_DANGER_SUBTLE_BACKGROUND = '#fda5a5'; +export const COLOR_COMBOS_DANGER_BOLD_FOREGROUND = '#fee2e1'; +export const COLOR_COMBOS_DANGER_BOLD_BACKGROUND = '#fda5a5'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = '#92c5fd'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = '#fff'; export const COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = '#fff'; -export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = '#92c5fd'; export const COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = '#fff'; -export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#8ecafb'; +export const COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = '#92c5fd'; // // Map for COLOR COMBOS @@ -659,14 +1337,17 @@ export const COLOR_COMBOS = { // // Static vars for COLOR CORE // -export const COLOR_CORE_PRIMARY = '#0072ef'; -export const COLOR_CORE_SAGE = '#23856d'; -export const COLOR_CORE_YELLOW = '#ffc505'; -export const COLOR_CORE_RED = '#cf3c32'; -export const COLOR_CORE_ORANGE = '#fb7e09'; -export const COLOR_CORE_PURPLE = '#8e5ad8'; -export const COLOR_CORE_CHARCOAL = '#43474b'; -export const COLOR_CORE_GREY = '#8d939a'; +export const COLOR_CORE_BLUE = '#2463eb'; +export const COLOR_CORE_GREEN = '#079250'; +export const COLOR_CORE_MERCURY = '#ff3e15'; +export const COLOR_CORE_PRIMARY = '#2463eb'; +export const COLOR_CORE_SAGE = '#079250'; +export const COLOR_CORE_YELLOW = '#fdbb21'; +export const COLOR_CORE_RED = '#ef4444'; +export const COLOR_CORE_ORANGE = '#ff3e15'; +export const COLOR_CORE_PURPLE = '#533be5'; +export const COLOR_CORE_CHARCOAL = '#4d4d4c'; +export const COLOR_CORE_GREY = '#828180'; export const COLOR_CORE_WHITE = '#fff'; export const COLOR_CORE_BLACK = '#000'; @@ -674,6 +1355,9 @@ export const COLOR_CORE_BLACK = '#000'; // Map for COLOR CORE // export const COLOR_CORE = { + BLUE: COLOR_CORE_BLUE, + GREEN: COLOR_CORE_GREEN, + MERCURY: COLOR_CORE_MERCURY, PRIMARY: COLOR_CORE_PRIMARY, SAGE: COLOR_CORE_SAGE, YELLOW: COLOR_CORE_YELLOW, diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index ab5944f264..04e1dadf4a 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -1,218 +1,644 @@ { "color": { "base": { + "blue": { + "5": { + "hex": { "value": "#fafcff" }, + "code": { "value": "blue-5" }, + "classname": { "value": "t-sage--color-blue-5" } + }, + "10": { + "hex": { "value": "#eff6ff" }, + "code": { "value": "blue-10" }, + "classname": { "value": "t-sage--color-blue-10" } + }, + "15": { + "hex": { "value": "#dbe9fe" }, + "code": { "value": "blue-15" }, + "classname": { "value": "t-sage--color-blue-15" } + }, + "20": { + "hex": { "value": "#bfdbfe" }, + "code": { "value": "blue-20" }, + "classname": { "value": "t-sage--color-blue-20" } + }, + "30": { + "hex": { "value": "#92c5fd" }, + "code": { "value": "blue-30" }, + "classname": { "value": "t-sage--color-blue-30" } + }, + "40": { + "hex": { "value": "#60a5fa" }, + "code": { "value": "blue-40" }, + "classname": { "value": "t-sage--color-blue-40" } + }, + "50": { + "hex": { "value": "#3c82f6" }, + "code": { "value": "blue-50" }, + "classname": { "value": "t-sage--color-blue-50" } + }, + "60": { + "hex": { "value": "#2463eb" }, + "code": { "value": "blue-60" }, + "classname": { "value": "t-sage--color-blue-60" } + }, + "70": { + "hex": { "value": "#1c4ed8" }, + "code": { "value": "blue-70" }, + "classname": { "value": "t-sage--color-blue-70" } + }, + "80": { + "hex": { "value": "#1d40ae" }, + "code": { "value": "blue-80" }, + "classname": { "value": "t-sage--color-blue-80" } + }, + "90": { + "hex": { "value": "#1f3a8a" }, + "code": { "value": "blue-90" }, + "classname": { "value": "t-sage--color-blue-90" } + }, + "95": { + "hex": { "value": "#172554" }, + "code": { "value": "blue-95" }, + "classname": { "value": "t-sage--color-blue-95" } + } + }, + "green": { + "5": { + "hex": { "value": "#fbfefc" }, + "code": { "value": "green-5" }, + "classname": { "value": "t-sage--color-green-5" } + }, + "10": { + "hex": { "value": "#edfcf2" }, + "code": { "value": "green-10" }, + "classname": { "value": "t-sage--color-green-10" } + }, + "15": { + "hex": { "value": "#d3f8df" }, + "code": { "value": "green-15" }, + "classname": { "value": "t-sage--color-green-15" } + }, + "20": { + "hex": { "value": "#aaf0c4" }, + "code": { "value": "green-20" }, + "classname": { "value": "t-sage--color-green-20" } + }, + "30": { + "hex": { "value": "#73e2a3" }, + "code": { "value": "green-30" }, + "classname": { "value": "t-sage--color-green-30" } + }, + "40": { + "hex": { "value": "#3dcb7f" }, + "code": { "value": "green-40" }, + "classname": { "value": "t-sage--color-green-40" } + }, + "50": { + "hex": { "value": "#17b365" }, + "code": { "value": "green-50" }, + "classname": { "value": "t-sage--color-green-50" } + }, + "60": { + "hex": { "value": "#079250" }, + "code": { "value": "green-60" }, + "classname": { "value": "t-sage--color-green-60" } + }, + "70": { + "hex": { "value": "#097443" }, + "code": { "value": "green-70" }, + "classname": { "value": "t-sage--color-green-70" } + }, + "80": { + "hex": { "value": "#085c37" }, + "code": { "value": "green-80" }, + "classname": { "value": "t-sage--color-green-80" } + }, + "90": { + "hex": { "value": "#094c2f" }, + "code": { "value": "green-90" }, + "classname": { "value": "t-sage--color-green-90" } + }, + "95": { + "hex": { "value": "#052e1c" }, + "code": { "value": "green-95" }, + "classname": { "value": "t-sage--color-green-95" } + } + }, + "mercury": { + "5": { + "hex": { "value": "#fffcfa" }, + "code": { "value": "mercury-5" }, + "classname": { "value": "t-sage--color-mercury-5" } + }, + "10": { + "hex": { "value": "#fff3ed" }, + "code": { "value": "mercury-10" }, + "classname": { "value": "t-sage--color-mercury-10" } + }, + "15": { + "hex": { "value": "#ffe3d4" }, + "code": { "value": "mercury-15" }, + "classname": { "value": "t-sage--color-mercury-15" } + }, + "20": { + "hex": { "value": "#ffc3a8" }, + "code": { "value": "mercury-20" }, + "classname": { "value": "t-sage--color-mercury-20" } + }, + "30": { + "hex": { "value": "#ff9970" }, + "code": { "value": "mercury-30" }, + "classname": { "value": "t-sage--color-mercury-30" } + }, + "40": { + "hex": { "value": "#ff6337" }, + "code": { "value": "mercury-40" }, + "classname": { "value": "t-sage--color-mercury-40" } + }, + "50": { + "hex": { "value": "#ff3e15" }, + "code": { "value": "mercury-50" }, + "classname": { "value": "t-sage--color-mercury-50" } + }, + "60": { + "hex": { "value": "#f11f06" }, + "code": { "value": "mercury-60" }, + "classname": { "value": "t-sage--color-mercury-60" } + }, + "70": { + "hex": { "value": "#c81307" }, + "code": { "value": "mercury-70" }, + "classname": { "value": "t-sage--color-mercury-70" } + }, + "80": { + "hex": { "value": "#9e110e" }, + "code": { "value": "mercury-80" }, + "classname": { "value": "t-sage--color-mercury-80" } + }, + "90": { + "hex": { "value": "#7f120f" }, + "code": { "value": "mercury-90" }, + "classname": { "value": "t-sage--color-mercury-90" } + }, + "95": { + "hex": { "value": "#450506" }, + "code": { "value": "mercury-95" }, + "classname": { "value": "t-sage--color-mercury-95" } + } + }, "primary": { "100": { - "hex": { "value": "#e6f4fe" }, + "hex": { "value": "{color.base.blue.15.hex.value}" }, "code": { "value": "primary-100" }, "classname": { "value": "t-sage--color-primary-100" } }, "200": { - "hex": { "value": "#8ecafb" }, + "hex": { "value": "{color.base.blue.30.hex.value}" }, "code": { "value": "primary-200" }, "classname": { "value": "t-sage--color-primary-200" } }, "300": { - "hex": { "value": "#0072ef" }, + "hex": { "value": "{color.base.blue.60.hex.value}" }, "code": { "value": "primary-300" }, "classname": { "value": "t-sage--color-primary-300" } }, "400": { - "hex": { "value": "#054fb8" }, + "hex": { "value": "{color.base.blue.70.hex.value}" }, "code": { "value": "primary-400" }, "classname": { "value": "t-sage--color-primary-400" } }, "500": { - "hex": { "value": "#07265f" }, + "hex": { "value": "{color.base.blue.95.hex.value}" }, "code": { "value": "primary-500" }, "classname": { "value": "t-sage--color-primary-500" } } }, "sage": { "100": { - "hex": { "value": "#ddf8f0" }, + "hex": { "value": "{color.base.green.15.hex.value}" }, "code": { "value": "sage-100" }, "classname": { "value": "t-sage--color-sage-100" } }, "200": { - "hex": { "value": "#86d5bc" }, + "hex": { "value": "{color.base.green.30.hex.value}" }, "code": { "value": "sage-200" }, "classname": { "value": "t-sage--color-sage-200" } }, "300": { - "hex": { "value": "#23856d" }, + "hex": { "value": "{color.base.green.60.hex.value}" }, "code": { "value": "sage-300" }, "classname": { "value": "t-sage--color-sage-300" } }, "400": { - "hex": { "value": "#225d53" }, + "hex": { "value": "{color.base.green.80.hex.value}" }, "code": { "value": "sage-400" }, "classname": { "value": "t-sage--color-sage-400" } }, "500": { - "hex": { "value": "#183e3b" }, + "hex": { "value": "{color.base.green.95.hex.value}" }, "code": { "value": "sage-500" }, "classname": { "value": "t-sage--color-sage-500" } } }, "yellow": { + "5": { + "hex": { "value": "#fffefa" }, + "code": { "value": "yellow-5" }, + "classname": { "value": "t-sage--color-yellow-5" } + }, + "10": { + "hex": { "value": "#fffbeb" }, + "code": { "value": "yellow-10" }, + "classname": { "value": "t-sage--color-yellow-10" } + }, + "15": { + "hex": { "value": "#fff3c6" }, + "code": { "value": "yellow-15" }, + "classname": { "value": "t-sage--color-yellow-15" } + }, + "20": { + "hex": { "value": "#fee589" }, + "code": { "value": "yellow-20" }, + "classname": { "value": "t-sage--color-yellow-20" } + }, + "30": { + "hex": { "value": "#fed04b" }, + "code": { "value": "yellow-30" }, + "classname": { "value": "t-sage--color-yellow-30" } + }, + "40": { + "hex": { "value": "#fdbb21" }, + "code": { "value": "yellow-40" }, + "classname": { "value": "t-sage--color-yellow-40" } + }, + "50": { + "hex": { "value": "#f79a0b" }, + "code": { "value": "yellow-50" }, + "classname": { "value": "t-sage--color-yellow-50" } + }, + "60": { + "hex": { "value": "#db7303" }, + "code": { "value": "yellow-60" }, + "classname": { "value": "t-sage--color-yellow-60" } + }, + "70": { + "hex": { "value": "#b64f06" }, + "code": { "value": "yellow-70" }, + "classname": { "value": "t-sage--color-yellow-70" } + }, + "80": { + "hex": { "value": "#943d0e" }, + "code": { "value": "yellow-80" }, + "classname": { "value": "t-sage--color-yellow-80" } + }, + "90": { + "hex": { "value": "#79330e" }, + "code": { "value": "yellow-90" }, + "classname": { "value": "t-sage--color-yellow-90" } + }, + "95": { + "hex": { "value": "#451902" }, + "code": { "value": "yellow-95" }, + "classname": { "value": "t-sage--color-yellow-95" } + }, "100": { - "hex": { "value": "#fef8e1" }, + "hex": { "value": "{color.base.yellow.15.hex.value}" }, "code": { "value": "yellow-100" }, "classname": { "value": "t-sage--color-yellow-100" } }, "200": { - "hex": { "value": "#fad980" }, + "hex": { "value": "{color.base.yellow.30.hex.value}" }, "code": { "value": "yellow-200" }, "classname": { "value": "t-sage--color-yellow-200" } }, "300": { - "hex": { "value": "#ffc505" }, + "hex": { "value": "{color.base.yellow.40.hex.value}" }, "code": { "value": "yellow-300" }, "classname": { "value": "t-sage--color-yellow-300" } }, "400": { - "hex": { "value": "#c56a02" }, + "hex": { "value": "{color.base.yellow.60.hex.value}" }, "code": { "value": "yellow-400" }, "classname": { "value": "t-sage--color-yellow-400" } }, "500": { - "hex": { "value": "#8c3b08" }, + "hex": { "value": "{color.base.yellow.95.hex.value}" }, "code": { "value": "yellow-500" }, "classname": { "value": "t-sage--color-yellow-500" } } }, "red": { + "5": { + "hex": { "value": "#fffafa" }, + "code": { "value": "red-5" }, + "classname": { "value": "t-sage--color-red-5" } + }, + "10": { + "hex": { "value": "#fef2f2" }, + "code": { "value": "red-10" }, + "classname": { "value": "t-sage--color-red-10" } + }, + "15": { + "hex": { "value": "#fee2e1" }, + "code": { "value": "red-15" }, + "classname": { "value": "t-sage--color-red-15" } + }, + "20": { + "hex": { "value": "#fecaca" }, + "code": { "value": "red-20" }, + "classname": { "value": "t-sage--color-red-20" } + }, + "30": { + "hex": { "value": "#fda5a5" }, + "code": { "value": "red-30" }, + "classname": { "value": "t-sage--color-red-30" } + }, + "40": { + "hex": { "value": "#f87171" }, + "code": { "value": "red-40" }, + "classname": { "value": "t-sage--color-red-40" } + }, + "50": { + "hex": { "value": "#ef4444" }, + "code": { "value": "red-50" }, + "classname": { "value": "t-sage--color-red-50" } + }, + "60": { + "hex": { "value": "#dc2625" }, + "code": { "value": "red-60" }, + "classname": { "value": "t-sage--color-red-60" } + }, + "70": { + "hex": { "value": "#b91c1b" }, + "code": { "value": "red-70" }, + "classname": { "value": "t-sage--color-red-70" } + }, + "80": { + "hex": { "value": "#991b1b" }, + "code": { "value": "red-80" }, + "classname": { "value": "t-sage--color-red-80" } + }, + "90": { + "hex": { "value": "#7f1c1d" }, + "code": { "value": "red-90" }, + "classname": { "value": "t-sage--color-red-90" } + }, + "95": { + "hex": { "value": "#572627" }, + "code": { "value": "red-95" }, + "classname": { "value": "t-sage--color-red-95" } + }, "100": { - "hex": { "value": "#fff0f0" }, + "hex": { "value": "{color.base.red.15.hex.value}" }, "code": { "value": "red-100" }, "classname": { "value": "t-sage--color-red-100" } }, "200": { - "hex": { "value": "#fdb0aa" }, + "hex": { "value": "{color.base.red.30.hex.value}" }, "code": { "value": "red-200" }, "classname": { "value": "t-sage--color-red-200" } }, "300": { - "hex": { "value": "#cf3c32" }, + "hex": { "value": "{color.base.red.50.hex.value}" }, "code": { "value": "red-300" }, "classname": { "value": "t-sage--color-red-300" } }, "400": { - "hex": { "value": "#99221e" }, + "hex": { "value": "{color.base.red.80.hex.value}" }, "code": { "value": "red-400" }, "classname": { "value": "t-sage--color-red-400" } }, "500": { - "hex": { "value": "#5e0d0d" }, + "hex": { "value": "{color.base.red.95.hex.value}" }, "code": { "value": "red-500" }, "classname": { "value": "t-sage--color-red-500" } } }, "orange": { "100": { - "hex": { "value": "#fef1e1" }, + "hex": { "value": "{color.base.mercury.15.hex.value}" }, "code": { "value": "orange-100" }, "classname": { "value": "t-sage--color-orange-100" } }, "200": { - "hex": { "value": "#ffb36b" }, + "hex": { "value": "{color.base.mercury.30.hex.value}" }, "code": { "value": "orange-200" }, "classname": { "value": "t-sage--color-orange-200" } }, "300": { - "hex": { "value": "#fb7e09" }, + "hex": { "value": "{color.base.mercury.50.hex.value}" }, "code": { "value": "orange-300" }, "classname": { "value": "t-sage--color-orange-300" } }, "400": { - "hex": { "value": "#b3501e" }, + "hex": { "value": "{color.base.mercury.80.hex.value}" }, "code": { "value": "orange-400" }, "classname": { "value": "t-sage--color-orange-400" } }, "500": { - "hex": { "value": "#5a260c" }, + "hex": { "value": "{color.base.mercury.95.hex.value}" }, "code": { "value": "orange-500" }, "classname": { "value": "t-sage--color-orange-500" } } }, "purple": { + "5": { + "hex": { "value": "#fafbff" }, + "code": { "value": "purple-5" }, + "classname": { "value": "t-sage--color-purple-5" } + }, + "10": { + "hex": { "value": "#edf1ff" }, + "code": { "value": "purple-10" }, + "classname": { "value": "t-sage--color-purple-10" } + }, + "15": { + "hex": { "value": "#e0e4ff" }, + "code": { "value": "purple-15" }, + "classname": { "value": "t-sage--color-purple-15" } + }, + "20": { + "hex": { "value": "#c7cdfe" }, + "code": { "value": "purple-20" }, + "classname": { "value": "t-sage--color-purple-20" } + }, + "30": { + "hex": { "value": "#a3acfd" }, + "code": { "value": "purple-30" }, + "classname": { "value": "t-sage--color-purple-30" } + }, + "40": { + "hex": { "value": "#8081f9" }, + "code": { "value": "purple-40" }, + "classname": { "value": "t-sage--color-purple-40" } + }, + "50": { + "hex": { "value": "#6a62f2" }, + "code": { "value": "purple-50" }, + "classname": { "value": "t-sage--color-purple-50" } + }, + "60": { + "hex": { "value": "#533be5" }, + "code": { "value": "purple-60" }, + "classname": { "value": "t-sage--color-purple-60" } + }, + "70": { + "hex": { "value": "#4f37cb" }, + "code": { "value": "purple-70" }, + "classname": { "value": "t-sage--color-purple-70" } + }, + "80": { + "hex": { "value": "#402fa4" }, + "code": { "value": "purple-80" }, + "classname": { "value": "t-sage--color-purple-80" } + }, + "90": { + "hex": { "value": "#372d82" }, + "code": { "value": "purple-90" }, + "classname": { "value": "t-sage--color-purple-90" } + }, + "95": { + "hex": { "value": "#221b4b" }, + "code": { "value": "purple-95" }, + "classname": { "value": "t-sage--color-purple-95" } + }, "100": { - "hex": { "value": "#eee4f6" }, + "hex": { "value": "{color.base.purple.15.hex.value}" }, "code": { "value": "purple-100" }, "classname": { "value": "t-sage--color-purple-100" } }, "200": { - "hex": { "value": "#d9c2ef" }, + "hex": { "value": "{color.base.purple.30.hex.value}" }, "code": { "value": "purple-200" }, "classname": { "value": "t-sage--color-purple-200" } }, "300": { - "hex": { "value": "#8e5ad8" }, + "hex": { "value": "{color.base.purple.60.hex.value}" }, "code": { "value": "purple-300" }, "classname": { "value": "t-sage--color-purple-300" } }, "400": { - "hex": { "value": "#50348a" }, + "hex": { "value": "{color.base.purple.80.hex.value}" }, "code": { "value": "purple-400" }, "classname": { "value": "t-sage--color-purple-400" } }, "500": { - "hex": { "value": "#381c5e" }, + "hex": { "value": "{color.base.purple.95.hex.value}" }, "code": { "value": "purple-500" }, "classname": { "value": "t-sage--color-purple-500" } } }, "charcoal": { "100": { - "hex": { "value": "#8d939a" }, + "hex": { "value": "{color.base.grey.60.hex.value}" }, "code": { "value": "charcoal-100" }, "classname": { "value": "t-sage--color-charcoal-100" } }, "200": { - "hex": { "value": "#60666c" }, + "hex": { "value": "{color.base.grey.70.hex.value}" }, "code": { "value": "charcoal-200" }, "classname": { "value": "t-sage--color-charcoal-200" } }, "300": { - "hex": { "value": "#43474b" }, + "hex": { "value": "{color.base.grey.80.hex.value}" }, "code": { "value": "charcoal-300" }, "classname": { "value": "t-sage--color-charcoal-300" } }, "400": { - "hex": { "value": "#202327" }, + "hex": { "value": "{color.base.grey.90.hex.value}" }, "code": { "value": "charcoal-400" }, "classname": { "value": "t-sage--color-charcoal-400" } }, "500": { - "hex": { "value": "#040506" }, + "hex": { "value": "{color.base.grey.95.hex.value}" }, "code": { "value": "charcoal-500" }, "classname": { "value": "t-sage--color-charcoal-500" } } }, "grey": { + "5": { + "hex": { "value": "#fcfcfc" }, + "code": { "value": "grey-5" }, + "classname": { "value": "t-sage--color-grey-5" } + }, + "10": { + "hex": { "value": "#f8f8f8" }, + "code": { "value": "grey-10" }, + "classname": { "value": "t-sage--color-grey-10" } + }, + "15": { + "hex": { "value": "#f0f0f0" }, + "code": { "value": "grey-15" }, + "classname": { "value": "t-sage--color-grey-15" } + }, + "20": { + "hex": { "value": "#e4e4e4" }, + "code": { "value": "grey-20" }, + "classname": { "value": "t-sage--color-grey-20" } + }, + "30": { + "hex": { "value": "#d2d1d1" }, + "code": { "value": "grey-30" }, + "classname": { "value": "t-sage--color-grey-30" } + }, + "40": { + "hex": { "value": "#bbbab9" }, + "code": { "value": "grey-40" }, + "classname": { "value": "t-sage--color-grey-40" } + }, + "50": { + "hex": { "value": "#9b9a98" }, + "code": { "value": "grey-50" }, + "classname": { "value": "t-sage--color-grey-50" } + }, + "60": { + "hex": { "value": "#828180" }, + "code": { "value": "grey-60" }, + "classname": { "value": "t-sage--color-grey-60" } + }, + "70": { + "hex": { "value": "#6c6a69" }, + "code": { "value": "grey-70" }, + "classname": { "value": "t-sage--color-grey-70" } + }, + "80": { + "hex": { "value": "#4d4d4c" }, + "code": { "value": "grey-80" }, + "classname": { "value": "t-sage--color-grey-80" } + }, + "90": { + "hex": { "value": "#343332" }, + "code": { "value": "grey-90" }, + "classname": { "value": "t-sage--color-grey-90" } + }, + "95": { + "hex": { "value": "#1a1a19" }, + "code": { "value": "grey-95" }, + "classname": { "value": "t-sage--color-grey-95" } + }, "100": { - "hex": { "value": "#f9fafa" }, + "hex": { "value": "#f8f8f8" }, "code": { "value": "grey-100" }, "classname": { "value": "t-sage--color-grey-100" } }, "200": { - "hex": { "value": "#f6f8f8" }, + "hex": { "value": "#f0f0f0" }, "code": { "value": "grey-200" }, "classname": { "value": "t-sage--color-grey-200" } }, "300": { - "hex": { "value": "#eceeef" }, + "hex": { "value": "#e4e4e4" }, "code": { "value": "grey-300" }, "classname": { "value": "t-sage--color-grey-300" } }, "400": { - "hex": { "value": "#d3d5d9" }, + "hex": { "value": "#d2d1d1" }, "code": { "value": "grey-400" }, "classname": { "value": "t-sage--color-grey-400" } }, "500": { - "hex": { "value": "#b5bac0" }, + "hex": { "value": "#9b9a98" }, "code": { "value": "grey-500" }, "classname": { "value": "t-sage--color-grey-500" } } diff --git a/style-dictionary/tokens/color/core.json b/style-dictionary/tokens/color/core.json index 43a099971e..96e442ee28 100644 --- a/style-dictionary/tokens/color/core.json +++ b/style-dictionary/tokens/color/core.json @@ -1,6 +1,15 @@ { "color": { "core": { + "blue": { + "value": "{color.base.blue.60.hex}" + }, + "green": { + "value": "{color.base.green.60.hex}" + }, + "mercury": { + "value": "{color.base.mercury.50.hex}" + }, "primary": { "value": "{color.base.primary.300.hex}" },