xmlui 0.8.6 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/{apiInterceptorWorker-fLBfPj2T.mjs → apiInterceptorWorker-B1u6prJM.mjs} +1 -1
  2. package/dist/{index-wd8FRzuM.mjs → index-CVvazA5D.mjs} +5849 -6109
  3. package/dist/index.css +274 -301
  4. package/dist/language-server.mjs +25 -1
  5. package/dist/{lint-B18Ko6Sy.mjs → lint-gX2osbkz.mjs} +920 -1120
  6. package/dist/scripts/bin/build.js +2 -2
  7. package/dist/scripts/bin/start.js +3 -9
  8. package/dist/scripts/bin/vite-xmlui-plugin.js +2 -2
  9. package/dist/scripts/bin/viteConfig.js +89 -63
  10. package/dist/scripts/src/abstractions/scripting/ScriptingSourceTreeExp.js +1 -2
  11. package/dist/scripts/src/components/Accordion/Accordion.js +6 -16
  12. package/dist/scripts/src/components/App/AppNative.js +8 -0
  13. package/dist/scripts/src/components/AppHeader/AppHeader.js +1 -5
  14. package/dist/scripts/src/components/AppHeader/AppHeaderNative.js +10 -4
  15. package/dist/scripts/src/components/AutoComplete/AutoComplete.js +13 -19
  16. package/dist/scripts/src/components/AutoComplete/AutoCompleteContext.js +2 -0
  17. package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js +7 -3
  18. package/dist/scripts/src/components/Avatar/Avatar.js +2 -9
  19. package/dist/scripts/src/components/Badge/Badge.js +2 -8
  20. package/dist/scripts/src/components/Button/Button.js +28 -60
  21. package/dist/scripts/src/components/Card/Card.js +1 -6
  22. package/dist/scripts/src/components/Checkbox/Checkbox.js +4 -12
  23. package/dist/scripts/src/components/ComponentProvider.js +4 -0
  24. package/dist/scripts/src/components/DatePicker/DatePicker.js +3 -10
  25. package/dist/scripts/src/components/DropdownMenu/DropdownMenu.js +1 -1
  26. package/dist/scripts/src/components/Form/Form.js +12 -28
  27. package/dist/scripts/src/components/Form/FormNative.js +9 -0
  28. package/dist/scripts/src/components/FormItem/HelperText.js +1 -1
  29. package/dist/scripts/src/components/FormItem/ItemWithLabel.js +2 -2
  30. package/dist/scripts/src/components/Heading/HeadingNative.js +0 -1
  31. package/dist/scripts/src/components/HtmlTags/HtmlTags.js +4 -19
  32. package/dist/scripts/src/components/IconProvider.js +2 -2
  33. package/dist/scripts/src/components/Link/Link.js +2 -8
  34. package/dist/scripts/src/components/Markdown/MarkdownNative.js +4 -4
  35. package/dist/scripts/src/components/ModalDialog/ModalDialog.js +1 -3
  36. package/dist/scripts/src/components/NavGroup/NavGroup.js +34 -3
  37. package/dist/scripts/src/components/NavGroup/NavGroupNative.js +24 -12
  38. package/dist/scripts/src/components/NavLink/NavLink.js +4 -11
  39. package/dist/scripts/src/components/NavPanel/NavPanel.js +1 -6
  40. package/dist/scripts/src/components/ProgressBar/ProgressBar.js +2 -8
  41. package/dist/scripts/src/components/RadioGroup/RadioGroup.js +4 -12
  42. package/dist/scripts/src/components/Select/Select.js +5 -13
  43. package/dist/scripts/src/components/Select/SelectNative.js +7 -3
  44. package/dist/scripts/src/components/Slider/Slider.js +2 -8
  45. package/dist/scripts/src/components/Spinner/Spinner.js +1 -6
  46. package/dist/scripts/src/components/SubNavPanel/SubNavPanel.js +22 -0
  47. package/dist/scripts/src/components/SubNavPanel/SubNavPanelNative.js +9 -0
  48. package/dist/scripts/src/components/Switch/Switch.js +6 -16
  49. package/dist/scripts/src/components/Table/Table.js +8 -17
  50. package/dist/scripts/src/components/TableOfContents/TableOfContents.js +4 -12
  51. package/dist/scripts/src/components/Tabs/Tabs.js +3 -10
  52. package/dist/scripts/src/components/Text/Text.js +10 -24
  53. package/dist/scripts/src/components/TextBox/TextBoxNative.js +1 -1
  54. package/dist/scripts/src/components/Theme/ThemeNative.js +1 -1
  55. package/dist/scripts/src/components/ValidationSummary/ValidationSummary.js +3 -3
  56. package/dist/scripts/src/components-core/DevTools.js +5 -4
  57. package/dist/scripts/src/components-core/RestApiProxy.js +7 -3
  58. package/dist/scripts/src/components-core/action/APICall.js +2 -1
  59. package/dist/scripts/src/components-core/rendering/Container.js +15 -11
  60. package/dist/scripts/src/components-core/rendering/StateContainer.js +3 -2
  61. package/dist/scripts/src/components-core/script-runner/BindingTreeEvaluationContext.js +0 -2
  62. package/dist/scripts/src/components-core/script-runner/ParameterParser.js +1 -1
  63. package/dist/scripts/src/components-core/script-runner/asyncProxy.js +11 -64
  64. package/dist/scripts/src/components-core/script-runner/eval-tree-async.js +177 -175
  65. package/dist/scripts/src/components-core/script-runner/eval-tree-common.js +173 -231
  66. package/dist/scripts/src/components-core/script-runner/eval-tree-sync.js +129 -100
  67. package/dist/scripts/src/components-core/script-runner/process-statement-async.js +170 -175
  68. package/dist/scripts/src/components-core/script-runner/process-statement-common.js +48 -33
  69. package/dist/scripts/src/components-core/script-runner/process-statement-sync.js +164 -170
  70. package/dist/scripts/src/components-core/script-runner/statement-queue.js +5 -4
  71. package/dist/scripts/src/components-core/script-runner/visitors.js +124 -116
  72. package/dist/scripts/src/components-core/theming/themes/palette.js +1 -0
  73. package/dist/scripts/src/components-core/theming/themes/root.js +300 -154
  74. package/dist/scripts/src/components-core/theming/themes/theme-colors.js +510 -510
  75. package/dist/scripts/src/components-core/theming/themes/xmlui.js +0 -1
  76. package/dist/scripts/src/components-core/theming/transformThemeVars.js +11 -11
  77. package/dist/scripts/src/components-core/utils/misc.js +13 -0
  78. package/dist/scripts/src/components-core/utils/statementUtils.js +56 -53
  79. package/dist/scripts/src/components-core/xmlui-parser.js +1 -1
  80. package/dist/scripts/src/parsers/scripting-exp/Lexer.js +1092 -0
  81. package/dist/scripts/src/parsers/scripting-exp/Parser.js +2635 -0
  82. package/dist/scripts/src/parsers/scripting-exp/ParserError.js +47 -0
  83. package/dist/scripts/src/parsers/scripting-exp/TokenTrait.js +109 -0
  84. package/dist/scripts/src/parsers/scripting-exp/TokenType.js +2 -4
  85. package/dist/scripts/src/parsers/scripting-exp/code-behind-collect.js +101 -0
  86. package/dist/scripts/src/parsers/scripting-exp/modules.js +107 -0
  87. package/dist/scripts/src/parsers/{scripting → scripting-exp}/tree-visitor.js +103 -107
  88. package/dist/scripts/src/parsers/xmlui-parser/transform.js +12 -12
  89. package/dist/style.css +245 -286
  90. package/dist/xmlui-metadata.mjs +2741 -2211
  91. package/dist/xmlui-metadata.umd.js +2740 -2212
  92. package/dist/xmlui-parser.d.ts +320 -232
  93. package/dist/xmlui-parser.mjs +19 -19
  94. package/dist/xmlui-standalone.umd.js +6754 -7220
  95. package/dist/xmlui.d.ts +322 -230
  96. package/dist/xmlui.mjs +1 -1
  97. package/package.json +10 -6
  98. package/dist/_commonjsHelpers-CcAunmGO.mjs +0 -33
  99. package/dist/scripts/src/components-core/script-runner/ICustomOperations.js +0 -34
  100. package/dist/scripts/src/components-core/script-runner/custom-operations-registry.js +0 -40
  101. package/dist/scripts/src/components-core/script-runner/custom-ui-data.js +0 -40
  102. package/dist/scripts/src/components-core/script-runner/syncProxy.js +0 -31
  103. package/dist/scripts/src/parsers/scripting/code-behind-collect.js +0 -153
  104. package/dist/scripts/src/parsers/scripting/modules.js +0 -284
  105. /package/dist/scripts/src/abstractions/scripting/{LogicalThread.js → LogicalThreadExp.js} +0 -0
  106. /package/dist/scripts/src/abstractions/scripting/{TryScope.js → TryScopeExp.js} +0 -0
