@sage/design-tokens 7.1.6 → 7.2.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.
- package/css/frozenproduct/all.css +8 -2
- package/css/frozenproduct/large/components/profile.css +1 -1
- package/css/frozenproduct/large/components/status.css +1 -1
- package/css/frozenproduct/large/dark.css +3 -0
- package/css/frozenproduct/large/light.css +3 -0
- package/css/frozenproduct/small/components/profile.css +1 -1
- package/css/frozenproduct/small/components/status.css +1 -1
- package/css/frozenproduct/small/dark.css +3 -0
- package/css/frozenproduct/small/light.css +3 -0
- package/css/marketing/all.css +8 -2
- package/css/marketing/large/components/profile.css +1 -1
- package/css/marketing/large/components/status.css +1 -1
- package/css/marketing/large/dark.css +3 -0
- package/css/marketing/large/light.css +3 -0
- package/css/marketing/small/components/profile.css +1 -1
- package/css/marketing/small/components/status.css +1 -1
- package/css/marketing/small/dark.css +3 -0
- package/css/marketing/small/light.css +3 -0
- package/css/product/all.css +8 -2
- package/css/product/large/components/profile.css +1 -1
- package/css/product/large/components/status.css +1 -1
- package/css/product/large/dark.css +3 -0
- package/css/product/large/light.css +3 -0
- package/css/product/small/components/profile.css +1 -1
- package/css/product/small/components/status.css +1 -1
- package/css/product/small/dark.css +3 -0
- package/css/product/small/light.css +3 -0
- package/ios/frozenproduct/large/dark/components/profile.h +1 -1
- package/ios/frozenproduct/large/dark/components/status.h +1 -1
- package/ios/frozenproduct/large/dark/mode.h +3 -0
- package/ios/frozenproduct/large/light/components/profile.h +1 -1
- package/ios/frozenproduct/large/light/components/status.h +1 -1
- package/ios/frozenproduct/large/light/mode.h +3 -0
- package/ios/frozenproduct/small/dark/components/profile.h +1 -1
- package/ios/frozenproduct/small/dark/components/status.h +1 -1
- package/ios/frozenproduct/small/dark/mode.h +3 -0
- package/ios/frozenproduct/small/light/components/profile.h +1 -1
- package/ios/frozenproduct/small/light/components/status.h +1 -1
- package/ios/frozenproduct/small/light/mode.h +3 -0
- package/ios/marketing/large/dark/components/profile.h +1 -1
- package/ios/marketing/large/dark/components/status.h +1 -1
- package/ios/marketing/large/dark/mode.h +3 -0
- package/ios/marketing/large/light/components/profile.h +1 -1
- package/ios/marketing/large/light/components/status.h +1 -1
- package/ios/marketing/large/light/mode.h +3 -0
- package/ios/marketing/small/dark/components/profile.h +1 -1
- package/ios/marketing/small/dark/components/status.h +1 -1
- package/ios/marketing/small/dark/mode.h +3 -0
- package/ios/marketing/small/light/components/profile.h +1 -1
- package/ios/marketing/small/light/components/status.h +1 -1
- package/ios/marketing/small/light/mode.h +3 -0
- package/ios/product/large/dark/components/profile.h +1 -1
- package/ios/product/large/dark/components/status.h +1 -1
- package/ios/product/large/dark/mode.h +3 -0
- package/ios/product/large/light/components/profile.h +1 -1
- package/ios/product/large/light/components/status.h +1 -1
- package/ios/product/large/light/mode.h +3 -0
- package/ios/product/small/dark/components/profile.h +1 -1
- package/ios/product/small/dark/components/status.h +1 -1
- package/ios/product/small/dark/mode.h +3 -0
- package/ios/product/small/light/components/profile.h +1 -1
- package/ios/product/small/light/components/status.h +1 -1
- package/ios/product/small/light/mode.h +3 -0
- package/js/common/frozenproduct/large/dark/components/profile.js +2 -2
- package/js/common/frozenproduct/large/dark/components/status.js +2 -2
- package/js/common/frozenproduct/large/dark/mode.d.ts +5 -0
- package/js/common/frozenproduct/large/dark/mode.js +79 -0
- package/js/common/frozenproduct/large/light/components/profile.js +2 -2
- package/js/common/frozenproduct/large/light/components/status.js +2 -2
- package/js/common/frozenproduct/large/light/mode.d.ts +5 -0
- package/js/common/frozenproduct/large/light/mode.js +83 -0
- package/js/common/frozenproduct/small/dark/components/profile.js +2 -2
- package/js/common/frozenproduct/small/dark/components/status.js +2 -2
- package/js/common/frozenproduct/small/dark/mode.d.ts +5 -0
- package/js/common/frozenproduct/small/dark/mode.js +79 -0
- package/js/common/frozenproduct/small/light/components/profile.js +2 -2
- package/js/common/frozenproduct/small/light/components/status.js +2 -2
- package/js/common/frozenproduct/small/light/mode.d.ts +5 -0
- package/js/common/frozenproduct/small/light/mode.js +83 -0
- package/js/common/marketing/large/dark/components/profile.js +2 -2
- package/js/common/marketing/large/dark/components/status.js +2 -2
- package/js/common/marketing/large/dark/mode.d.ts +5 -0
- package/js/common/marketing/large/dark/mode.js +79 -0
- package/js/common/marketing/large/light/components/profile.js +2 -2
- package/js/common/marketing/large/light/components/status.js +2 -2
- package/js/common/marketing/large/light/mode.d.ts +5 -0
- package/js/common/marketing/large/light/mode.js +83 -0
- package/js/common/marketing/small/dark/components/profile.js +2 -2
- package/js/common/marketing/small/dark/components/status.js +2 -2
- package/js/common/marketing/small/dark/mode.d.ts +5 -0
- package/js/common/marketing/small/dark/mode.js +79 -0
- package/js/common/marketing/small/light/components/profile.js +2 -2
- package/js/common/marketing/small/light/components/status.js +2 -2
- package/js/common/marketing/small/light/mode.d.ts +5 -0
- package/js/common/marketing/small/light/mode.js +83 -0
- package/js/common/product/large/dark/components/profile.js +2 -2
- package/js/common/product/large/dark/components/status.js +2 -2
- package/js/common/product/large/dark/mode.d.ts +5 -0
- package/js/common/product/large/dark/mode.js +79 -0
- package/js/common/product/large/light/components/profile.js +2 -2
- package/js/common/product/large/light/components/status.js +2 -2
- package/js/common/product/large/light/mode.d.ts +5 -0
- package/js/common/product/large/light/mode.js +83 -0
- package/js/common/product/small/dark/components/profile.js +2 -2
- package/js/common/product/small/dark/components/status.js +2 -2
- package/js/common/product/small/dark/mode.d.ts +5 -0
- package/js/common/product/small/dark/mode.js +79 -0
- package/js/common/product/small/light/components/profile.js +2 -2
- package/js/common/product/small/light/components/status.js +2 -2
- package/js/common/product/small/light/mode.d.ts +5 -0
- package/js/common/product/small/light/mode.js +83 -0
- package/js/es6/frozenproduct/large/dark/components/profile.js +1 -1
- package/js/es6/frozenproduct/large/dark/components/status.js +1 -1
- package/js/es6/frozenproduct/large/dark/mode.d.ts +3 -0
- package/js/es6/frozenproduct/large/dark/mode.js +3 -0
- package/js/es6/frozenproduct/large/light/components/profile.js +1 -1
- package/js/es6/frozenproduct/large/light/components/status.js +1 -1
- package/js/es6/frozenproduct/large/light/mode.d.ts +3 -0
- package/js/es6/frozenproduct/large/light/mode.js +3 -0
- package/js/es6/frozenproduct/small/dark/components/profile.js +1 -1
- package/js/es6/frozenproduct/small/dark/components/status.js +1 -1
- package/js/es6/frozenproduct/small/dark/mode.d.ts +3 -0
- package/js/es6/frozenproduct/small/dark/mode.js +3 -0
- package/js/es6/frozenproduct/small/light/components/profile.js +1 -1
- package/js/es6/frozenproduct/small/light/components/status.js +1 -1
- package/js/es6/frozenproduct/small/light/mode.d.ts +3 -0
- package/js/es6/frozenproduct/small/light/mode.js +3 -0
- package/js/es6/marketing/large/dark/components/profile.js +1 -1
- package/js/es6/marketing/large/dark/components/status.js +1 -1
- package/js/es6/marketing/large/dark/mode.d.ts +3 -0
- package/js/es6/marketing/large/dark/mode.js +3 -0
- package/js/es6/marketing/large/light/components/profile.js +1 -1
- package/js/es6/marketing/large/light/components/status.js +1 -1
- package/js/es6/marketing/large/light/mode.d.ts +3 -0
- package/js/es6/marketing/large/light/mode.js +3 -0
- package/js/es6/marketing/small/dark/components/profile.js +1 -1
- package/js/es6/marketing/small/dark/components/status.js +1 -1
- package/js/es6/marketing/small/dark/mode.d.ts +3 -0
- package/js/es6/marketing/small/dark/mode.js +3 -0
- package/js/es6/marketing/small/light/components/profile.js +1 -1
- package/js/es6/marketing/small/light/components/status.js +1 -1
- package/js/es6/marketing/small/light/mode.d.ts +3 -0
- package/js/es6/marketing/small/light/mode.js +3 -0
- package/js/es6/product/large/dark/components/profile.js +1 -1
- package/js/es6/product/large/dark/components/status.js +1 -1
- package/js/es6/product/large/dark/mode.d.ts +3 -0
- package/js/es6/product/large/dark/mode.js +3 -0
- package/js/es6/product/large/light/components/profile.js +1 -1
- package/js/es6/product/large/light/components/status.js +1 -1
- package/js/es6/product/large/light/mode.d.ts +3 -0
- package/js/es6/product/large/light/mode.js +3 -0
- package/js/es6/product/small/dark/components/profile.js +1 -1
- package/js/es6/product/small/dark/components/status.js +1 -1
- package/js/es6/product/small/dark/mode.d.ts +3 -0
- package/js/es6/product/small/dark/mode.js +3 -0
- package/js/es6/product/small/light/components/profile.js +1 -1
- package/js/es6/product/small/light/components/status.js +1 -1
- package/js/es6/product/small/light/mode.d.ts +3 -0
- package/js/es6/product/small/light/mode.js +3 -0
- package/js/umd/frozenproduct/large/dark/components/profile.js +2 -2
- package/js/umd/frozenproduct/large/dark/components/status.js +2 -2
- package/js/umd/frozenproduct/large/dark/mode.js +80 -0
- package/js/umd/frozenproduct/large/light/components/profile.js +2 -2
- package/js/umd/frozenproduct/large/light/components/status.js +2 -2
- package/js/umd/frozenproduct/large/light/mode.js +83 -0
- package/js/umd/frozenproduct/small/dark/components/profile.js +2 -2
- package/js/umd/frozenproduct/small/dark/components/status.js +2 -2
- package/js/umd/frozenproduct/small/dark/mode.js +80 -0
- package/js/umd/frozenproduct/small/light/components/profile.js +2 -2
- package/js/umd/frozenproduct/small/light/components/status.js +2 -2
- package/js/umd/frozenproduct/small/light/mode.js +83 -0
- package/js/umd/marketing/large/dark/components/profile.js +2 -2
- package/js/umd/marketing/large/dark/components/status.js +2 -2
- package/js/umd/marketing/large/dark/mode.js +80 -0
- package/js/umd/marketing/large/light/components/profile.js +2 -2
- package/js/umd/marketing/large/light/components/status.js +2 -2
- package/js/umd/marketing/large/light/mode.js +83 -0
- package/js/umd/marketing/small/dark/components/profile.js +2 -2
- package/js/umd/marketing/small/dark/components/status.js +2 -2
- package/js/umd/marketing/small/dark/mode.js +80 -0
- package/js/umd/marketing/small/light/components/profile.js +2 -2
- package/js/umd/marketing/small/light/components/status.js +2 -2
- package/js/umd/marketing/small/light/mode.js +83 -0
- package/js/umd/product/large/dark/components/profile.js +2 -2
- package/js/umd/product/large/dark/components/status.js +2 -2
- package/js/umd/product/large/dark/mode.js +80 -0
- package/js/umd/product/large/light/components/profile.js +2 -2
- package/js/umd/product/large/light/components/status.js +2 -2
- package/js/umd/product/large/light/mode.js +83 -0
- package/js/umd/product/small/dark/components/profile.js +2 -2
- package/js/umd/product/small/dark/components/status.js +2 -2
- package/js/umd/product/small/dark/mode.js +80 -0
- package/js/umd/product/small/light/components/profile.js +2 -2
- package/js/umd/product/small/light/components/status.js +2 -2
- package/js/umd/product/small/light/mode.js +83 -0
- package/json/flat/frozenproduct/large/dark/components/profile.json +1 -1
- package/json/flat/frozenproduct/large/dark/components/status.json +1 -1
- package/json/flat/frozenproduct/large/dark/mode.json +3 -0
- package/json/flat/frozenproduct/large/light/components/profile.json +1 -1
- package/json/flat/frozenproduct/large/light/components/status.json +1 -1
- package/json/flat/frozenproduct/large/light/mode.json +3 -0
- package/json/flat/frozenproduct/small/dark/components/profile.json +1 -1
- package/json/flat/frozenproduct/small/dark/components/status.json +1 -1
- package/json/flat/frozenproduct/small/dark/mode.json +3 -0
- package/json/flat/frozenproduct/small/light/components/profile.json +1 -1
- package/json/flat/frozenproduct/small/light/components/status.json +1 -1
- package/json/flat/frozenproduct/small/light/mode.json +3 -0
- package/json/flat/marketing/large/dark/components/profile.json +1 -1
- package/json/flat/marketing/large/dark/components/status.json +1 -1
- package/json/flat/marketing/large/dark/mode.json +3 -0
- package/json/flat/marketing/large/light/components/profile.json +1 -1
- package/json/flat/marketing/large/light/components/status.json +1 -1
- package/json/flat/marketing/large/light/mode.json +3 -0
- package/json/flat/marketing/small/dark/components/profile.json +1 -1
- package/json/flat/marketing/small/dark/components/status.json +1 -1
- package/json/flat/marketing/small/dark/mode.json +3 -0
- package/json/flat/marketing/small/light/components/profile.json +1 -1
- package/json/flat/marketing/small/light/components/status.json +1 -1
- package/json/flat/marketing/small/light/mode.json +3 -0
- package/json/flat/product/large/dark/components/profile.json +1 -1
- package/json/flat/product/large/dark/components/status.json +1 -1
- package/json/flat/product/large/dark/mode.json +3 -0
- package/json/flat/product/large/light/components/profile.json +1 -1
- package/json/flat/product/large/light/components/status.json +1 -1
- package/json/flat/product/large/light/mode.json +3 -0
- package/json/flat/product/small/dark/components/profile.json +1 -1
- package/json/flat/product/small/dark/components/status.json +1 -1
- package/json/flat/product/small/dark/mode.json +3 -0
- package/json/flat/product/small/light/components/profile.json +1 -1
- package/json/flat/product/small/light/components/status.json +1 -1
- package/json/flat/product/small/light/mode.json +3 -0
- package/json/nested/frozenproduct/large/dark/components/profile.json +1 -1
- package/json/nested/frozenproduct/large/dark/components/status.json +1 -1
- package/json/nested/frozenproduct/large/dark/mode.json +8 -3
- package/json/nested/frozenproduct/large/light/components/profile.json +1 -1
- package/json/nested/frozenproduct/large/light/components/status.json +1 -1
- package/json/nested/frozenproduct/large/light/mode.json +8 -3
- package/json/nested/frozenproduct/small/dark/components/profile.json +1 -1
- package/json/nested/frozenproduct/small/dark/components/status.json +1 -1
- package/json/nested/frozenproduct/small/dark/mode.json +8 -3
- package/json/nested/frozenproduct/small/light/components/profile.json +1 -1
- package/json/nested/frozenproduct/small/light/components/status.json +1 -1
- package/json/nested/frozenproduct/small/light/mode.json +8 -3
- package/json/nested/marketing/large/dark/components/profile.json +1 -1
- package/json/nested/marketing/large/dark/components/status.json +1 -1
- package/json/nested/marketing/large/dark/mode.json +8 -3
- package/json/nested/marketing/large/light/components/profile.json +1 -1
- package/json/nested/marketing/large/light/components/status.json +1 -1
- package/json/nested/marketing/large/light/mode.json +8 -3
- package/json/nested/marketing/small/dark/components/profile.json +1 -1
- package/json/nested/marketing/small/dark/components/status.json +1 -1
- package/json/nested/marketing/small/dark/mode.json +8 -3
- package/json/nested/marketing/small/light/components/profile.json +1 -1
- package/json/nested/marketing/small/light/components/status.json +1 -1
- package/json/nested/marketing/small/light/mode.json +8 -3
- package/json/nested/product/large/dark/components/profile.json +1 -1
- package/json/nested/product/large/dark/components/status.json +1 -1
- package/json/nested/product/large/dark/mode.json +8 -3
- package/json/nested/product/large/light/components/profile.json +1 -1
- package/json/nested/product/large/light/components/status.json +1 -1
- package/json/nested/product/large/light/mode.json +8 -3
- package/json/nested/product/small/dark/components/profile.json +1 -1
- package/json/nested/product/small/dark/components/status.json +1 -1
- package/json/nested/product/small/dark/mode.json +8 -3
- package/json/nested/product/small/light/components/profile.json +1 -1
- package/json/nested/product/small/light/components/status.json +1 -1
- package/json/nested/product/small/light/mode.json +8 -3
- package/package.json +1 -1
- package/sage-design-tokens-7.2.0.tgz +0 -0
- package/scss/frozenproduct/large/components/profile.scss +1 -1
- package/scss/frozenproduct/large/components/status.scss +1 -1
- package/scss/frozenproduct/large/dark.scss +3 -0
- package/scss/frozenproduct/large/light.scss +3 -0
- package/scss/frozenproduct/small/components/button.scss +23 -23
- package/scss/frozenproduct/small/components/container.scss +9 -9
- package/scss/frozenproduct/small/components/form.scss +7 -7
- package/scss/frozenproduct/small/components/link.scss +2 -2
- package/scss/frozenproduct/small/components/nav.scss +3 -3
- package/scss/frozenproduct/small/components/page.scss +1 -1
- package/scss/frozenproduct/small/components/popover.scss +2 -2
- package/scss/frozenproduct/small/components/profile.scss +1 -1
- package/scss/frozenproduct/small/components/progress.scss +6 -6
- package/scss/frozenproduct/small/components/status.scss +4 -4
- package/scss/frozenproduct/small/components/tab.scss +7 -7
- package/scss/frozenproduct/small/components/table.scss +10 -10
- package/scss/frozenproduct/small/dark.scss +3 -0
- package/scss/frozenproduct/small/light.scss +3 -0
- package/scss/marketing/large/components/profile.scss +1 -1
- package/scss/marketing/large/components/status.scss +1 -1
- package/scss/marketing/large/dark.scss +3 -0
- package/scss/marketing/large/light.scss +3 -0
- package/scss/marketing/small/components/profile.scss +1 -1
- package/scss/marketing/small/components/status.scss +1 -1
- package/scss/marketing/small/dark.scss +3 -0
- package/scss/marketing/small/light.scss +3 -0
- package/scss/product/large/components/button.scss +23 -23
- package/scss/product/large/components/container.scss +9 -9
- package/scss/product/large/components/form.scss +7 -7
- package/scss/product/large/components/link.scss +2 -2
- package/scss/product/large/components/nav.scss +3 -3
- package/scss/product/large/components/page.scss +1 -1
- package/scss/product/large/components/popover.scss +2 -2
- package/scss/product/large/components/profile.scss +1 -1
- package/scss/product/large/components/progress.scss +6 -6
- package/scss/product/large/components/status.scss +4 -4
- package/scss/product/large/components/tab.scss +7 -7
- package/scss/product/large/components/table.scss +10 -10
- package/scss/product/large/dark.scss +3 -0
- package/scss/product/large/light.scss +3 -0
- package/scss/product/small/components/button.scss +23 -23
- package/scss/product/small/components/container.scss +9 -9
- package/scss/product/small/components/form.scss +7 -7
- package/scss/product/small/components/link.scss +2 -2
- package/scss/product/small/components/nav.scss +3 -3
- package/scss/product/small/components/page.scss +1 -1
- package/scss/product/small/components/popover.scss +2 -2
- package/scss/product/small/components/profile.scss +1 -1
- package/scss/product/small/components/progress.scss +6 -6
- package/scss/product/small/components/status.scss +4 -4
- package/scss/product/small/components/tab.scss +7 -7
- package/scss/product/small/components/table.scss +10 -10
- package/scss/product/small/dark.scss +3 -0
- package/scss/product/small/light.scss +3 -0
- package/sage-design-tokens-7.1.6.tgz +0 -0
|
@@ -177,6 +177,7 @@
|
|
|
177
177
|
--modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
|
|
178
178
|
--modes-color-generic-fg-soft-light: #a6a6a6;
|
|
179
179
|
--modes-color-generic-fg-moderate-light: #777;
|
|
180
|
+
--modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
|
|
180
181
|
--modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
|
|
181
182
|
--modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
182
183
|
--modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -232,6 +233,7 @@
|
|
|
232
233
|
--modes-color-interactive-monochrome-generic-with-default-light: #FFFFFF;
|
|
233
234
|
--modes-color-interactive-monochrome-generic-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
|
|
234
235
|
--modes-color-interactive-monochrome-generic-frozen-active-light: #eaedf0; /* Used within frozen table */
|
|
236
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-light: #335B70; /* Frozen progress tracker */
|
|
235
237
|
--modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
|
|
236
238
|
--modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
|
|
237
239
|
--modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
|
|
@@ -255,6 +257,7 @@
|
|
|
255
257
|
--modes-color-interactive-progress-bg-light: #00000014;
|
|
256
258
|
--modes-color-interactive-progress-bg-alt-light: #ffffff14;
|
|
257
259
|
--modes-color-interactive-progress-frozen-bg-light: #00804614;
|
|
260
|
+
--modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
|
|
258
261
|
--modes-color-status-ai-default-light: #FFFFFF;
|
|
259
262
|
--modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
|
|
260
263
|
--modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -350,6 +353,7 @@
|
|
|
350
353
|
--modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
|
|
351
354
|
--modes-color-generic-fg-soft-dark: #4b4b4b;
|
|
352
355
|
--modes-color-generic-fg-moderate-dark: #777;
|
|
356
|
+
--modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
|
|
353
357
|
--modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
|
|
354
358
|
--modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
|
|
355
359
|
--modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -405,6 +409,7 @@
|
|
|
405
409
|
--modes-color-interactive-monochrome-generic-with-default-dark: #000000;
|
|
406
410
|
--modes-color-interactive-monochrome-generic-with-hover-dark: #FFFFFF;
|
|
407
411
|
--modes-color-interactive-monochrome-generic-frozen-active-dark: #FFFFFF; /* Used within frozen table */
|
|
412
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-dark: #FFFFFF; /* progress tracker */
|
|
408
413
|
--modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
|
|
409
414
|
--modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
|
|
410
415
|
--modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
|
|
@@ -428,6 +433,7 @@
|
|
|
428
433
|
--modes-color-interactive-progress-bg-dark: #ffffff14;
|
|
429
434
|
--modes-color-interactive-progress-bg-alt-dark: #00000014;
|
|
430
435
|
--modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
|
|
436
|
+
--modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
|
|
431
437
|
--modes-color-status-caution-default-dark: #E04500;
|
|
432
438
|
--modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
|
|
433
439
|
--modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
|
|
@@ -1508,7 +1514,7 @@
|
|
|
1508
1514
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
1509
1515
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
1510
1516
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
1511
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
1517
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
1512
1518
|
--profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
|
|
1513
1519
|
--profile-space-none: var(--global-space-none);
|
|
1514
1520
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -1761,7 +1767,7 @@
|
|
|
1761
1767
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
1762
1768
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
1763
1769
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
1764
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
1770
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
1765
1771
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
1766
1772
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
1767
1773
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #a6a6a6;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
|
|
38
39
|
--modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #000000; /* maybe should be white to align with primary group logic */
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #335B70; /* Frozen progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #00000014;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #ffffff14;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #00804614;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
|
|
116
119
|
--modes-color-status-ai-default: #FFFFFF;
|
|
117
120
|
--modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
|
|
118
121
|
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #a6a6a6;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
|
|
38
39
|
--modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #000000; /* maybe should be white to align with primary group logic */
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #335B70; /* Frozen progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #00000014;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #ffffff14;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #00804614;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
|
|
116
119
|
--modes-color-status-ai-default: #FFFFFF;
|
|
117
120
|
--modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
|
|
118
121
|
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
package/css/marketing/all.css
CHANGED
|
@@ -177,6 +177,7 @@
|
|
|
177
177
|
--modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
|
|
178
178
|
--modes-color-generic-fg-soft-light: #a6a6a6;
|
|
179
179
|
--modes-color-generic-fg-moderate-light: #777;
|
|
180
|
+
--modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
|
|
180
181
|
--modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
|
|
181
182
|
--modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
182
183
|
--modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -232,6 +233,7 @@
|
|
|
232
233
|
--modes-color-interactive-monochrome-generic-with-default-light: #FFFFFF;
|
|
233
234
|
--modes-color-interactive-monochrome-generic-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
|
|
234
235
|
--modes-color-interactive-monochrome-generic-frozen-active-light: #eaedf0; /* Used within frozen table */
|
|
236
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-light: #335B70; /* Frozen progress tracker */
|
|
235
237
|
--modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
|
|
236
238
|
--modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
|
|
237
239
|
--modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
|
|
@@ -255,6 +257,7 @@
|
|
|
255
257
|
--modes-color-interactive-progress-bg-light: #00000014;
|
|
256
258
|
--modes-color-interactive-progress-bg-alt-light: #ffffff14;
|
|
257
259
|
--modes-color-interactive-progress-frozen-bg-light: #00804614;
|
|
260
|
+
--modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
|
|
258
261
|
--modes-color-status-ai-default-light: #FFFFFF;
|
|
259
262
|
--modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
|
|
260
263
|
--modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -350,6 +353,7 @@
|
|
|
350
353
|
--modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
|
|
351
354
|
--modes-color-generic-fg-soft-dark: #4b4b4b;
|
|
352
355
|
--modes-color-generic-fg-moderate-dark: #777;
|
|
356
|
+
--modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
|
|
353
357
|
--modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
|
|
354
358
|
--modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
|
|
355
359
|
--modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -405,6 +409,7 @@
|
|
|
405
409
|
--modes-color-interactive-monochrome-generic-with-default-dark: #000000;
|
|
406
410
|
--modes-color-interactive-monochrome-generic-with-hover-dark: #FFFFFF;
|
|
407
411
|
--modes-color-interactive-monochrome-generic-frozen-active-dark: #FFFFFF; /* Used within frozen table */
|
|
412
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-dark: #FFFFFF; /* progress tracker */
|
|
408
413
|
--modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
|
|
409
414
|
--modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
|
|
410
415
|
--modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
|
|
@@ -428,6 +433,7 @@
|
|
|
428
433
|
--modes-color-interactive-progress-bg-dark: #ffffff14;
|
|
429
434
|
--modes-color-interactive-progress-bg-alt-dark: #00000014;
|
|
430
435
|
--modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
|
|
436
|
+
--modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
|
|
431
437
|
--modes-color-status-caution-default-dark: #E04500;
|
|
432
438
|
--modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
|
|
433
439
|
--modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
|
|
@@ -1508,7 +1514,7 @@
|
|
|
1508
1514
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
1509
1515
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
1510
1516
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
1511
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
1517
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
1512
1518
|
--profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
|
|
1513
1519
|
--profile-space-none: var(--global-space-none);
|
|
1514
1520
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -1761,7 +1767,7 @@
|
|
|
1761
1767
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
1762
1768
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
1763
1769
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
1764
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
1770
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
1765
1771
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
1766
1772
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
1767
1773
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #a6a6a6;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
|
|
38
39
|
--modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #000000; /* maybe should be white to align with primary group logic */
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #335B70; /* Frozen progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #00000014;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #ffffff14;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #00804614;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
|
|
116
119
|
--modes-color-status-ai-default: #FFFFFF;
|
|
117
120
|
--modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
|
|
118
121
|
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #a6a6a6;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
|
|
38
39
|
--modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #000000; /* maybe should be white to align with primary group logic */
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #335B70; /* Frozen progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #00000014;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #ffffff14;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #00804614;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
|
|
116
119
|
--modes-color-status-ai-default: #FFFFFF;
|
|
117
120
|
--modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
|
|
118
121
|
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
package/css/product/all.css
CHANGED
|
@@ -177,6 +177,7 @@
|
|
|
177
177
|
--modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
|
|
178
178
|
--modes-color-generic-fg-soft-light: #a6a6a6;
|
|
179
179
|
--modes-color-generic-fg-moderate-light: #777;
|
|
180
|
+
--modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
|
|
180
181
|
--modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
|
|
181
182
|
--modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
182
183
|
--modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -232,6 +233,7 @@
|
|
|
232
233
|
--modes-color-interactive-monochrome-generic-with-default-light: #FFFFFF;
|
|
233
234
|
--modes-color-interactive-monochrome-generic-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
|
|
234
235
|
--modes-color-interactive-monochrome-generic-frozen-active-light: #eaedf0; /* Used within frozen table */
|
|
236
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-light: #335B70; /* Frozen progress tracker */
|
|
235
237
|
--modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
|
|
236
238
|
--modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
|
|
237
239
|
--modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
|
|
@@ -255,6 +257,7 @@
|
|
|
255
257
|
--modes-color-interactive-progress-bg-light: #00000014;
|
|
256
258
|
--modes-color-interactive-progress-bg-alt-light: #ffffff14;
|
|
257
259
|
--modes-color-interactive-progress-frozen-bg-light: #00804614;
|
|
260
|
+
--modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
|
|
258
261
|
--modes-color-status-ai-default-light: #FFFFFF;
|
|
259
262
|
--modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
|
|
260
263
|
--modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -350,6 +353,7 @@
|
|
|
350
353
|
--modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
|
|
351
354
|
--modes-color-generic-fg-soft-dark: #4b4b4b;
|
|
352
355
|
--modes-color-generic-fg-moderate-dark: #777;
|
|
356
|
+
--modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
|
|
353
357
|
--modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
|
|
354
358
|
--modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
|
|
355
359
|
--modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -405,6 +409,7 @@
|
|
|
405
409
|
--modes-color-interactive-monochrome-generic-with-default-dark: #000000;
|
|
406
410
|
--modes-color-interactive-monochrome-generic-with-hover-dark: #FFFFFF;
|
|
407
411
|
--modes-color-interactive-monochrome-generic-frozen-active-dark: #FFFFFF; /* Used within frozen table */
|
|
412
|
+
--modes-color-interactive-monochrome-generic-frozen-active2-dark: #FFFFFF; /* progress tracker */
|
|
408
413
|
--modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
|
|
409
414
|
--modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
|
|
410
415
|
--modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
|
|
@@ -428,6 +433,7 @@
|
|
|
428
433
|
--modes-color-interactive-progress-bg-dark: #ffffff14;
|
|
429
434
|
--modes-color-interactive-progress-bg-alt-dark: #00000014;
|
|
430
435
|
--modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
|
|
436
|
+
--modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
|
|
431
437
|
--modes-color-status-caution-default-dark: #E04500;
|
|
432
438
|
--modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
|
|
433
439
|
--modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
|
|
@@ -1508,7 +1514,7 @@
|
|
|
1508
1514
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
1509
1515
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
1510
1516
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
1511
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
1517
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
1512
1518
|
--profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
|
|
1513
1519
|
--profile-space-none: var(--global-space-none);
|
|
1514
1520
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -1761,7 +1767,7 @@
|
|
|
1761
1767
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
1762
1768
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
1763
1769
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
1764
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
1770
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
1765
1771
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
1766
1772
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
1767
1773
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #a6a6a6;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
|
|
38
39
|
--modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #000000; /* maybe should be white to align with primary group logic */
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #335B70; /* Frozen progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #00000014;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #ffffff14;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #00804614;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
|
|
116
119
|
--modes-color-status-ai-default: #FFFFFF;
|
|
117
120
|
--modes-color-status-ai-default-alt: #000000; /* bg for contextual message comp */
|
|
118
121
|
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
|
|
60
60
|
--profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
|
|
61
61
|
--profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
|
|
62
|
-
--profile-size-inside-xxl: calc(var(--global-size-micro-m) *
|
|
62
|
+
--profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
|
|
63
63
|
--profile-color-border-default: var(--modes-color-generic-fg-delicate);
|
|
64
64
|
--profile-space-none: var(--global-space-none);
|
|
65
65
|
--profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
--status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
|
|
121
121
|
--status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
|
|
122
122
|
--status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
|
|
123
|
-
--status-space-message-global-x-m: var(--global-space-macro-
|
|
123
|
+
--status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
|
|
124
124
|
--status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
|
|
125
125
|
--status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
|
|
126
126
|
--status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
--modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
|
|
36
36
|
--modes-color-generic-fg-soft: #4b4b4b;
|
|
37
37
|
--modes-color-generic-fg-moderate: #777;
|
|
38
|
+
--modes-color-generic-fg-frozen-soft: #4b4b4b;
|
|
38
39
|
--modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
|
|
39
40
|
--modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
|
|
40
41
|
--modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
|
|
@@ -90,6 +91,7 @@
|
|
|
90
91
|
--modes-color-interactive-monochrome-generic-with-default: #000000;
|
|
91
92
|
--modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
|
|
92
93
|
--modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; /* Used within frozen table */
|
|
94
|
+
--modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; /* progress tracker */
|
|
93
95
|
--modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
|
|
94
96
|
--modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
|
|
95
97
|
--modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
|
|
@@ -113,6 +115,7 @@
|
|
|
113
115
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
114
116
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
115
117
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
118
|
+
--modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
|
|
116
119
|
--modes-color-status-caution-default: #E04500;
|
|
117
120
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
118
121
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|