package/dist/scripts/src/components-core/theming/themes/theme-colors.js CHANGED
@@ -3,559 +3,559 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.redThemeColors = exports.cyanThemeColors = exports.purpleThemeColors = exports.orangeThemeColors = exports.grayThemeColors = exports.greenThemeColors = void 0;
4
4
  exports.greenThemeColors = {
5
5
  // --- Default surface color shades (form white to black)
6
- "color-surface-50": "hsl(144, 20%, 96.5%)",
7
- "color-surface-100": "hsl(144, 20%, 93%)",
8
- "color-surface-200": "hsl(144, 20%, 85%)",
9
- "color-surface-300": "hsl(144, 20%, 75%)",
10
- "color-surface-400": "hsl(144, 20%, 65%)",
11
- "color-surface-500": "hsl(144, 20%, 61%)", // #83AA90
12
- "color-surface-600": "hsl(144, 20%, 45%)",
13
- "color-surface-700": "hsl(144, 20%, 35%)",
14
- "color-surface-800": "hsl(144, 20%, 27%)",
15
- "color-surface-900": "hsl(144, 20%, 16%)",
16
- "color-surface-950": "hsl(144, 20%, 13%)",
17
- "color-surface": "$color-surface-500",
6
+ "const-color-surface-50": "hsl(144, 20%, 96.5%)",
7
+ "const-color-surface-100": "hsl(144, 20%, 93%)",
8
+ "const-color-surface-200": "hsl(144, 20%, 85%)",
9
+ "const-color-surface-300": "hsl(144, 20%, 75%)",
10
+ "const-color-surface-400": "hsl(144, 20%, 65%)",
11
+ "const-color-surface-500": "hsl(144, 20%, 61%)", // #83AA90
12
+ "const-color-surface-600": "hsl(144, 20%, 45%)",
13
+ "const-color-surface-700": "hsl(144, 20%, 35%)",
14
+ "const-color-surface-800": "hsl(144, 20%, 27%)",
15
+ "const-color-surface-900": "hsl(144, 20%, 16%)",
16
+ "const-color-surface-950": "hsl(144, 20%, 13%)",
17
+ "const-color-surface": "$const-color-surface-500",
18
18
  // --- Primary color shades
19
- "color-primary-50": "hsl(158, 85%, 94.5%)",
20
- "color-primary-100": "hsl(158, 85%, 89.1%)",
21
- "color-primary-200": "hsl(158, 85%, 78.1%)",
22
- "color-primary-300": "hsl(158, 85%, 67.2%)",
23
- "color-primary-400": "hsl(158, 85%, 56.3%)",
24
- "color-primary-500": "hsl(158, 85%, 33%)", // #0D9B60
25
- "color-primary-600": "hsl(158, 85%, 29.7%)",
26
- "color-primary-700": "hsl(158, 85%, 27.2%)",
27
- "color-primary-800": "hsl(158, 85%, 18.1%)",
28
- "color-primary-900": "hsl(158, 85%, 9.1%)",
29
- "color-primary-950": "hsl(158, 85%, 4.5%)",
30
- "color-primary": "$color-primary-500",
19
+ "const-color-primary-50": "hsl(158, 85%, 94.5%)",
20
+ "const-color-primary-100": "hsl(158, 85%, 89.1%)",
21
+ "const-color-primary-200": "hsl(158, 85%, 78.1%)",
22
+ "const-color-primary-300": "hsl(158, 85%, 67.2%)",
23
+ "const-color-primary-400": "hsl(158, 85%, 56.3%)",
24
+ "const-color-primary-500": "hsl(158, 85%, 33%)", // #0D9B60
25
+ "const-color-primary-600": "hsl(158, 85%, 29.7%)",
26
+ "const-color-primary-700": "hsl(158, 85%, 27.2%)",
27
+ "const-color-primary-800": "hsl(158, 85%, 18.1%)",
28
+ "const-color-primary-900": "hsl(158, 85%, 9.1%)",
29
+ "const-color-primary-950": "hsl(158, 85%, 4.5%)",
30
+ "const-color-primary": "$const-color-primary-500",
31
31
  // --- Secondary color shades
32
- "color-secondary-50": "hsl(198, 100%, 94.5%)",
33
- "color-secondary-100": "hsl(198, 100%, 89.1%)",
34
- "color-secondary-200": "hsl(198, 100%, 78.1%)",
35
- "color-secondary-300": "hsl(198, 100%, 67.2%)",
36
- "color-secondary-400": "hsl(198, 100%, 56.3%)",
37
- "color-secondary-500": "hsl(198, 100%, 29%)", // #006792
38
- "color-secondary-600": "hsl(198, 100%, 25%)",
39
- "color-secondary-700": "hsl(198, 100%, 20%)",
40
- "color-secondary-800": "hsl(198, 100%, 15%)",
41
- "color-secondary-900": "hsl(198, 100%, 10%)",
42
- "color-secondary-950": "hsl(198, 100%, 5%)",
43
- "color-secondary": "$color-secondary-500",
32
+ "const-color-secondary-50": "hsl(198, 100%, 94.5%)",
33
+ "const-color-secondary-100": "hsl(198, 100%, 89.1%)",
34
+ "const-color-secondary-200": "hsl(198, 100%, 78.1%)",
35
+ "const-color-secondary-300": "hsl(198, 100%, 67.2%)",
36
+ "const-color-secondary-400": "hsl(198, 100%, 56.3%)",
37
+ "const-color-secondary-500": "hsl(198, 100%, 29%)", // #006792
38
+ "const-color-secondary-600": "hsl(198, 100%, 25%)",
39
+ "const-color-secondary-700": "hsl(198, 100%, 20%)",
40
+ "const-color-secondary-800": "hsl(198, 100%, 15%)",
41
+ "const-color-secondary-900": "hsl(198, 100%, 10%)",
42
+ "const-color-secondary-950": "hsl(198, 100%, 5%)",
43
+ "const-color-secondary": "$const-color-secondary-500",
44
44
  // --- Warning color shades
45
- "color-warn-50": "hsl(36, 100%, 93%)",
46
- "color-warn-100": "hsl(36, 100%, 86%)",
47
- "color-warn-200": "hsl(36, 100%, 72%)",
48
- "color-warn-300": "hsl(36, 100%, 58%)",
49
- "color-warn-400": "hsl(36, 100%, 44%)",
50
- "color-warn-500": "hsl(36, 77%, 60%)", // #eaa84d
51
- "color-warn-600": "hsl(36, 77%, 54%)",
52
- "color-warn-700": "hsl(36, 77%, 48%)",
53
- "color-warn-800": "hsl(36, 77%, 42%)",
54
- "color-warn-900": "hsl(36, 77%, 36%)",
55
- "color-warn-950": "hsl(36, 77%, 30%)",
56
- "color-warn": "$color-warn-500",
45
+ "const-color-warn-50": "hsl(36, 100%, 93%)",
46
+ "const-color-warn-100": "hsl(36, 100%, 86%)",
47
+ "const-color-warn-200": "hsl(36, 100%, 72%)",
48
+ "const-color-warn-300": "hsl(36, 100%, 58%)",
49
+ "const-color-warn-400": "hsl(36, 100%, 44%)",
50
+ "const-color-warn-500": "hsl(36, 77%, 60%)", // #eaa84d
51
+ "const-color-warn-600": "hsl(36, 77%, 54%)",
52
+ "const-color-warn-700": "hsl(36, 77%, 48%)",
53
+ "const-color-warn-800": "hsl(36, 77%, 42%)",
54
+ "const-color-warn-900": "hsl(36, 77%, 36%)",
55
+ "const-color-warn-950": "hsl(36, 77%, 30%)",
56
+ "const-color-warn": "$const-color-warn-500",
57
57
  // --- Danger color shades
58
- "color-danger-50": "hsl(355, 95%, 95%)",
59
- "color-danger-100": "hsl(355, 95%, 85%)",
60
- "color-danger-200": "hsl(355, 95%, 75%)",
61
- "color-danger-300": "hsl(355, 95%, 65%)",
62
- "color-danger-400": "hsl(355, 95%, 55%)",
63
- "color-danger-500": "hsl(355, 95%, 66%)", // #fb656f
64
- "color-danger-600": "hsl(355, 95%, 60%)",
65
- "color-danger-700": "hsl(355, 95%, 54%)",
66
- "color-danger-800": "hsl(355, 95%, 48%)",
67
- "color-danger-900": "hsl(355, 95%, 42%)",
68
- "color-danger-950": "hsl(355, 95%, 36%)",
69
- "color-danger": "$color-danger-500",
70
- "color-attention": "$color-danger-500",
58
+ "const-color-danger-50": "hsl(355, 95%, 95%)",
59
+ "const-color-danger-100": "hsl(355, 95%, 85%)",
60
+ "const-color-danger-200": "hsl(355, 95%, 75%)",
61
+ "const-color-danger-300": "hsl(355, 95%, 65%)",
62
+ "const-color-danger-400": "hsl(355, 95%, 55%)",
63
+ "const-color-danger-500": "hsl(355, 95%, 66%)", // #fb656f
64
+ "const-color-danger-600": "hsl(355, 95%, 60%)",
65
+ "const-color-danger-700": "hsl(355, 95%, 54%)",
66
+ "const-color-danger-800": "hsl(355, 95%, 48%)",
67
+ "const-color-danger-900": "hsl(355, 95%, 42%)",
68
+ "const-color-danger-950": "hsl(355, 95%, 36%)",
69
+ "const-color-danger": "$const-color-danger-500",
70
+ "const-color-attention": "$const-color-danger-500",
71
71
  // --- Success color shades (greenish)
72
- "color-success-50": "hsl(158, 85%, 94.5%)",
73
- "color-success-100": "hsl(158, 85%, 89.1%)",
74
- "color-success-200": "hsl(158, 85%, 78.1%)",
75
- "color-success-300": "hsl(158, 85%, 67.2%)",
76
- "color-success-400": "hsl(158, 85%, 56.3%)",
77
- "color-success-500": "hsl(158, 85%, 33%)", // #0C8955
78
- "color-success-600": "hsl(158, 85%, 29.7%)",
79
- "color-success-700": "hsl(158, 85%, 27.2%)",
80
- "color-success-800": "hsl(158, 85%, 18.1%)",
81
- "color-success-900": "hsl(158, 85%, 9.1%)",
82
- "color-success-950": "hsl(158, 85%, 4.5%)",
83
- "color-success": "$color-success-500",
72
+ "const-color-success-50": "hsl(158, 85%, 94.5%)",
73
+ "const-color-success-100": "hsl(158, 85%, 89.1%)",
74
+ "const-color-success-200": "hsl(158, 85%, 78.1%)",
75
+ "const-color-success-300": "hsl(158, 85%, 67.2%)",
76
+ "const-color-success-400": "hsl(158, 85%, 56.3%)",
77
+ "const-color-success-500": "hsl(158, 85%, 33%)", // #0C8955
78
+ "const-color-success-600": "hsl(158, 85%, 29.7%)",
79
+ "const-color-success-700": "hsl(158, 85%, 27.2%)",
80
+ "const-color-success-800": "hsl(158, 85%, 18.1%)",
81
+ "const-color-success-900": "hsl(158, 85%, 9.1%)",
82
+ "const-color-success-950": "hsl(158, 85%, 4.5%)",
83
+ "const-color-success": "$const-color-success-500",
84
84
  // --- Info color shades
85
- "color-info-50": "hsl(202, 95%, 95%)",
86
- "color-info-100": "hsl(202, 95%, 90%)",
87
- "color-info-200": "hsl(202, 95%, 80%)",
88
- "color-info-300": "hsl(202, 95%, 70%)",
89
- "color-info-400": "hsl(202, 95%, 60%)",
90
- "color-info-500": "hsl(202, 95%, 50%)", // #0587CD
91
- "color-info-600": "hsl(202, 95%, 45%)",
92
- "color-info-700": "hsl(202, 95%, 35%)",
93
- "color-info-800": "hsl(202, 95%, 25%)",
94
- "color-info-900": "hsl(202, 95%, 15%)",
95
- "color-info-950": "hsl(202, 95%, 10%)",
96
- "color-info": "$color-info-500",
85
+ "const-color-info-50": "hsl(202, 95%, 95%)",
86
+ "const-color-info-100": "hsl(202, 95%, 90%)",
87
+ "const-color-info-200": "hsl(202, 95%, 80%)",
88
+ "const-color-info-300": "hsl(202, 95%, 70%)",
89
+ "const-color-info-400": "hsl(202, 95%, 60%)",
90
+ "const-color-info-500": "hsl(202, 95%, 50%)", // #0587CD
91
+ "const-color-info-600": "hsl(202, 95%, 45%)",
92
+ "const-color-info-700": "hsl(202, 95%, 35%)",
93
+ "const-color-info-800": "hsl(202, 95%, 25%)",
94
+ "const-color-info-900": "hsl(202, 95%, 15%)",
95
+ "const-color-info-950": "hsl(202, 95%, 10%)",
96
+ "const-color-info": "$const-color-info-500",
97
97
  };
98
98
  exports.grayThemeColors = {
99
99
  // --- Default surface color shades (form white to black)
100
- "color-surface-50": "hsl(0, 0%, 98%)",
101
- "color-surface-100": "hsl(0, 0%, 95%)",
102
- "color-surface-200": "hsl(0, 0%, 83%)",
103
- "color-surface-300": "hsl(0, 0%, 75%)",
104
- "color-surface-400": "hsl(0, 0%, 63%)",
105
- "color-surface-500": "hsl(0, 0%, 70%)", // #B2B2B2
106
- "color-surface-600": "hsl(0, 0%, 60%)",
107
- "color-surface-700": "hsl(0, 0%, 50%)",
108
- "color-surface-800": "hsl(0, 0%, 40%)",
109
- "color-surface-900": "hsl(0, 0%, 30%)",
110
- "color-surface-950": "hsl(0, 0%, 20%)",
111
- "color-surface": "$color-surface-500",
100
+ "const-color-surface-50": "hsl(0, 0%, 98%)",
101
+ "const-color-surface-100": "hsl(0, 0%, 95%)",
102
+ "const-color-surface-200": "hsl(0, 0%, 83%)",
103
+ "const-color-surface-300": "hsl(0, 0%, 75%)",
104
+ "const-color-surface-400": "hsl(0, 0%, 63%)",
105
+ "const-color-surface-500": "hsl(0, 0%, 70%)", // #B2B2B2
106
+ "const-color-surface-600": "hsl(0, 0%, 60%)",
107
+ "const-color-surface-700": "hsl(0, 0%, 50%)",
108
+ "const-color-surface-800": "hsl(0, 0%, 40%)",
109
+ "const-color-surface-900": "hsl(0, 0%, 30%)",
110
+ "const-color-surface-950": "hsl(0, 0%, 20%)",
111
+ "const-color-surface": "$const-color-surface-500",
112
112
  // --- Primary color shades
113
- "color-primary-50": "hsl(0, 0%, 94.5%)",
114
- "color-primary-100": "hsl(0, 0%, 89.1%)",
115
- "color-primary-200": "hsl(0, 0%, 78.1%)",
116
- "color-primary-300": "hsl(0, 0%, 67.2%)",
117
- "color-primary-400": "hsl(0, 0%, 56.3%)",
118
- "color-primary-500": "hsl(0, 0%, 36.9%)", // #5E5E5E
119
- "color-primary-600": "hsl(0, 0%, 33%)",
120
- "color-primary-700": "hsl(0, 0%, 29%)",
121
- "color-primary-800": "hsl(0, 0%, 25%)",
122
- "color-primary-900": "hsl(0, 0%, 21%)",
123
- "color-primary-950": "hsl(0, 0%, 17%)",
124
- "color-primary": "$color-primary-500",
113
+ "const-color-primary-50": "hsl(0, 0%, 94.5%)",
114
+ "const-color-primary-100": "hsl(0, 0%, 89.1%)",
115
+ "const-color-primary-200": "hsl(0, 0%, 78.1%)",
116
+ "const-color-primary-300": "hsl(0, 0%, 67.2%)",
117
+ "const-color-primary-400": "hsl(0, 0%, 56.3%)",
118
+ "const-color-primary-500": "hsl(0, 0%, 36.9%)", // #5E5E5E
119
+ "const-color-primary-600": "hsl(0, 0%, 33%)",
120
+ "const-color-primary-700": "hsl(0, 0%, 29%)",
121
+ "const-color-primary-800": "hsl(0, 0%, 25%)",
122
+ "const-color-primary-900": "hsl(0, 0%, 21%)",
123
+ "const-color-primary-950": "hsl(0, 0%, 17%)",
124
+ "const-color-primary": "$const-color-primary-500",
125
125
  // --- Secondary color shades
126
- "color-secondary-50": "hsl(0, 0%, 94.5%)",
127
- "color-secondary-100": "hsl(0, 0%, 89.1%)",
128
- "color-secondary-200": "hsl(0, 0%, 78.1%)",
129
- "color-secondary-300": "hsl(0, 0%, 67.2%)",
130
- "color-secondary-400": "hsl(0, 0%, 56.3%)",
131
- "color-secondary-500": "hsl(0, 0%, 57.6%)", // #939393
132
- "color-secondary-600": "hsl(0, 0%, 52%)",
133
- "color-secondary-700": "hsl(0, 0%, 46%)",
134
- "color-secondary-800": "hsl(0, 0%, 40%)",
135
- "color-secondary-900": "hsl(0, 0%, 34%)",
136
- "color-secondary-950": "hsl(0, 0%, 28%)",
137
- "color-secondary": "$color-secondary-500",
126
+ "const-color-secondary-50": "hsl(0, 0%, 94.5%)",
127
+ "const-color-secondary-100": "hsl(0, 0%, 89.1%)",
128
+ "const-color-secondary-200": "hsl(0, 0%, 78.1%)",
129
+ "const-color-secondary-300": "hsl(0, 0%, 67.2%)",
130
+ "const-color-secondary-400": "hsl(0, 0%, 56.3%)",
131
+ "const-color-secondary-500": "hsl(0, 0%, 57.6%)", // #939393
132
+ "const-color-secondary-600": "hsl(0, 0%, 52%)",
133
+ "const-color-secondary-700": "hsl(0, 0%, 46%)",
134
+ "const-color-secondary-800": "hsl(0, 0%, 40%)",
135
+ "const-color-secondary-900": "hsl(0, 0%, 34%)",
136
+ "const-color-secondary-950": "hsl(0, 0%, 28%)",
137
+ "const-color-secondary": "$const-color-secondary-500",
138
138
  // --- Warning color shades
139
- "color-warn-50": "hsl(36, 85%, 93%)",
140
- "color-warn-100": "hsl(36, 85%, 86%)",
141
- "color-warn-200": "hsl(36, 85%, 72%)",
142
- "color-warn-300": "hsl(36, 85%, 58%)",
143
- "color-warn-400": "hsl(36, 85%, 44%)",
144
- "color-warn-500": "hsl(36, 85%, 56%)", // #EFA035
145
- "color-warn-600": "hsl(36, 85%, 50%)",
146
- "color-warn-700": "hsl(36, 85%, 44%)",
147
- "color-warn-800": "hsl(36, 85%, 38%)",
148
- "color-warn-900": "hsl(36, 85%, 32%)",
149
- "color-warn-950": "hsl(36, 85%, 26%)",
150
- "color-warn": "$color-warn-500",
139
+ "const-color-warn-50": "hsl(36, 85%, 93%)",
140
+ "const-color-warn-100": "hsl(36, 85%, 86%)",
141
+ "const-color-warn-200": "hsl(36, 85%, 72%)",
142
+ "const-color-warn-300": "hsl(36, 85%, 58%)",
143
+ "const-color-warn-400": "hsl(36, 85%, 44%)",
144
+ "const-color-warn-500": "hsl(36, 85%, 56%)", // #EFA035
145
+ "const-color-warn-600": "hsl(36, 85%, 50%)",
146
+ "const-color-warn-700": "hsl(36, 85%, 44%)",
147
+ "const-color-warn-800": "hsl(36, 85%, 38%)",
148
+ "const-color-warn-900": "hsl(36, 85%, 32%)",
149
+ "const-color-warn-950": "hsl(36, 85%, 26%)",
150
+ "const-color-warn": "$const-color-warn-500",
151
151
  // --- Danger color shades
152
- "color-danger-50": "hsl(18, 87%, 95%)",
153
- "color-danger-100": "hsl(18, 87%, 85%)",
154
- "color-danger-200": "hsl(18, 87%, 75%)",
155
- "color-danger-300": "hsl(18, 87%, 65%)",
156
- "color-danger-400": "hsl(18, 87%, 55%)",
157
- "color-danger-500": "hsl(18, 87%, 68%)", // #F58167
158
- "color-danger-600": "hsl(18, 87%, 60%)",
159
- "color-danger-700": "hsl(18, 87%, 50%)",
160
- "color-danger-800": "hsl(18, 87%, 40%)",
161
- "color-danger-900": "hsl(18, 87%, 30%)",
162
- "color-danger-950": "hsl(18, 87%, 20%)",
163
- "color-danger": "$color-danger-500",
164
- "color-attention": "$color-danger-500",
152
+ "const-color-danger-50": "hsl(18, 87%, 95%)",
153
+ "const-color-danger-100": "hsl(18, 87%, 85%)",
154
+ "const-color-danger-200": "hsl(18, 87%, 75%)",
155
+ "const-color-danger-300": "hsl(18, 87%, 65%)",
156
+ "const-color-danger-400": "hsl(18, 87%, 55%)",
157
+ "const-color-danger-500": "hsl(18, 87%, 68%)", // #F58167
158
+ "const-color-danger-600": "hsl(18, 87%, 60%)",
159
+ "const-color-danger-700": "hsl(18, 87%, 50%)",
160
+ "const-color-danger-800": "hsl(18, 87%, 40%)",
161
+ "const-color-danger-900": "hsl(18, 87%, 30%)",
162
+ "const-color-danger-950": "hsl(18, 87%, 20%)",
163
+ "const-color-danger": "$const-color-danger-500",
164
+ "const-color-attention": "$const-color-danger-500",
165
165
  // --- Success color shades
166
- "color-success-50": "hsl(168, 100%, 95%)",
167
- "color-success-100": "hsl(168, 100%, 85%)",
168
- "color-success-200": "hsl(168, 100%, 75%)",
169
- "color-success-300": "hsl(168, 100%, 65%)",
170
- "color-success-400": "hsl(168, 100%, 55%)",
171
- "color-success-500": "hsl(168, 100%, 39%)", // #00C896
172
- "color-success-600": "hsl(168, 100%, 35%)",
173
- "color-success-700": "hsl(168, 100%, 30%)",
174
- "color-success-800": "hsl(168, 100%, 25%)",
175
- "color-success-900": "hsl(168, 100%, 20%)",
176
- "color-success-950": "hsl(168, 100%, 15%)",
177
- "color-success": "$color-success-500",
178
- "color-info-50": "hsl(204, 98%, 95%)",
179
- "color-info-100": "hsl(204, 98%, 90%)",
180
- "color-info-200": "hsl(204, 98%, 80%)",
181
- "color-info-300": "hsl(204, 98%, 70%)",
182
- "color-info-400": "hsl(204, 98%, 60%)",
183
- "color-info-500": "hsl(204, 98%, 50%)", // #028ED9
184
- "color-info-600": "hsl(204, 98%, 45%)",
185
- "color-info-700": "hsl(204, 98%, 35%)",
186
- "color-info-800": "hsl(204, 98%, 25%)",
187
- "color-info-900": "hsl(204, 98%, 15%)",
188
- "color-info-950": "hsl(204, 98%, 10%)",
189
- "color-info": "$color-info-500",
166
+ "const-color-success-50": "hsl(168, 100%, 95%)",
167
+ "const-color-success-100": "hsl(168, 100%, 85%)",
168
+ "const-color-success-200": "hsl(168, 100%, 75%)",
169
+ "const-color-success-300": "hsl(168, 100%, 65%)",
170
+ "const-color-success-400": "hsl(168, 100%, 55%)",
171
+ "const-color-success-500": "hsl(168, 100%, 39%)", // #00C896
172
+ "const-color-success-600": "hsl(168, 100%, 35%)",
173
+ "const-color-success-700": "hsl(168, 100%, 30%)",
174
+ "const-color-success-800": "hsl(168, 100%, 25%)",
175
+ "const-color-success-900": "hsl(168, 100%, 20%)",
176
+ "const-color-success-950": "hsl(168, 100%, 15%)",
177
+ "const-color-success": "$const-color-success-500",
178
+ "const-color-info-50": "hsl(204, 98%, 95%)",
179
+ "const-color-info-100": "hsl(204, 98%, 90%)",
180
+ "const-color-info-200": "hsl(204, 98%, 80%)",
181
+ "const-color-info-300": "hsl(204, 98%, 70%)",
182
+ "const-color-info-400": "hsl(204, 98%, 60%)",
183
+ "const-color-info-500": "hsl(204, 98%, 50%)", // #028ED9
184
+ "const-color-info-600": "hsl(204, 98%, 45%)",
185
+ "const-color-info-700": "hsl(204, 98%, 35%)",
186
+ "const-color-info-800": "hsl(204, 98%, 25%)",
187
+ "const-color-info-900": "hsl(204, 98%, 15%)",
188
+ "const-color-info-950": "hsl(204, 98%, 10%)",
189
+ "const-color-info": "$const-color-info-500",
190
190
  };
191
191
  exports.orangeThemeColors = {
192
192
  // --- Default surface color shades (form white to black)
193
- "color-surface-50": "hsl(220, 3%, 98%)",
194
- "color-surface-100": "hsl(220, 3%, 95%)",
195
- "color-surface-200": "hsl(220, 3%, 83%)",
196
- "color-surface-300": "hsl(220, 3%, 75%)",
197
- "color-surface-400": "hsl(220, 3%, 63%)",
198
- "color-surface-500": "hsl(220, 3%, 63%)", // #9B9DA1
199
- "color-surface-600": "hsl(220, 3%, 60%)",
200
- "color-surface-700": "hsl(220, 3%, 50%)",
201
- "color-surface-800": "hsl(220, 3%, 40%)",
202
- "color-surface-900": "hsl(220, 3%, 30%)",
203
- "color-surface-950": "hsl(220, 3%, 20%)",
204
- "color-surface": "$color-surface-500",
193
+ "const-color-surface-50": "hsl(220, 3%, 98%)",
194
+ "const-color-surface-100": "hsl(220, 3%, 95%)",
195
+ "const-color-surface-200": "hsl(220, 3%, 83%)",
196
+ "const-color-surface-300": "hsl(220, 3%, 75%)",
197
+ "const-color-surface-400": "hsl(220, 3%, 63%)",
198
+ "const-color-surface-500": "hsl(220, 3%, 63%)", // #9B9DA1
199
+ "const-color-surface-600": "hsl(220, 3%, 60%)",
200
+ "const-color-surface-700": "hsl(220, 3%, 50%)",
201
+ "const-color-surface-800": "hsl(220, 3%, 40%)",
202
+ "const-color-surface-900": "hsl(220, 3%, 30%)",
203
+ "const-color-surface-950": "hsl(220, 3%, 20%)",
204
+ "const-color-surface": "$const-color-surface-500",
205
205
  // --- Primary color shades
206
- "color-primary-50": "hsl(36, 100%, 95%)",
207
- "color-primary-100": "hsl(36, 100%, 85%)",
208
- "color-primary-200": "hsl(36, 100%, 75%)",
209
- "color-primary-300": "hsl(36, 100%, 65%)",
210
- "color-primary-400": "hsl(36, 100%, 55%)",
211
- "color-primary-500": "hsl(36, 100%, 57%)", // #FFA328
212
- "color-primary-600": "hsl(36, 100%, 50%)",
213
- "color-primary-700": "hsl(36, 100%, 45%)",
214
- "color-primary-800": "hsl(36, 100%, 40%)",
215
- "color-primary-900": "hsl(36, 100%, 35%)",
216
- "color-primary-950": "hsl(36, 100%, 30%)",
217
- "color-primary": "$color-primary-500",
206
+ "const-color-primary-50": "hsl(36, 100%, 95%)",
207
+ "const-color-primary-100": "hsl(36, 100%, 85%)",
208
+ "const-color-primary-200": "hsl(36, 100%, 75%)",
209
+ "const-color-primary-300": "hsl(36, 100%, 65%)",
210
+ "const-color-primary-400": "hsl(36, 100%, 55%)",
211
+ "const-color-primary-500": "hsl(36, 100%, 57%)", // #FFA328
212
+ "const-color-primary-600": "hsl(36, 100%, 50%)",
213
+ "const-color-primary-700": "hsl(36, 100%, 45%)",
214
+ "const-color-primary-800": "hsl(36, 100%, 40%)",
215
+ "const-color-primary-900": "hsl(36, 100%, 35%)",
216
+ "const-color-primary-950": "hsl(36, 100%, 30%)",
217
+ "const-color-primary": "$const-color-primary-500",
218
218
  // --- Secondary color shades
219
- "color-secondary-50": "hsl(204, 33%, 94.5%)",
220
- "color-secondary-100": "hsl(204, 33%, 89.1%)",
221
- "color-secondary-200": "hsl(204, 33%, 78.1%)",
222
- "color-secondary-300": "hsl(204, 33%, 67.2%)",
223
- "color-secondary-400": "hsl(204, 33%, 56.3%)",
224
- "color-secondary-500": "hsl(204, 33%, 26%)",
225
- "color-secondary-600": "hsl(204, 33%, 23%)",
226
- "color-secondary-700": "hsl(204, 33%, 20%)",
227
- "color-secondary-800": "hsl(204, 33%, 17%)",
228
- "color-secondary-900": "hsl(204, 33%, 14%)",
229
- "color-secondary-950": "hsl(204, 33%, 11%)",
230
- "color-secondary": "$color-secondary-500",
219
+ "const-color-secondary-50": "hsl(204, 33%, 94.5%)",
220
+ "const-color-secondary-100": "hsl(204, 33%, 89.1%)",
221
+ "const-color-secondary-200": "hsl(204, 33%, 78.1%)",
222
+ "const-color-secondary-300": "hsl(204, 33%, 67.2%)",
223
+ "const-color-secondary-400": "hsl(204, 33%, 56.3%)",
224
+ "const-color-secondary-500": "hsl(204, 33%, 26%)",
225
+ "const-color-secondary-600": "hsl(204, 33%, 23%)",
226
+ "const-color-secondary-700": "hsl(204, 33%, 20%)",
227
+ "const-color-secondary-800": "hsl(204, 33%, 17%)",
228
+ "const-color-secondary-900": "hsl(204, 33%, 14%)",
229
+ "const-color-secondary-950": "hsl(204, 33%, 11%)",
230
+ "const-color-secondary": "$const-color-secondary-500",
231
231
  // --- Warning color shades (orange shades)
232
- "color-warn-50": "hsl(20, 100%, 95%)",
233
- "color-warn-100": "hsl(20, 100%, 85%)",
234
- "color-warn-200": "hsl(20, 100%, 75%)",
235
- "color-warn-300": "hsl(20, 100%, 65%)",
236
- "color-warn-400": "hsl(20, 100%, 55%)",
237
- "color-warn-500": "hsl(20, 100%, 55%)", // #FF6A1A
238
- "color-warn-600": "hsl(20, 100%, 45%)",
239
- "color-warn-700": "hsl(20, 100%, 40%)",
240
- "color-warn-800": "hsl(20, 100%, 35%)",
241
- "color-warn-900": "hsl(20, 100%, 30%)",
242
- "color-warn-950": "hsl(20, 100%, 25%)",
243
- "color-warn": "$color-warn-500",
232
+ "const-color-warn-50": "hsl(20, 100%, 95%)",
233
+ "const-color-warn-100": "hsl(20, 100%, 85%)",
234
+ "const-color-warn-200": "hsl(20, 100%, 75%)",
235
+ "const-color-warn-300": "hsl(20, 100%, 65%)",
236
+ "const-color-warn-400": "hsl(20, 100%, 55%)",
237
+ "const-color-warn-500": "hsl(20, 100%, 55%)", // #FF6A1A
238
+ "const-color-warn-600": "hsl(20, 100%, 45%)",
239
+ "const-color-warn-700": "hsl(20, 100%, 40%)",
240
+ "const-color-warn-800": "hsl(20, 100%, 35%)",
241
+ "const-color-warn-900": "hsl(20, 100%, 30%)",
242
+ "const-color-warn-950": "hsl(20, 100%, 25%)",
243
+ "const-color-warn": "$const-color-warn-500",
244
244
  // --- Danger color shades
245
- "color-danger-50": "hsl(0, 60%, 95%)",
246
- "color-danger-100": "hsl(0, 60%, 85%)",
247
- "color-danger-200": "hsl(0, 60%, 75%)",
248
- "color-danger-300": "hsl(0, 60%, 65%)",
249
- "color-danger-400": "hsl(0, 60%, 55%)",
250
- "color-danger-500": "hsl(0, 60%, 55%)", // #C35353
251
- "color-danger-600": "hsl(0, 60%, 45%)",
252
- "color-danger-700": "hsl(0, 60%, 40%)",
253
- "color-danger-800": "hsl(0, 60%, 35%)",
254
- "color-danger-900": "hsl(0, 60%, 30%)",
255
- "color-danger-950": "hsl(0, 60%, 25%)",
256
- "color-danger": "$color-danger-500",
257
- "color-attention": "$color-danger-500",
245
+ "const-color-danger-50": "hsl(0, 60%, 95%)",
246
+ "const-color-danger-100": "hsl(0, 60%, 85%)",
247
+ "const-color-danger-200": "hsl(0, 60%, 75%)",
248
+ "const-color-danger-300": "hsl(0, 60%, 65%)",
249
+ "const-color-danger-400": "hsl(0, 60%, 55%)",
250
+ "const-color-danger-500": "hsl(0, 60%, 55%)", // #C35353
251
+ "const-color-danger-600": "hsl(0, 60%, 45%)",
252
+ "const-color-danger-700": "hsl(0, 60%, 40%)",
253
+ "const-color-danger-800": "hsl(0, 60%, 35%)",
254
+ "const-color-danger-900": "hsl(0, 60%, 30%)",
255
+ "const-color-danger-950": "hsl(0, 60%, 25%)",
256
+ "const-color-danger": "$const-color-danger-500",
257
+ "const-color-attention": "$const-color-danger-500",
258
258
  // --- Success color shades
259
- "color-success-50": "hsl(134, 38%, 95%)",
260
- "color-success-100": "hsl(134, 38%, 85%)",
261
- "color-success-200": "hsl(134, 38%, 75%)",
262
- "color-success-300": "hsl(134, 38%, 65%)",
263
- "color-success-400": "hsl(134, 38%, 55%)",
264
- "color-success-500": "hsl(134, 38%, 45%)", // #49984E
265
- "color-success-600": "hsl(134, 38%, 40%)",
266
- "color-success-700": "hsl(134, 38%, 35%)",
267
- "color-success-800": "hsl(134, 38%, 30%)",
268
- "color-success-900": "hsl(134, 38%, 25%)",
269
- "color-success-950": "hsl(134, 38%, 20%)",
270
- "color-success": "$color-success-500",
271
- "color-info-50": "hsl(197, 100%, 95%)",
272
- "color-info-100": "hsl(197, 100%, 90%)",
273
- "color-info-200": "hsl(197, 100%, 80%)",
274
- "color-info-300": "hsl(197, 100%, 70%)",
275
- "color-info-400": "hsl(197, 100%, 60%)",
276
- "color-info-500": "hsl(197, 100%, 50%)", // #009BCF
277
- "color-info-600": "hsl(197, 100%, 45%)",
278
- "color-info-700": "hsl(197, 100%, 35%)",
279
- "color-info-800": "hsl(197, 100%, 25%)",
280
- "color-info-900": "hsl(197, 100%, 15%)",
281
- "color-info-950": "hsl(197, 100%, 10%)",
282
- "color-info": "$color-info-500",
259
+ "const-color-success-50": "hsl(134, 38%, 95%)",
260
+ "const-color-success-100": "hsl(134, 38%, 85%)",
261
+ "const-color-success-200": "hsl(134, 38%, 75%)",
262
+ "const-color-success-300": "hsl(134, 38%, 65%)",
263
+ "const-color-success-400": "hsl(134, 38%, 55%)",
264
+ "const-color-success-500": "hsl(134, 38%, 45%)", // #49984E
265
+ "const-color-success-600": "hsl(134, 38%, 40%)",
266
+ "const-color-success-700": "hsl(134, 38%, 35%)",
267
+ "const-color-success-800": "hsl(134, 38%, 30%)",
268
+ "const-color-success-900": "hsl(134, 38%, 25%)",
269
+ "const-color-success-950": "hsl(134, 38%, 20%)",
270
+ "const-color-success": "$const-color-success-500",
271
+ "const-color-info-50": "hsl(197, 100%, 95%)",
272
+ "const-color-info-100": "hsl(197, 100%, 90%)",
273
+ "const-color-info-200": "hsl(197, 100%, 80%)",
274
+ "const-color-info-300": "hsl(197, 100%, 70%)",
275
+ "const-color-info-400": "hsl(197, 100%, 60%)",
276
+ "const-color-info-500": "hsl(197, 100%, 50%)", // #009BCF
277
+ "const-color-info-600": "hsl(197, 100%, 45%)",
278
+ "const-color-info-700": "hsl(197, 100%, 35%)",
279
+ "const-color-info-800": "hsl(197, 100%, 25%)",
280
+ "const-color-info-900": "hsl(197, 100%, 15%)",
281
+ "const-color-info-950": "hsl(197, 100%, 10%)",
282
+ "const-color-info": "$const-color-info-500",
283
283
  };
284
284
  exports.purpleThemeColors = {
285
285
  // --- Default surface color shades (form white to black)
286
- "color-surface-50": "hsl(0, 0%, 96%)",
287
- "color-surface-100": "hsl(0, 0%, 90%)",
288
- "color-surface-200": "hsl(0, 0%, 80%)",
289
- "color-surface-300": "hsl(0, 0%, 70%)",
290
- "color-surface-400": "hsl(0, 0%, 60%)",
291
- "color-surface-500": "hsl(0, 0%, 59%)", // #969696
292
- "color-surface-600": "hsl(0, 0%, 50%)",
293
- "color-surface-700": "hsl(0, 0%, 40%)",
294
- "color-surface-800": "hsl(0, 0%, 30%)",
295
- "color-surface-900": "hsl(0, 0%, 20%)",
296
- "color-surface-950": "hsl(0, 0%, 10%)",
297
- "color-surface": "$color-surface-500",
286
+ "const-color-surface-50": "hsl(0, 0%, 96%)",
287
+ "const-color-surface-100": "hsl(0, 0%, 90%)",
288
+ "const-color-surface-200": "hsl(0, 0%, 80%)",
289
+ "const-color-surface-300": "hsl(0, 0%, 70%)",
290
+ "const-color-surface-400": "hsl(0, 0%, 60%)",
291
+ "const-color-surface-500": "hsl(0, 0%, 59%)", // #969696
292
+ "const-color-surface-600": "hsl(0, 0%, 50%)",
293
+ "const-color-surface-700": "hsl(0, 0%, 40%)",
294
+ "const-color-surface-800": "hsl(0, 0%, 30%)",
295
+ "const-color-surface-900": "hsl(0, 0%, 20%)",
296
+ "const-color-surface-950": "hsl(0, 0%, 10%)",
297
+ "const-color-surface": "$const-color-surface-500",
298
298
  // --- Primary color shades (purple)
299
- "color-primary-50": "hsl(300, 42%, 95%)",
300
- "color-primary-100": "hsl(300, 42%, 85%)",
301
- "color-primary-200": "hsl(300, 42%, 75%)",
302
- "color-primary-300": "hsl(300, 42%, 65%)",
303
- "color-primary-400": "hsl(300, 42%, 55%)",
304
- "color-primary-500": "hsl(300, 42%, 31%)", // #702F72
305
- "color-primary-600": "hsl(300, 42%, 28%)",
306
- "color-primary-700": "hsl(300, 42%, 25%)",
307
- "color-primary-800": "hsl(300, 42%, 22%)",
308
- "color-primary-900": "hsl(300, 42%, 19%)",
309
- "color-primary-950": "hsl(300, 42%, 16%)",
310
- "color-primary": "$color-primary-500",
311
- "color-secondary-50": "hsl(204, 100%, 95%)",
312
- "color-secondary-100": "hsl(204, 100%, 85%)",
313
- "color-secondary-200": "hsl(204, 100%, 75%)",
314
- "color-secondary-300": "hsl(204, 100%, 65%)",
315
- "color-secondary-400": "hsl(204, 100%, 55%)",
316
- "color-secondary-500": "hsl(204, 100%, 38%)", // #0071C6
317
- "color-secondary-600": "hsl(204, 100%, 35%)",
318
- "color-secondary-700": "hsl(204, 100%, 30%)",
319
- "color-secondary-800": "hsl(204, 100%, 25%)",
320
- "color-secondary-900": "hsl(204, 100%, 20%)",
321
- "color-secondary-950": "hsl(204, 100%, 15%)",
322
- "color-secondary": "$color-secondary-500",
299
+ "const-color-primary-50": "hsl(300, 42%, 95%)",
300
+ "const-color-primary-100": "hsl(300, 42%, 85%)",
301
+ "const-color-primary-200": "hsl(300, 42%, 75%)",
302
+ "const-color-primary-300": "hsl(300, 42%, 65%)",
303
+ "const-color-primary-400": "hsl(300, 42%, 55%)",
304
+ "const-color-primary-500": "hsl(300, 42%, 31%)", // #702F72
305
+ "const-color-primary-600": "hsl(300, 42%, 28%)",
306
+ "const-color-primary-700": "hsl(300, 42%, 25%)",
307
+ "const-color-primary-800": "hsl(300, 42%, 22%)",
308
+ "const-color-primary-900": "hsl(300, 42%, 19%)",
309
+ "const-color-primary-950": "hsl(300, 42%, 16%)",
310
+ "const-color-primary": "$const-color-primary-500",
311
+ "const-color-secondary-50": "hsl(204, 100%, 95%)",
312
+ "const-color-secondary-100": "hsl(204, 100%, 85%)",
313
+ "const-color-secondary-200": "hsl(204, 100%, 75%)",
314
+ "const-color-secondary-300": "hsl(204, 100%, 65%)",
315
+ "const-color-secondary-400": "hsl(204, 100%, 55%)",
316
+ "const-color-secondary-500": "hsl(204, 100%, 38%)", // #0071C6
317
+ "const-color-secondary-600": "hsl(204, 100%, 35%)",
318
+ "const-color-secondary-700": "hsl(204, 100%, 30%)",
319
+ "const-color-secondary-800": "hsl(204, 100%, 25%)",
320
+ "const-color-secondary-900": "hsl(204, 100%, 20%)",
321
+ "const-color-secondary-950": "hsl(204, 100%, 15%)",
322
+ "const-color-secondary": "$const-color-secondary-500",
323
323
  // --- Warning color shades
324
- "color-warn-50": "hsl(20, 95%, 95%)",
325
- "color-warn-100": "hsl(20, 95%, 85%)",
326
- "color-warn-200": "hsl(20, 95%, 75%)",
327
- "color-warn-300": "hsl(20, 95%, 65%)",
328
- "color-warn-400": "hsl(20, 95%, 55%)",
329
- "color-warn-500": "hsl(20, 95%, 66%)", // #FB8D5C
330
- "color-warn-600": "hsl(20, 95%, 60%)",
331
- "color-warn-700": "hsl(20, 95%, 55%)",
332
- "color-warn-800": "hsl(20, 95%, 50%)",
333
- "color-warn-900": "hsl(20, 95%, 45%)",
334
- "color-warn-950": "hsl(20, 95%, 40%)",
335
- "color-warn": "$color-warn-500",
324
+ "const-color-warn-50": "hsl(20, 95%, 95%)",
325
+ "const-color-warn-100": "hsl(20, 95%, 85%)",
326
+ "const-color-warn-200": "hsl(20, 95%, 75%)",
327
+ "const-color-warn-300": "hsl(20, 95%, 65%)",
328
+ "const-color-warn-400": "hsl(20, 95%, 55%)",
329
+ "const-color-warn-500": "hsl(20, 95%, 66%)", // #FB8D5C
330
+ "const-color-warn-600": "hsl(20, 95%, 60%)",
331
+ "const-color-warn-700": "hsl(20, 95%, 55%)",
332
+ "const-color-warn-800": "hsl(20, 95%, 50%)",
333
+ "const-color-warn-900": "hsl(20, 95%, 45%)",
334
+ "const-color-warn-950": "hsl(20, 95%, 40%)",
335
+ "const-color-warn": "$const-color-warn-500",
336
336
  // --- Danger color shades
337
- "color-danger-50": "hsl(355, 65%, 95%)",
338
- "color-danger-100": "hsl(355, 65%, 85%)",
339
- "color-danger-200": "hsl(355, 65%, 75%)",
340
- "color-danger-300": "hsl(355, 65%, 65%)",
341
- "color-danger-400": "hsl(355, 65%, 55%)",
342
- "color-danger-500": "hsl(355, 65%, 60%)", // #DE5F68
343
- "color-danger-600": "hsl(355, 65%, 50%)",
344
- "color-danger-700": "hsl(355, 65%, 45%)",
345
- "color-danger-800": "hsl(355, 65%, 40%)",
346
- "color-danger-900": "hsl(355, 65%, 35%)",
347
- "color-danger-950": "hsl(355, 65%, 30%)",
348
- "color-danger": "$color-danger-500",
349
- "color-attention": "$color-danger-500",
337
+ "const-color-danger-50": "hsl(355, 65%, 95%)",
338
+ "const-color-danger-100": "hsl(355, 65%, 85%)",
339
+ "const-color-danger-200": "hsl(355, 65%, 75%)",
340
+ "const-color-danger-300": "hsl(355, 65%, 65%)",
341
+ "const-color-danger-400": "hsl(355, 65%, 55%)",
342
+ "const-color-danger-500": "hsl(355, 65%, 60%)", // #DE5F68
343
+ "const-color-danger-600": "hsl(355, 65%, 50%)",
344
+ "const-color-danger-700": "hsl(355, 65%, 45%)",
345
+ "const-color-danger-800": "hsl(355, 65%, 40%)",
346
+ "const-color-danger-900": "hsl(355, 65%, 35%)",
347
+ "const-color-danger-950": "hsl(355, 65%, 30%)",
348
+ "const-color-danger": "$const-color-danger-500",
349
+ "const-color-attention": "$const-color-danger-500",
350
350
  // --- Success color shades (greenish)
351
- "color-success-50": "hsl(178, 100%, 95%)",
352
- "color-success-100": "hsl(178, 100%, 85%)",
353
- "color-success-200": "hsl(178, 100%, 75%)",
354
- "color-success-300": "hsl(178, 100%, 65%)",
355
- "color-success-400": "hsl(178, 100%, 55%)",
356
- "color-success-500": "hsl(178, 100%, 27%)", // #008B88
357
- "color-success-600": "hsl(178, 100%, 36%)",
358
- "color-success-700": "hsl(178, 100%, 32%)",
359
- "color-success-800": "hsl(178, 100%, 28%)",
360
- "color-success-900": "hsl(178, 100%, 24%)",
361
- "color-success-950": "hsl(178, 100%, 20%)",
362
- "color-success": "$color-success-500",
363
- "color-info-50": "hsl(183, 66%, 92%)",
364
- "color-info-100": "hsl(183, 66%, 84%)",
365
- "color-info-200": "hsl(183, 66%, 76%)",
366
- "color-info-300": "hsl(183, 66%, 68%)",
367
- "color-info-400": "hsl(183, 66%, 60%)",
368
- "color-info-500": "hsl(183, 66%, 50%)", // #25C2C7
369
- "color-info-600": "hsl(183, 66%, 45%)",
370
- "color-info-700": "hsl(183, 66%, 35%)",
371
- "color-info-800": "hsl(183, 66%, 25%)",
372
- "color-info-900": "hsl(183, 66%, 15%)",
373
- "color-info-950": "hsl(183, 66%, 10%)",
374
- "color-info": "$color-info-500",
351
+ "const-color-success-50": "hsl(178, 100%, 95%)",
352
+ "const-color-success-100": "hsl(178, 100%, 85%)",
353
+ "const-color-success-200": "hsl(178, 100%, 75%)",
354
+ "const-color-success-300": "hsl(178, 100%, 65%)",
355
+ "const-color-success-400": "hsl(178, 100%, 55%)",
356
+ "const-color-success-500": "hsl(178, 100%, 27%)", // #008B88
357
+ "const-color-success-600": "hsl(178, 100%, 36%)",
358
+ "const-color-success-700": "hsl(178, 100%, 32%)",
359
+ "const-color-success-800": "hsl(178, 100%, 28%)",
360
+ "const-color-success-900": "hsl(178, 100%, 24%)",
361
+ "const-color-success-950": "hsl(178, 100%, 20%)",
362
+ "const-color-success": "$const-color-success-500",
363
+ "const-color-info-50": "hsl(183, 66%, 92%)",
364
+ "const-color-info-100": "hsl(183, 66%, 84%)",
365
+ "const-color-info-200": "hsl(183, 66%, 76%)",
366
+ "const-color-info-300": "hsl(183, 66%, 68%)",
367
+ "const-color-info-400": "hsl(183, 66%, 60%)",
368
+ "const-color-info-500": "hsl(183, 66%, 50%)", // #25C2C7
369
+ "const-color-info-600": "hsl(183, 66%, 45%)",
370
+ "const-color-info-700": "hsl(183, 66%, 35%)",
371
+ "const-color-info-800": "hsl(183, 66%, 25%)",
372
+ "const-color-info-900": "hsl(183, 66%, 15%)",
373
+ "const-color-info-950": "hsl(183, 66%, 10%)",
374
+ "const-color-info": "$const-color-info-500",
375
375
  };
376
376
  exports.cyanThemeColors = {
377
377
  // ---
378
- "color-surface-50": "hsl(180, 15%, 95%)",
379
- "color-surface-100": "hsl(180, 15%, 85%)",
380
- "color-surface-200": "hsl(180, 15%, 75%)",
381
- "color-surface-300": "hsl(180, 15%, 65%)",
382
- "color-surface-400": "hsl(180, 15%, 55%)",
383
- "color-surface-500": "hsl(180, 15%, 52%)", // #709A99
384
- "color-surface-600": "hsl(180, 15%, 45%)",
385
- "color-surface-700": "hsl(180, 15%, 40%)",
386
- "color-surface-800": "hsl(180, 15%, 35%)",
387
- "color-surface-900": "hsl(180, 15%, 30%)",
388
- "color-surface-950": "hsl(180, 15%, 25%)",
389
- "color-surface": "$color-surface-500",
378
+ "const-color-surface-50": "hsl(180, 15%, 95%)",
379
+ "const-color-surface-100": "hsl(180, 15%, 85%)",
380
+ "const-color-surface-200": "hsl(180, 15%, 75%)",
381
+ "const-color-surface-300": "hsl(180, 15%, 65%)",
382
+ "const-color-surface-400": "hsl(180, 15%, 55%)",
383
+ "const-color-surface-500": "hsl(180, 15%, 52%)", // #709A99
384
+ "const-color-surface-600": "hsl(180, 15%, 45%)",
385
+ "const-color-surface-700": "hsl(180, 15%, 40%)",
386
+ "const-color-surface-800": "hsl(180, 15%, 35%)",
387
+ "const-color-surface-900": "hsl(180, 15%, 30%)",
388
+ "const-color-surface-950": "hsl(180, 15%, 25%)",
389
+ "const-color-surface": "$const-color-surface-500",
390
390
  // --- Primary color shades
391
- "color-primary-50": "hsl(180, 100%, 95%)",
392
- "color-primary-100": "hsl(180, 100%, 85%)",
393
- "color-primary-200": "hsl(180, 100%, 75%)",
394
- "color-primary-300": "hsl(180, 100%, 65%)",
395
- "color-primary-400": "hsl(180, 100%, 55%)",
396
- "color-primary-500": "hsl(180, 100%, 35%)", // #00B5B5
397
- "color-primary-600": "hsl(180, 100%, 32%)",
398
- "color-primary-700": "hsl(180, 100%, 28%)",
399
- "color-primary-800": "hsl(180, 100%, 24%)",
400
- "color-primary-900": "hsl(180, 100%, 20%)",
401
- "color-primary-950": "hsl(180, 100%, 16%)",
402
- "color-primary": "$color-primary-500",
391
+ "const-color-primary-50": "hsl(180, 100%, 95%)",
392
+ "const-color-primary-100": "hsl(180, 100%, 85%)",
393
+ "const-color-primary-200": "hsl(180, 100%, 75%)",
394
+ "const-color-primary-300": "hsl(180, 100%, 65%)",
395
+ "const-color-primary-400": "hsl(180, 100%, 55%)",
396
+ "const-color-primary-500": "hsl(180, 100%, 35%)", // #00B5B5
397
+ "const-color-primary-600": "hsl(180, 100%, 32%)",
398
+ "const-color-primary-700": "hsl(180, 100%, 28%)",
399
+ "const-color-primary-800": "hsl(180, 100%, 24%)",
400
+ "const-color-primary-900": "hsl(180, 100%, 20%)",
401
+ "const-color-primary-950": "hsl(180, 100%, 16%)",
402
+ "const-color-primary": "$const-color-primary-500",
403
403
  // --- Secondary color shades
404
- "color-secondary-50": "hsl(227, 60%, 95%)",
405
- "color-secondary-100": "hsl(227, 60%, 85%)",
406
- "color-secondary-200": "hsl(227, 60%, 75%)",
407
- "color-secondary-300": "hsl(227, 60%, 65%)",
408
- "color-secondary-400": "hsl(227, 60%, 55%)",
409
- "color-secondary-500": "hsl(227, 60%, 45%)", // #3450AC
410
- "color-secondary-600": "hsl(227, 60%, 40%)",
411
- "color-secondary-700": "hsl(227, 60%, 35%)",
412
- "color-secondary-800": "hsl(227, 60%, 30%)",
413
- "color-secondary-900": "hsl(227, 60%, 25%)",
414
- "color-secondary-950": "hsl(227, 60%, 20%)",
415
- "color-secondary": "$color-secondary-500",
404
+ "const-color-secondary-50": "hsl(227, 60%, 95%)",
405
+ "const-color-secondary-100": "hsl(227, 60%, 85%)",
406
+ "const-color-secondary-200": "hsl(227, 60%, 75%)",
407
+ "const-color-secondary-300": "hsl(227, 60%, 65%)",
408
+ "const-color-secondary-400": "hsl(227, 60%, 55%)",
409
+ "const-color-secondary-500": "hsl(227, 60%, 45%)", // #3450AC
410
+ "const-color-secondary-600": "hsl(227, 60%, 40%)",
411
+ "const-color-secondary-700": "hsl(227, 60%, 35%)",
412
+ "const-color-secondary-800": "hsl(227, 60%, 30%)",
413
+ "const-color-secondary-900": "hsl(227, 60%, 25%)",
414
+ "const-color-secondary-950": "hsl(227, 60%, 20%)",
415
+ "const-color-secondary": "$const-color-secondary-500",
416
416
  // --- Warning color shades (orange shades)
417
- "color-warn-50": "hsl(20, 100%, 95%)",
418
- "color-warn-100": "hsl(20, 100%, 85%)",
419
- "color-warn-200": "hsl(20, 100%, 75%)",
420
- "color-warn-300": "hsl(20, 100%, 65%)",
421
- "color-warn-400": "hsl(20, 100%, 55%)",
422
- "color-warn-500": "hsl(20, 98%, 56%)", // #FE631E
423
- "color-warn-600": "hsl(20, 100%, 50%)",
424
- "color-warn-700": "hsl(20, 100%, 45%)",
425
- "color-warn-800": "hsl(20, 100%, 40%)",
426
- "color-warn-900": "hsl(20, 100%, 35%)",
427
- "color-warn-950": "hsl(20, 100%, 30%)",
428
- "color-warn": "$color-warn-500",
417
+ "const-color-warn-50": "hsl(20, 100%, 95%)",
418
+ "const-color-warn-100": "hsl(20, 100%, 85%)",
419
+ "const-color-warn-200": "hsl(20, 100%, 75%)",
420
+ "const-color-warn-300": "hsl(20, 100%, 65%)",
421
+ "const-color-warn-400": "hsl(20, 100%, 55%)",
422
+ "const-color-warn-500": "hsl(20, 98%, 56%)", // #FE631E
423
+ "const-color-warn-600": "hsl(20, 100%, 50%)",
424
+ "const-color-warn-700": "hsl(20, 100%, 45%)",
425
+ "const-color-warn-800": "hsl(20, 100%, 40%)",
426
+ "const-color-warn-900": "hsl(20, 100%, 35%)",
427
+ "const-color-warn-950": "hsl(20, 100%, 30%)",
428
+ "const-color-warn": "$const-color-warn-500",
429
429
  // --- Danger color shades (reddish)
430
- "color-danger-50": "hsl(356, 100%, 95%)",
431
- "color-danger-100": "hsl(356, 100%, 85%)",
432
- "color-danger-200": "hsl(356, 100%, 75%)",
433
- "color-danger-300": "hsl(356, 100%, 65%)",
434
- "color-danger-400": "hsl(356, 100%, 55%)",
435
- "color-danger-500": "hsl(356, 97%, 55%)", // #FD3D4B
436
- "color-danger-600": "hsl(356, 100%, 50%)",
437
- "color-danger-700": "hsl(356, 100%, 45%)",
438
- "color-danger-800": "hsl(356, 100%, 40%)",
439
- "color-danger-900": "hsl(356, 100%, 35%)",
440
- "color-danger-950": "hsl(356, 100%, 30%)",
441
- "color-danger": "$color-danger-600",
442
- "color-attention": "$color-danger-500",
430
+ "const-color-danger-50": "hsl(356, 100%, 95%)",
431
+ "const-color-danger-100": "hsl(356, 100%, 85%)",
432
+ "const-color-danger-200": "hsl(356, 100%, 75%)",
433
+ "const-color-danger-300": "hsl(356, 100%, 65%)",
434
+ "const-color-danger-400": "hsl(356, 100%, 55%)",
435
+ "const-color-danger-500": "hsl(356, 97%, 55%)", // #FD3D4B
436
+ "const-color-danger-600": "hsl(356, 100%, 50%)",
437
+ "const-color-danger-700": "hsl(356, 100%, 45%)",
438
+ "const-color-danger-800": "hsl(356, 100%, 40%)",
439
+ "const-color-danger-900": "hsl(356, 100%, 35%)",
440
+ "const-color-danger-950": "hsl(356, 100%, 30%)",
441
+ "const-color-danger": "$const-color-danger-600",
442
+ "const-color-attention": "$const-color-danger-500",
443
443
  // --- Success color shades (greenish)
444
- "color-success-50": "hsl(168, 80%, 95%)",
445
- "color-success-100": "hsl(168, 80%, 85%)",
446
- "color-success-200": "hsl(168, 80%, 75%)",
447
- "color-success-300": "hsl(168, 80%, 65%)",
448
- "color-success-400": "hsl(168, 80%, 55%)",
449
- "color-success-500": "hsl(168, 82%, 28%)", // #0C846C
450
- "color-success-600": "hsl(168, 80%, 25%)",
451
- "color-success-700": "hsl(168, 80%, 22%)",
452
- "color-success-800": "hsl(168, 80%, 19%)",
453
- "color-success-900": "hsl(168, 80%, 16%)",
454
- "color-success-950": "hsl(168, 80%, 13%)",
455
- "color-success": "$color-success-500",
456
- "color-info-50": "hsl(204, 100%, 92%)",
457
- "color-info-100": "hsl(204, 100%, 84%)",
458
- "color-info-200": "hsl(204, 100%, 76%)",
459
- "color-info-300": "hsl(204, 100%, 68%)",
460
- "color-info-400": "hsl(204, 100%, 60%)",
461
- "color-info-500": "hsl(204, 100%, 50%)", // #23B2FF
462
- "color-info-600": "hsl(204, 100%, 45%)",
463
- "color-info-700": "hsl(204, 100%, 35%)",
464
- "color-info-800": "hsl(204, 100%, 25%)",
465
- "color-info-900": "hsl(204, 100%, 15%)",
466
- "color-info-950": "hsl(204, 100%, 10%)",
467
- "color-info": "$color-info-500",
444
+ "const-color-success-50": "hsl(168, 80%, 95%)",
445
+ "const-color-success-100": "hsl(168, 80%, 85%)",
446
+ "const-color-success-200": "hsl(168, 80%, 75%)",
447
+ "const-color-success-300": "hsl(168, 80%, 65%)",
448
+ "const-color-success-400": "hsl(168, 80%, 55%)",
449
+ "const-color-success-500": "hsl(168, 82%, 28%)", // #0C846C
450
+ "const-color-success-600": "hsl(168, 80%, 25%)",
451
+ "const-color-success-700": "hsl(168, 80%, 22%)",
452
+ "const-color-success-800": "hsl(168, 80%, 19%)",
453
+ "const-color-success-900": "hsl(168, 80%, 16%)",
454
+ "const-color-success-950": "hsl(168, 80%, 13%)",
455
+ "const-color-success": "$const-color-success-500",
456
+ "const-color-info-50": "hsl(204, 100%, 92%)",
457
+ "const-color-info-100": "hsl(204, 100%, 84%)",
458
+ "const-color-info-200": "hsl(204, 100%, 76%)",
459
+ "const-color-info-300": "hsl(204, 100%, 68%)",
460
+ "const-color-info-400": "hsl(204, 100%, 60%)",
461
+ "const-color-info-500": "hsl(204, 100%, 50%)", // #23B2FF
462
+ "const-color-info-600": "hsl(204, 100%, 45%)",
463
+ "const-color-info-700": "hsl(204, 100%, 35%)",
464
+ "const-color-info-800": "hsl(204, 100%, 25%)",
465
+ "const-color-info-900": "hsl(204, 100%, 15%)",
466
+ "const-color-info-950": "hsl(204, 100%, 10%)",
467
+ "const-color-info": "$const-color-info-500",
468
468
  };
469
469
  exports.redThemeColors = {
470
470
  // ---
471
- "color-surface-50": "hsl(0, 0%, 95%)",
472
- "color-surface-100": "hsl(0, 0%, 85%)",
473
- "color-surface-200": "hsl(0, 0%, 75%)",
474
- "color-surface-300": "hsl(0, 0%, 65%)",
475
- "color-surface-400": "hsl(0, 0%, 55%)",
476
- "color-surface-500": "hsl(0, 0%, 50%)", // #7F7F7F
477
- "color-surface-600": "hsl(0, 0%, 45%)",
478
- "color-surface-700": "hsl(0, 0%, 40%)",
479
- "color-surface-800": "hsl(0, 0%, 35%)",
480
- "color-surface-900": "hsl(0, 0%, 30%)",
481
- "color-surface-950": "hsl(0, 0%, 25%)",
482
- "color-surface": "$color-surface-500",
471
+ "const-color-surface-50": "hsl(0, 0%, 95%)",
472
+ "const-color-surface-100": "hsl(0, 0%, 85%)",
473
+ "const-color-surface-200": "hsl(0, 0%, 75%)",
474
+ "const-color-surface-300": "hsl(0, 0%, 65%)",
475
+ "const-color-surface-400": "hsl(0, 0%, 55%)",
476
+ "const-color-surface-500": "hsl(0, 0%, 50%)", // #7F7F7F
477
+ "const-color-surface-600": "hsl(0, 0%, 45%)",
478
+ "const-color-surface-700": "hsl(0, 0%, 40%)",
479
+ "const-color-surface-800": "hsl(0, 0%, 35%)",
480
+ "const-color-surface-900": "hsl(0, 0%, 30%)",
481
+ "const-color-surface-950": "hsl(0, 0%, 25%)",
482
+ "const-color-surface": "$const-color-surface-500",
483
483
  // --- Primary color shades
484
- "color-primary-50": "hsl(354, 89%, 95%)",
485
- "color-primary-100": "hsl(354, 89%, 85%)",
486
- "color-primary-200": "hsl(354, 89%, 75%)",
487
- "color-primary-300": "hsl(354, 89%, 65%)",
488
- "color-primary-400": "hsl(354, 89%, 55%)",
489
- "color-primary-500": "hsl(354, 89%, 63%)", // #F85367
490
- "color-primary-600": "hsl(354, 89%, 50%)",
491
- "color-primary-700": "hsl(354, 89%, 45%)",
492
- "color-primary-800": "hsl(354, 89%, 40%)",
493
- "color-primary-900": "hsl(354, 89%, 35%)",
494
- "color-primary-950": "hsl(354, 89%, 30%)",
495
- "color-primary": "$color-primary-500",
484
+ "const-color-primary-50": "hsl(354, 89%, 95%)",
485
+ "const-color-primary-100": "hsl(354, 89%, 85%)",
486
+ "const-color-primary-200": "hsl(354, 89%, 75%)",
487
+ "const-color-primary-300": "hsl(354, 89%, 65%)",
488
+ "const-color-primary-400": "hsl(354, 89%, 55%)",
489
+ "const-color-primary-500": "hsl(354, 89%, 63%)", // #F85367
490
+ "const-color-primary-600": "hsl(354, 89%, 50%)",
491
+ "const-color-primary-700": "hsl(354, 89%, 45%)",
492
+ "const-color-primary-800": "hsl(354, 89%, 40%)",
493
+ "const-color-primary-900": "hsl(354, 89%, 35%)",
494
+ "const-color-primary-950": "hsl(354, 89%, 30%)",
495
+ "const-color-primary": "$const-color-primary-500",
496
496
  // --- Secondary color shades (steel-bluish)
497
- "color-secondary-50": "hsl(210, 64%, 95%)",
498
- "color-secondary-100": "hsl(210, 64%, 85%)",
499
- "color-secondary-200": "hsl(210, 64%, 75%)",
500
- "color-secondary-300": "hsl(210, 64%, 65%)",
501
- "color-secondary-400": "hsl(210, 64%, 55%)",
502
- "color-secondary-500": "hsl(210, 64%, 39%)", // #153F65
503
- "color-secondary-600": "hsl(210, 64%, 35%)",
504
- "color-secondary-700": "hsl(210, 64%, 30%)",
505
- "color-secondary-800": "hsl(210, 64%, 25%)",
506
- "color-secondary-900": "hsl(210, 64%, 20%)",
507
- "color-secondary-950": "hsl(210, 64%, 15%)",
508
- "color-secondary": "$color-secondary-500",
497
+ "const-color-secondary-50": "hsl(210, 64%, 95%)",
498
+ "const-color-secondary-100": "hsl(210, 64%, 85%)",
499
+ "const-color-secondary-200": "hsl(210, 64%, 75%)",
500
+ "const-color-secondary-300": "hsl(210, 64%, 65%)",
501
+ "const-color-secondary-400": "hsl(210, 64%, 55%)",
502
+ "const-color-secondary-500": "hsl(210, 64%, 39%)", // #153F65
503
+ "const-color-secondary-600": "hsl(210, 64%, 35%)",
504
+ "const-color-secondary-700": "hsl(210, 64%, 30%)",
505
+ "const-color-secondary-800": "hsl(210, 64%, 25%)",
506
+ "const-color-secondary-900": "hsl(210, 64%, 20%)",
507
+ "const-color-secondary-950": "hsl(210, 64%, 15%)",
508
+ "const-color-secondary": "$const-color-secondary-500",
509
509
  // --- Warning color shades
510
- "color-warn-50": "hsl(36, 85%, 95%)",
511
- "color-warn-100": "hsl(36, 85%, 85%)",
512
- "color-warn-200": "hsl(36, 85%, 75%)",
513
- "color-warn-300": "hsl(36, 85%, 65%)",
514
- "color-warn-400": "hsl(36, 85%, 55%)",
515
- "color-warn-500": "hsl(36, 85%, 53%)", // #EE901D
516
- "color-warn-600": "hsl(36, 85%, 45%)",
517
- "color-warn-700": "hsl(36, 85%, 40%)",
518
- "color-warn-800": "hsl(36, 85%, 35%)",
519
- "color-warn-900": "hsl(36, 85%, 30%)",
520
- "color-warn-950": "hsl(36, 85%, 25%)",
521
- "color-warn": "$color-warn-500",
510
+ "const-color-warn-50": "hsl(36, 85%, 95%)",
511
+ "const-color-warn-100": "hsl(36, 85%, 85%)",
512
+ "const-color-warn-200": "hsl(36, 85%, 75%)",
513
+ "const-color-warn-300": "hsl(36, 85%, 65%)",
514
+ "const-color-warn-400": "hsl(36, 85%, 55%)",
515
+ "const-color-warn-500": "hsl(36, 85%, 53%)", // #EE901D
516
+ "const-color-warn-600": "hsl(36, 85%, 45%)",
517
+ "const-color-warn-700": "hsl(36, 85%, 40%)",
518
+ "const-color-warn-800": "hsl(36, 85%, 35%)",
519
+ "const-color-warn-900": "hsl(36, 85%, 30%)",
520
+ "const-color-warn-950": "hsl(36, 85%, 25%)",
521
+ "const-color-warn": "$const-color-warn-500",
522
522
  // --- Danger color shades
523
- "color-danger-50": "hsl(356, 100%, 95%)",
524
- "color-danger-100": "hsl(356, 100%, 85%)",
525
- "color-danger-200": "hsl(356, 100%, 75%)",
526
- "color-danger-300": "hsl(356, 100%, 65%)",
527
- "color-danger-400": "hsl(356, 100%, 55%)",
528
- "color-danger-500": "hsl(356, 100%, 45%)", // #E30010
529
- "color-danger-600": "hsl(356, 100%, 40%)",
530
- "color-danger-700": "hsl(356, 100%, 35%)",
531
- "color-danger-800": "hsl(356, 100%, 30%)",
532
- "color-danger-900": "hsl(356, 100%, 25%)",
533
- "color-danger-950": "hsl(356, 100%, 20%)",
534
- "color-danger": "$color-danger-600",
535
- "color-attention": "$color-danger-500",
523
+ "const-color-danger-50": "hsl(356, 100%, 95%)",
524
+ "const-color-danger-100": "hsl(356, 100%, 85%)",
525
+ "const-color-danger-200": "hsl(356, 100%, 75%)",
526
+ "const-color-danger-300": "hsl(356, 100%, 65%)",
527
+ "const-color-danger-400": "hsl(356, 100%, 55%)",
528
+ "const-color-danger-500": "hsl(356, 100%, 45%)", // #E30010
529
+ "const-color-danger-600": "hsl(356, 100%, 40%)",
530
+ "const-color-danger-700": "hsl(356, 100%, 35%)",
531
+ "const-color-danger-800": "hsl(356, 100%, 30%)",
532
+ "const-color-danger-900": "hsl(356, 100%, 25%)",
533
+ "const-color-danger-950": "hsl(356, 100%, 20%)",
534
+ "const-color-danger": "$const-color-danger-600",
535
+ "const-color-attention": "$const-color-danger-500",
536
536
  // --- Success color shades (greenish)
537
- "color-success-50": "hsl(156, 80%, 95%)",
538
- "color-success-100": "hsl(156, 80%, 85%)",
539
- "color-success-200": "hsl(156, 80%, 75%)",
540
- "color-success-300": "hsl(156, 80%, 65%)",
541
- "color-success-400": "hsl(156, 80%, 55%)",
542
- "color-success-500": "hsl(156, 80%, 35%)", // #0F7C54
543
- "color-success-600": "hsl(156, 80%, 30%)",
544
- "color-success-700": "hsl(156, 80%, 25%)",
545
- "color-success-800": "hsl(156, 80%, 20%)",
546
- "color-success-900": "hsl(156, 80%, 15%)",
547
- "color-success-950": "hsl(156, 80%, 10%)",
548
- "color-success": "$color-success-500",
549
- "color-info-50": "hsl(197, 98%, 92%)",
550
- "color-info-100": "hsl(197, 98%, 84%)",
551
- "color-info-200": "hsl(197, 98%, 76%)",
552
- "color-info-300": "hsl(197, 98%, 68%)",
553
- "color-info-400": "hsl(197, 98%, 60%)",
554
- "color-info-500": "hsl(197, 98%, 50%)", // #02A7E9
555
- "color-info-600": "hsl(197, 98%, 45%)",
556
- "color-info-700": "hsl(197, 98%, 35%)",
557
- "color-info-800": "hsl(197, 98%, 25%)",
558
- "color-info-900": "hsl(197, 98%, 15%)",
559
- "color-info-950": "hsl(197, 98%, 10%)",
560
- "color-info": "$color-info-500",
537
+ "const-color-success-50": "hsl(156, 80%, 95%)",
538
+ "const-color-success-100": "hsl(156, 80%, 85%)",
539
+ "const-color-success-200": "hsl(156, 80%, 75%)",
540
+ "const-color-success-300": "hsl(156, 80%, 65%)",
541
+ "const-color-success-400": "hsl(156, 80%, 55%)",
542
+ "const-color-success-500": "hsl(156, 80%, 35%)", // #0F7C54
543
+ "const-color-success-600": "hsl(156, 80%, 30%)",
544
+ "const-color-success-700": "hsl(156, 80%, 25%)",
545
+ "const-color-success-800": "hsl(156, 80%, 20%)",
546
+ "const-color-success-900": "hsl(156, 80%, 15%)",
547
+ "const-color-success-950": "hsl(156, 80%, 10%)",
548
+ "const-color-success": "$const-color-success-500",
549
+ "const-color-info-50": "hsl(197, 98%, 92%)",
550
+ "const-color-info-100": "hsl(197, 98%, 84%)",
551
+ "const-color-info-200": "hsl(197, 98%, 76%)",
552
+ "const-color-info-300": "hsl(197, 98%, 68%)",
553
+ "const-color-info-400": "hsl(197, 98%, 60%)",
554
+ "const-color-info-500": "hsl(197, 98%, 50%)", // #02A7E9
555
+ "const-color-info-600": "hsl(197, 98%, 45%)",
556
+ "const-color-info-700": "hsl(197, 98%, 35%)",
557
+ "const-color-info-800": "hsl(197, 98%, 25%)",
558
+ "const-color-info-900": "hsl(197, 98%, 15%)",
559
+ "const-color-info-950": "hsl(197, 98%, 10%)",
560
+ "const-color-info": "$const-color-info-500",
561
561
  };