@sage/design-tokens 5.2.0 → 6.0.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 +87 -77
- package/css/frozenproduct/large/components/logo.css +1 -6
- package/css/frozenproduct/large/components/status.css +67 -48
- package/css/frozenproduct/large/dark.css +12 -14
- package/css/frozenproduct/large/light.css +7 -9
- package/css/frozenproduct/small/components/logo.css +1 -6
- package/css/frozenproduct/small/components/status.css +67 -48
- package/css/frozenproduct/small/dark.css +12 -14
- package/css/frozenproduct/small/light.css +7 -9
- package/css/marketing/all.css +118 -108
- package/css/marketing/large/components/logo.css +1 -6
- package/css/marketing/large/components/status.css +67 -48
- package/css/marketing/large/dark.css +12 -14
- package/css/marketing/large/light.css +7 -9
- package/css/marketing/small/components/button.css +22 -22
- package/css/marketing/small/components/container.css +9 -9
- package/css/marketing/small/components/logo.css +1 -6
- package/css/marketing/small/components/status.css +67 -48
- package/css/marketing/small/dark.css +12 -14
- package/css/marketing/small/light.css +7 -9
- package/css/product/all.css +87 -77
- package/css/product/large/components/logo.css +1 -6
- package/css/product/large/components/status.css +67 -48
- package/css/product/large/dark.css +12 -14
- package/css/product/large/light.css +7 -9
- package/css/product/small/components/logo.css +1 -6
- package/css/product/small/components/status.css +67 -48
- package/css/product/small/dark.css +12 -14
- package/css/product/small/light.css +7 -9
- package/ios/frozenproduct/large/dark/components/logo.h +0 -5
- package/ios/frozenproduct/large/dark/components/status.h +67 -48
- package/ios/frozenproduct/large/dark/mode.h +12 -14
- package/ios/frozenproduct/large/light/components/logo.h +0 -5
- package/ios/frozenproduct/large/light/components/status.h +67 -48
- package/ios/frozenproduct/large/light/mode.h +7 -9
- package/ios/frozenproduct/small/dark/components/logo.h +0 -5
- package/ios/frozenproduct/small/dark/components/status.h +67 -48
- package/ios/frozenproduct/small/dark/mode.h +12 -14
- package/ios/frozenproduct/small/light/components/logo.h +0 -5
- package/ios/frozenproduct/small/light/components/status.h +67 -48
- package/ios/frozenproduct/small/light/mode.h +7 -9
- package/ios/marketing/large/dark/components/logo.h +0 -5
- package/ios/marketing/large/dark/components/status.h +67 -48
- package/ios/marketing/large/dark/mode.h +12 -14
- package/ios/marketing/large/light/components/logo.h +0 -5
- package/ios/marketing/large/light/components/status.h +67 -48
- package/ios/marketing/large/light/mode.h +7 -9
- package/ios/marketing/small/dark/components/logo.h +0 -5
- package/ios/marketing/small/dark/components/status.h +67 -48
- package/ios/marketing/small/dark/mode.h +12 -14
- package/ios/marketing/small/light/components/logo.h +0 -5
- package/ios/marketing/small/light/components/status.h +67 -48
- package/ios/marketing/small/light/mode.h +7 -9
- package/ios/product/large/dark/components/logo.h +0 -5
- package/ios/product/large/dark/components/status.h +67 -48
- package/ios/product/large/dark/mode.h +12 -14
- package/ios/product/large/light/components/logo.h +0 -5
- package/ios/product/large/light/components/status.h +67 -48
- package/ios/product/large/light/mode.h +7 -9
- package/ios/product/small/dark/components/logo.h +0 -5
- package/ios/product/small/dark/components/status.h +67 -48
- package/ios/product/small/dark/mode.h +12 -14
- package/ios/product/small/light/components/logo.h +0 -5
- package/ios/product/small/light/components/status.h +67 -48
- package/ios/product/small/light/mode.h +7 -9
- package/js/common/frozenproduct/large/dark/components/logo.d.ts +0 -7
- package/js/common/frozenproduct/large/dark/components/logo.js +1 -70
- package/js/common/frozenproduct/large/dark/components/status.d.ts +103 -60
- package/js/common/frozenproduct/large/dark/components/status.js +1534 -892
- package/js/common/frozenproduct/large/dark/mode.d.ts +16 -20
- package/js/common/frozenproduct/large/dark/mode.js +410 -193
- package/js/common/frozenproduct/large/light/components/logo.d.ts +0 -7
- package/js/common/frozenproduct/large/light/components/logo.js +1 -70
- package/js/common/frozenproduct/large/light/components/status.d.ts +103 -60
- package/js/common/frozenproduct/large/light/components/status.js +1534 -892
- package/js/common/frozenproduct/large/light/mode.d.ts +7 -11
- package/js/common/frozenproduct/large/light/mode.js +416 -99
- package/js/common/frozenproduct/small/dark/components/logo.d.ts +0 -7
- package/js/common/frozenproduct/small/dark/components/logo.js +1 -70
- package/js/common/frozenproduct/small/dark/components/status.d.ts +103 -60
- package/js/common/frozenproduct/small/dark/components/status.js +1534 -892
- package/js/common/frozenproduct/small/dark/mode.d.ts +16 -20
- package/js/common/frozenproduct/small/dark/mode.js +410 -193
- package/js/common/frozenproduct/small/light/components/logo.d.ts +0 -7
- package/js/common/frozenproduct/small/light/components/logo.js +1 -70
- package/js/common/frozenproduct/small/light/components/status.d.ts +103 -60
- package/js/common/frozenproduct/small/light/components/status.js +1534 -892
- package/js/common/frozenproduct/small/light/mode.d.ts +7 -11
- package/js/common/frozenproduct/small/light/mode.js +416 -99
- package/js/common/marketing/large/dark/components/logo.d.ts +0 -7
- package/js/common/marketing/large/dark/components/logo.js +1 -70
- package/js/common/marketing/large/dark/components/status.d.ts +103 -60
- package/js/common/marketing/large/dark/components/status.js +1534 -892
- package/js/common/marketing/large/dark/mode.d.ts +16 -20
- package/js/common/marketing/large/dark/mode.js +410 -193
- package/js/common/marketing/large/light/components/logo.d.ts +0 -7
- package/js/common/marketing/large/light/components/logo.js +1 -70
- package/js/common/marketing/large/light/components/status.d.ts +103 -60
- package/js/common/marketing/large/light/components/status.js +1534 -892
- package/js/common/marketing/large/light/mode.d.ts +7 -11
- package/js/common/marketing/large/light/mode.js +416 -99
- package/js/common/marketing/small/dark/components/logo.d.ts +0 -7
- package/js/common/marketing/small/dark/components/logo.js +1 -70
- package/js/common/marketing/small/dark/components/status.d.ts +103 -60
- package/js/common/marketing/small/dark/components/status.js +1534 -892
- package/js/common/marketing/small/dark/mode.d.ts +16 -20
- package/js/common/marketing/small/dark/mode.js +410 -193
- package/js/common/marketing/small/light/components/logo.d.ts +0 -7
- package/js/common/marketing/small/light/components/logo.js +1 -70
- package/js/common/marketing/small/light/components/status.d.ts +103 -60
- package/js/common/marketing/small/light/components/status.js +1534 -892
- package/js/common/marketing/small/light/mode.d.ts +7 -11
- package/js/common/marketing/small/light/mode.js +416 -99
- package/js/common/product/large/dark/components/logo.d.ts +0 -7
- package/js/common/product/large/dark/components/logo.js +1 -70
- package/js/common/product/large/dark/components/status.d.ts +103 -60
- package/js/common/product/large/dark/components/status.js +1534 -892
- package/js/common/product/large/dark/mode.d.ts +16 -20
- package/js/common/product/large/dark/mode.js +410 -193
- package/js/common/product/large/light/components/logo.d.ts +0 -7
- package/js/common/product/large/light/components/logo.js +1 -70
- package/js/common/product/large/light/components/status.d.ts +103 -60
- package/js/common/product/large/light/components/status.js +1534 -892
- package/js/common/product/large/light/mode.d.ts +7 -11
- package/js/common/product/large/light/mode.js +416 -99
- package/js/common/product/small/dark/components/logo.d.ts +0 -7
- package/js/common/product/small/dark/components/logo.js +1 -70
- package/js/common/product/small/dark/components/status.d.ts +103 -60
- package/js/common/product/small/dark/components/status.js +1534 -892
- package/js/common/product/small/dark/mode.d.ts +16 -20
- package/js/common/product/small/dark/mode.js +410 -193
- package/js/common/product/small/light/components/logo.d.ts +0 -7
- package/js/common/product/small/light/components/logo.js +1 -70
- package/js/common/product/small/light/components/status.d.ts +103 -60
- package/js/common/product/small/light/components/status.js +1534 -892
- package/js/common/product/small/light/mode.d.ts +7 -11
- package/js/common/product/small/light/mode.js +416 -99
- package/js/es6/frozenproduct/large/dark/components/logo.d.ts +0 -5
- package/js/es6/frozenproduct/large/dark/components/logo.js +0 -7
- package/js/es6/frozenproduct/large/dark/components/status.d.ts +84 -60
- package/js/es6/frozenproduct/large/dark/components/status.js +67 -48
- package/js/es6/frozenproduct/large/dark/mode.d.ts +17 -15
- package/js/es6/frozenproduct/large/dark/mode.js +12 -16
- package/js/es6/frozenproduct/large/light/components/logo.d.ts +0 -5
- package/js/es6/frozenproduct/large/light/components/logo.js +0 -7
- package/js/es6/frozenproduct/large/light/components/status.d.ts +84 -60
- package/js/es6/frozenproduct/large/light/components/status.js +67 -48
- package/js/es6/frozenproduct/large/light/mode.d.ts +11 -9
- package/js/es6/frozenproduct/large/light/mode.js +7 -11
- package/js/es6/frozenproduct/small/dark/components/logo.d.ts +0 -5
- package/js/es6/frozenproduct/small/dark/components/logo.js +0 -7
- package/js/es6/frozenproduct/small/dark/components/status.d.ts +84 -60
- package/js/es6/frozenproduct/small/dark/components/status.js +67 -48
- package/js/es6/frozenproduct/small/dark/mode.d.ts +17 -15
- package/js/es6/frozenproduct/small/dark/mode.js +12 -16
- package/js/es6/frozenproduct/small/light/components/logo.d.ts +0 -5
- package/js/es6/frozenproduct/small/light/components/logo.js +0 -7
- package/js/es6/frozenproduct/small/light/components/status.d.ts +84 -60
- package/js/es6/frozenproduct/small/light/components/status.js +67 -48
- package/js/es6/frozenproduct/small/light/mode.d.ts +11 -9
- package/js/es6/frozenproduct/small/light/mode.js +7 -11
- package/js/es6/marketing/large/dark/components/logo.d.ts +0 -5
- package/js/es6/marketing/large/dark/components/logo.js +0 -7
- package/js/es6/marketing/large/dark/components/status.d.ts +84 -60
- package/js/es6/marketing/large/dark/components/status.js +67 -48
- package/js/es6/marketing/large/dark/mode.d.ts +17 -15
- package/js/es6/marketing/large/dark/mode.js +12 -16
- package/js/es6/marketing/large/light/components/logo.d.ts +0 -5
- package/js/es6/marketing/large/light/components/logo.js +0 -7
- package/js/es6/marketing/large/light/components/status.d.ts +84 -60
- package/js/es6/marketing/large/light/components/status.js +67 -48
- package/js/es6/marketing/large/light/mode.d.ts +11 -9
- package/js/es6/marketing/large/light/mode.js +7 -11
- package/js/es6/marketing/small/dark/components/logo.d.ts +0 -5
- package/js/es6/marketing/small/dark/components/logo.js +0 -7
- package/js/es6/marketing/small/dark/components/status.d.ts +84 -60
- package/js/es6/marketing/small/dark/components/status.js +67 -48
- package/js/es6/marketing/small/dark/mode.d.ts +17 -15
- package/js/es6/marketing/small/dark/mode.js +12 -16
- package/js/es6/marketing/small/light/components/logo.d.ts +0 -5
- package/js/es6/marketing/small/light/components/logo.js +0 -7
- package/js/es6/marketing/small/light/components/status.d.ts +84 -60
- package/js/es6/marketing/small/light/components/status.js +67 -48
- package/js/es6/marketing/small/light/mode.d.ts +11 -9
- package/js/es6/marketing/small/light/mode.js +7 -11
- package/js/es6/product/large/dark/components/logo.d.ts +0 -5
- package/js/es6/product/large/dark/components/logo.js +0 -7
- package/js/es6/product/large/dark/components/status.d.ts +84 -60
- package/js/es6/product/large/dark/components/status.js +67 -48
- package/js/es6/product/large/dark/mode.d.ts +17 -15
- package/js/es6/product/large/dark/mode.js +12 -16
- package/js/es6/product/large/light/components/logo.d.ts +0 -5
- package/js/es6/product/large/light/components/logo.js +0 -7
- package/js/es6/product/large/light/components/status.d.ts +84 -60
- package/js/es6/product/large/light/components/status.js +67 -48
- package/js/es6/product/large/light/mode.d.ts +11 -9
- package/js/es6/product/large/light/mode.js +7 -11
- package/js/es6/product/small/dark/components/logo.d.ts +0 -5
- package/js/es6/product/small/dark/components/logo.js +0 -7
- package/js/es6/product/small/dark/components/status.d.ts +84 -60
- package/js/es6/product/small/dark/components/status.js +67 -48
- package/js/es6/product/small/dark/mode.d.ts +17 -15
- package/js/es6/product/small/dark/mode.js +12 -16
- package/js/es6/product/small/light/components/logo.d.ts +0 -5
- package/js/es6/product/small/light/components/logo.js +0 -7
- package/js/es6/product/small/light/components/status.d.ts +84 -60
- package/js/es6/product/small/light/components/status.js +67 -48
- package/js/es6/product/small/light/mode.d.ts +11 -9
- package/js/es6/product/small/light/mode.js +7 -11
- package/js/umd/frozenproduct/large/dark/components/logo.js +1 -70
- package/js/umd/frozenproduct/large/dark/components/status.js +1554 -883
- package/js/umd/frozenproduct/large/dark/mode.js +403 -193
- package/js/umd/frozenproduct/large/light/components/logo.js +1 -70
- package/js/umd/frozenproduct/large/light/components/status.js +1554 -883
- package/js/umd/frozenproduct/large/light/mode.js +409 -99
- package/js/umd/frozenproduct/small/dark/components/logo.js +1 -70
- package/js/umd/frozenproduct/small/dark/components/status.js +1554 -883
- package/js/umd/frozenproduct/small/dark/mode.js +403 -193
- package/js/umd/frozenproduct/small/light/components/logo.js +1 -70
- package/js/umd/frozenproduct/small/light/components/status.js +1554 -883
- package/js/umd/frozenproduct/small/light/mode.js +409 -99
- package/js/umd/marketing/large/dark/components/logo.js +1 -70
- package/js/umd/marketing/large/dark/components/status.js +1554 -883
- package/js/umd/marketing/large/dark/mode.js +403 -193
- package/js/umd/marketing/large/light/components/logo.js +1 -70
- package/js/umd/marketing/large/light/components/status.js +1554 -883
- package/js/umd/marketing/large/light/mode.js +409 -99
- package/js/umd/marketing/small/dark/components/logo.js +1 -70
- package/js/umd/marketing/small/dark/components/status.js +1554 -883
- package/js/umd/marketing/small/dark/mode.js +403 -193
- package/js/umd/marketing/small/light/components/logo.js +1 -70
- package/js/umd/marketing/small/light/components/status.js +1554 -883
- package/js/umd/marketing/small/light/mode.js +409 -99
- package/js/umd/product/large/dark/components/logo.js +1 -70
- package/js/umd/product/large/dark/components/status.js +1554 -883
- package/js/umd/product/large/dark/mode.js +403 -193
- package/js/umd/product/large/light/components/logo.js +1 -70
- package/js/umd/product/large/light/components/status.js +1554 -883
- package/js/umd/product/large/light/mode.js +409 -99
- package/js/umd/product/small/dark/components/logo.js +1 -70
- package/js/umd/product/small/dark/components/status.js +1554 -883
- package/js/umd/product/small/dark/mode.js +403 -193
- package/js/umd/product/small/light/components/logo.js +1 -70
- package/js/umd/product/small/light/components/status.js +1554 -883
- package/js/umd/product/small/light/mode.js +409 -99
- package/json/flat/frozenproduct/large/dark/components/logo.json +0 -5
- package/json/flat/frozenproduct/large/dark/components/status.json +67 -48
- package/json/flat/frozenproduct/large/dark/mode.json +12 -14
- package/json/flat/frozenproduct/large/light/components/logo.json +0 -5
- package/json/flat/frozenproduct/large/light/components/status.json +67 -48
- package/json/flat/frozenproduct/large/light/mode.json +7 -9
- package/json/flat/frozenproduct/small/dark/components/logo.json +0 -5
- package/json/flat/frozenproduct/small/dark/components/status.json +67 -48
- package/json/flat/frozenproduct/small/dark/mode.json +12 -14
- package/json/flat/frozenproduct/small/light/components/logo.json +0 -5
- package/json/flat/frozenproduct/small/light/components/status.json +67 -48
- package/json/flat/frozenproduct/small/light/mode.json +7 -9
- package/json/flat/marketing/large/dark/components/logo.json +0 -5
- package/json/flat/marketing/large/dark/components/status.json +67 -48
- package/json/flat/marketing/large/dark/mode.json +12 -14
- package/json/flat/marketing/large/light/components/logo.json +0 -5
- package/json/flat/marketing/large/light/components/status.json +67 -48
- package/json/flat/marketing/large/light/mode.json +7 -9
- package/json/flat/marketing/small/dark/components/logo.json +0 -5
- package/json/flat/marketing/small/dark/components/status.json +67 -48
- package/json/flat/marketing/small/dark/mode.json +12 -14
- package/json/flat/marketing/small/light/components/logo.json +0 -5
- package/json/flat/marketing/small/light/components/status.json +67 -48
- package/json/flat/marketing/small/light/mode.json +7 -9
- package/json/flat/product/large/dark/components/logo.json +0 -5
- package/json/flat/product/large/dark/components/status.json +67 -48
- package/json/flat/product/large/dark/mode.json +12 -14
- package/json/flat/product/large/light/components/logo.json +0 -5
- package/json/flat/product/large/light/components/status.json +67 -48
- package/json/flat/product/large/light/mode.json +7 -9
- package/json/flat/product/small/dark/components/logo.json +0 -5
- package/json/flat/product/small/dark/components/status.json +67 -48
- package/json/flat/product/small/dark/mode.json +12 -14
- package/json/flat/product/small/light/components/logo.json +0 -5
- package/json/flat/product/small/light/components/status.json +67 -48
- package/json/flat/product/small/light/mode.json +7 -9
- package/json/nested/frozenproduct/large/dark/components/logo.json +0 -7
- package/json/nested/frozenproduct/large/dark/components/status.json +103 -60
- package/json/nested/frozenproduct/large/dark/mode.json +18 -22
- package/json/nested/frozenproduct/large/light/components/logo.json +0 -7
- package/json/nested/frozenproduct/large/light/components/status.json +103 -60
- package/json/nested/frozenproduct/large/light/mode.json +10 -14
- package/json/nested/frozenproduct/small/dark/components/logo.json +0 -7
- package/json/nested/frozenproduct/small/dark/components/status.json +103 -60
- package/json/nested/frozenproduct/small/dark/mode.json +18 -22
- package/json/nested/frozenproduct/small/light/components/logo.json +0 -7
- package/json/nested/frozenproduct/small/light/components/status.json +103 -60
- package/json/nested/frozenproduct/small/light/mode.json +10 -14
- package/json/nested/marketing/large/dark/components/logo.json +0 -7
- package/json/nested/marketing/large/dark/components/status.json +103 -60
- package/json/nested/marketing/large/dark/mode.json +18 -22
- package/json/nested/marketing/large/light/components/logo.json +0 -7
- package/json/nested/marketing/large/light/components/status.json +103 -60
- package/json/nested/marketing/large/light/mode.json +10 -14
- package/json/nested/marketing/small/dark/components/logo.json +0 -7
- package/json/nested/marketing/small/dark/components/status.json +103 -60
- package/json/nested/marketing/small/dark/mode.json +18 -22
- package/json/nested/marketing/small/light/components/logo.json +0 -7
- package/json/nested/marketing/small/light/components/status.json +103 -60
- package/json/nested/marketing/small/light/mode.json +10 -14
- package/json/nested/product/large/dark/components/logo.json +0 -7
- package/json/nested/product/large/dark/components/status.json +103 -60
- package/json/nested/product/large/dark/mode.json +18 -22
- package/json/nested/product/large/light/components/logo.json +0 -7
- package/json/nested/product/large/light/components/status.json +103 -60
- package/json/nested/product/large/light/mode.json +10 -14
- package/json/nested/product/small/dark/components/logo.json +0 -7
- package/json/nested/product/small/dark/components/status.json +103 -60
- package/json/nested/product/small/dark/mode.json +18 -22
- package/json/nested/product/small/light/components/logo.json +0 -7
- package/json/nested/product/small/light/components/status.json +103 -60
- package/json/nested/product/small/light/mode.json +10 -14
- package/package.json +1 -1
- package/sage-design-tokens-6.0.0.tgz +0 -0
- package/scss/frozenproduct/large/components/button.scss +22 -22
- package/scss/frozenproduct/large/components/container.scss +9 -9
- package/scss/frozenproduct/large/components/form.scss +7 -7
- package/scss/frozenproduct/large/components/link.scss +2 -2
- package/scss/frozenproduct/large/components/logo.scss +1 -6
- package/scss/frozenproduct/large/components/nav.scss +3 -3
- package/scss/frozenproduct/large/components/page.scss +1 -1
- package/scss/frozenproduct/large/components/popover.scss +2 -2
- package/scss/frozenproduct/large/components/progress.scss +6 -6
- package/scss/frozenproduct/large/components/status.scss +67 -48
- package/scss/frozenproduct/large/components/tab.scss +7 -7
- package/scss/frozenproduct/large/components/table.scss +11 -11
- package/scss/frozenproduct/large/dark.scss +12 -14
- package/scss/frozenproduct/large/light.scss +7 -9
- package/scss/frozenproduct/small/components/logo.scss +1 -6
- package/scss/frozenproduct/small/components/status.scss +67 -48
- package/scss/frozenproduct/small/dark.scss +12 -14
- package/scss/frozenproduct/small/light.scss +7 -9
- package/scss/marketing/large/components/button.scss +22 -22
- package/scss/marketing/large/components/container.scss +9 -9
- package/scss/marketing/large/components/form.scss +7 -7
- package/scss/marketing/large/components/link.scss +2 -2
- package/scss/marketing/large/components/logo.scss +1 -6
- package/scss/marketing/large/components/nav.scss +3 -3
- package/scss/marketing/large/components/page.scss +1 -1
- package/scss/marketing/large/components/popover.scss +2 -2
- package/scss/marketing/large/components/progress.scss +6 -6
- package/scss/marketing/large/components/status.scss +67 -48
- package/scss/marketing/large/components/tab.scss +7 -7
- package/scss/marketing/large/components/table.scss +11 -11
- package/scss/marketing/large/dark.scss +12 -14
- package/scss/marketing/large/light.scss +7 -9
- package/scss/marketing/small/components/logo.scss +1 -6
- package/scss/marketing/small/components/status.scss +67 -48
- package/scss/marketing/small/dark.scss +12 -14
- package/scss/marketing/small/light.scss +7 -9
- package/scss/product/large/components/button.scss +22 -22
- 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/logo.scss +1 -6
- 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/progress.scss +6 -6
- package/scss/product/large/components/status.scss +67 -48
- package/scss/product/large/components/tab.scss +7 -7
- package/scss/product/large/components/table.scss +11 -11
- package/scss/product/large/dark.scss +12 -14
- package/scss/product/large/light.scss +7 -9
- package/scss/product/small/components/logo.scss +1 -6
- package/scss/product/small/components/status.scss +67 -48
- package/scss/product/small/dark.scss +12 -14
- package/scss/product/small/light.scss +7 -9
- package/sage-design-tokens-5.2.0.tgz +0 -0
|
@@ -5,31 +5,46 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
|
|
7
7
|
--status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
|
|
8
|
-
--status-color-bg-default: var(--modes-color-
|
|
9
|
-
--status-color-
|
|
10
|
-
--status-color-
|
|
11
|
-
--status-color-
|
|
12
|
-
--status-color-
|
|
13
|
-
--status-color-
|
|
14
|
-
--status-color-
|
|
15
|
-
--status-color-
|
|
16
|
-
--status-color-
|
|
17
|
-
--status-color-
|
|
18
|
-
--status-color-
|
|
19
|
-
--status-color-
|
|
20
|
-
--status-color-
|
|
21
|
-
--status-color-
|
|
22
|
-
--status-color-
|
|
23
|
-
--status-color-
|
|
24
|
-
--status-color-
|
|
25
|
-
--status-color-success-bg-
|
|
26
|
-
--status-color-success-
|
|
27
|
-
--status-color-success-
|
|
28
|
-
--status-color-
|
|
29
|
-
--status-color-warning-bg-
|
|
30
|
-
--status-color-warning-bg-alt
|
|
31
|
-
--status-color-warning-border-default: var(--modes-color-status-caution-default);
|
|
32
|
-
--status-color-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
|
|
8
|
+
--status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
|
|
9
|
+
--status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
|
|
10
|
+
--status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
|
|
11
|
+
--status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
|
|
12
|
+
--status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
|
|
13
|
+
--status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
|
|
14
|
+
--status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
|
|
15
|
+
--status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
|
|
16
|
+
--status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
|
|
17
|
+
--status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
|
|
18
|
+
--status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
|
|
19
|
+
--status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
|
|
20
|
+
--status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
|
|
21
|
+
--status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
|
|
22
|
+
--status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
|
|
23
|
+
--status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
|
|
24
|
+
--status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
|
|
25
|
+
--status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
|
|
26
|
+
--status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
|
|
27
|
+
--status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
|
|
28
|
+
--status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
|
|
29
|
+
--status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
|
|
30
|
+
--status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
|
|
31
|
+
--status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
|
|
32
|
+
--status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
|
|
33
|
+
--status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
|
|
34
|
+
--status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
|
|
35
|
+
--status-color-pill-error-border-default: var(--modes-color-status-negative-default);
|
|
36
|
+
--status-color-pill-info-bg-default: var(--modes-color-status-info-default);
|
|
37
|
+
--status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
|
|
38
|
+
--status-color-pill-info-border-default: var(--modes-color-status-info-default);
|
|
39
|
+
--status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
|
|
40
|
+
--status-color-pill-neutral-bg-alt-default: var(--modes-color-status-neutral-default-alt); /* outline pill bg */
|
|
41
|
+
--status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
|
|
42
|
+
--status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
|
|
43
|
+
--status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
|
|
44
|
+
--status-color-pill-success-border-default: var(--modes-color-status-positive-default);
|
|
45
|
+
--status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
|
|
46
|
+
--status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
|
|
47
|
+
--status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
|
|
33
48
|
--status-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
|
|
34
49
|
--status-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
|
|
35
50
|
--status-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
|
|
@@ -48,31 +63,35 @@
|
|
|
48
63
|
--status-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-s);
|
|
49
64
|
--status-typography-responsive-heading-m: var(--global-typography-responsive-component-firm-m);
|
|
50
65
|
--status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
|
|
51
|
-
--status-color-
|
|
52
|
-
--status-color-
|
|
53
|
-
--status-color-
|
|
54
|
-
--status-color-
|
|
55
|
-
--status-color-ai-
|
|
56
|
-
--status-color-
|
|
57
|
-
--status-color-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
|
|
58
|
-
--status-color-error-bg-hover: var(--modes-color-status-negative-hover);
|
|
59
|
-
--status-color-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
|
|
60
|
-
--status-color-info-bg-hover: var(--modes-color-status-info-hover);
|
|
61
|
-
--status-color-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
|
|
62
|
-
--status-color-neutral-bg-hover: var(--modes-color-status-neutral-hover);
|
|
66
|
+
--status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
|
|
67
|
+
--status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
|
|
68
|
+
--status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
|
|
69
|
+
--status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
|
|
70
|
+
--status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
|
|
71
|
+
--status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
|
|
72
|
+
--status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
|
|
73
|
+
--status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
|
|
74
|
+
--status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
|
|
75
|
+
--status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
|
|
76
|
+
--status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
|
|
77
|
+
--status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
|
|
78
|
+
--status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
|
|
79
|
+
--status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
|
|
80
|
+
--status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
|
|
81
|
+
--status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
|
|
82
|
+
--status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
|
|
63
83
|
--status-color-rating-bg-default: var(--modes-color-status-reviews-default);
|
|
64
84
|
--status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
|
|
65
85
|
--status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
|
|
66
86
|
--status-color-rating-border-default: var(--modes-color-status-reviews-default);
|
|
67
|
-
--status-color-
|
|
68
|
-
--status-color-
|
|
69
|
-
--status-color-
|
|
70
|
-
--status-color-
|
|
71
|
-
--status-color-
|
|
72
|
-
--status-color-label-
|
|
73
|
-
--status-color-label-
|
|
74
|
-
--status-color-label-hover: var(--modes-color-status-content-with-
|
|
75
|
-
--status-color-label-alt-default: var(--modes-color-status-content-with-default-alt);
|
|
87
|
+
--status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
|
|
88
|
+
--status-color-message-global-label-hover: var(--modes-color-status-content-with-default-alt);
|
|
89
|
+
--status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
|
|
90
|
+
--status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
|
|
91
|
+
--status-color-pill-label-default: var(--modes-color-status-content-with-default);
|
|
92
|
+
--status-color-pill-label-hover: var(--modes-color-status-content-with-hover);
|
|
93
|
+
--status-color-pill-label-alt-default: var(--modes-color-status-content-with-default-alt);
|
|
94
|
+
--status-color-pill-label-alt-hover: var(--modes-color-status-content-with-default-alt);
|
|
76
95
|
--status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
|
|
77
96
|
--status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
|
|
78
97
|
--status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
|
|
@@ -108,7 +127,7 @@
|
|
|
108
127
|
--status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
|
|
109
128
|
--status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
|
|
110
129
|
--status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
|
|
111
|
-
--status-color-bg-
|
|
112
|
-
--status-color-border-
|
|
130
|
+
--status-color-pill-readonly-bg-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
|
|
131
|
+
--status-color-pill-readonly-border-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
|
|
113
132
|
--status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
|
|
114
133
|
}
|
|
@@ -9,12 +9,7 @@
|
|
|
9
9
|
--modes-color-brand-with-default-alt: #000000;
|
|
10
10
|
--modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
|
|
11
11
|
--modes-color-brand-copilot-ai-identifier-with-default: #00D639;
|
|
12
|
-
--modes-color-brand-copilot-no-bg-
|
|
13
|
-
--modes-color-brand-copilot-no-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
|
|
14
|
-
--modes-color-brand-copilot-no-bg-mono: #FFFFFF;
|
|
15
|
-
--modes-color-brand-copilot-with-bg-s: #000000;
|
|
16
|
-
--modes-color-brand-copilot-with-bg-star: #000000;
|
|
17
|
-
--modes-color-brand-copilot-with-bg-bg: #FFFFFF;
|
|
12
|
+
--modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
|
|
18
13
|
--modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
|
|
19
14
|
--modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
|
|
20
15
|
--modes-color-generic-bg-nought: #000000;
|
|
@@ -117,17 +112,18 @@
|
|
|
117
112
|
--modes-color-interactive-progress-bg: #ffffff14;
|
|
118
113
|
--modes-color-interactive-progress-bg-alt: #00000014;
|
|
119
114
|
--modes-color-interactive-progress-frozen-bg: #ffffff14;
|
|
120
|
-
--modes-color-status-ai-default: #000000;
|
|
121
|
-
--modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
|
|
122
|
-
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
|
|
123
|
-
--modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
|
|
124
|
-
--modes-color-status-generic-default: #008a89;
|
|
125
115
|
--modes-color-status-caution-default: #E04500;
|
|
126
116
|
--modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
|
|
127
117
|
--modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
|
|
128
118
|
--modes-color-status-caution-hover-alt: #34211a; /* used on pill hover states and message bg */
|
|
129
119
|
--modes-color-status-caution-text: #e75b23;
|
|
130
|
-
--modes-color-status-caution-
|
|
120
|
+
--modes-color-status-caution-frozenglobal-default: #E04500; /* Global message bg */
|
|
121
|
+
--modes-color-status-caution-frozenglobal-hover: #eb6732; /* used on global message bg */
|
|
122
|
+
--modes-color-status-ai-default: #000000;
|
|
123
|
+
--modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
|
|
124
|
+
--modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
|
|
125
|
+
--modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
|
|
126
|
+
--modes-color-status-generic-default: #008a89;
|
|
131
127
|
--modes-color-status-content-with-default: #000000;
|
|
132
128
|
--modes-color-status-content-with-default-alt: #fffffff2;
|
|
133
129
|
--modes-color-status-content-with-hover: #000000;
|
|
@@ -139,19 +135,21 @@
|
|
|
139
135
|
--modes-color-status-info-default-alt: #111722; /* Subtle message bg */
|
|
140
136
|
--modes-color-status-info-hover: #5291e0; /* used on pill hover states */
|
|
141
137
|
--modes-color-status-info-hover-alt: #212631; /* used on pill hover states and message bg */
|
|
142
|
-
--modes-color-status-info-
|
|
138
|
+
--modes-color-status-info-frozenglobal-default: #007ED9; /* Global message bg */
|
|
139
|
+
--modes-color-status-info-frozenglobal-hover: #5291e0; /* used on global message bg */
|
|
143
140
|
--modes-color-status-negative-default: #E13E53;
|
|
144
141
|
--modes-color-status-negative-default-alt: #241212; /* Subtle message bg */
|
|
145
142
|
--modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
|
|
146
143
|
--modes-color-status-negative-hover-alt: #332122; /* used on pill hover states and message bg */
|
|
147
144
|
--modes-color-status-negative-text: #E13E53;
|
|
148
|
-
--modes-color-status-neutral-alt: #7C7C7C;
|
|
149
145
|
--modes-color-status-neutral-default: #7C7C7C;
|
|
150
146
|
--modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
|
|
151
147
|
--modes-color-status-neutral-hover: #909090; /* used on pill hover states */
|
|
152
148
|
--modes-color-status-neutral-hover-alt: #262626; /* used on pill hover states and message bg */
|
|
153
149
|
--modes-color-status-neutral-frozen-default: #9e9e9e;
|
|
150
|
+
--modes-color-status-neutral-frozen-default-alt: #171717; /* Subtle message bg */
|
|
154
151
|
--modes-color-status-neutral-frozen-hover: #909090;
|
|
152
|
+
--modes-color-status-neutral-frozen-hover-alt: #262626; /* used on pill hover states and message bg */
|
|
155
153
|
--modes-color-status-positive-default: #009023;
|
|
156
154
|
--modes-color-status-positive-default-alt: #0e1a0b; /* Subtle message bg */
|
|
157
155
|
--modes-color-status-positive-hover: #2e9936; /* used on pill hover states */
|
|
@@ -9,12 +9,7 @@
|
|
|
9
9
|
--modes-color-brand-with-default-alt: #FFFFFF;
|
|
10
10
|
--modes-color-brand-copilot-ai-identifier-default: #000000;
|
|
11
11
|
--modes-color-brand-copilot-ai-identifier-with-default: #00D639;
|
|
12
|
-
--modes-color-brand-copilot-no-bg-
|
|
13
|
-
--modes-color-brand-copilot-no-bg-star: #000000;
|
|
14
|
-
--modes-color-brand-copilot-no-bg-mono: #000000;
|
|
15
|
-
--modes-color-brand-copilot-with-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
|
|
16
|
-
--modes-color-brand-copilot-with-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
|
|
17
|
-
--modes-color-brand-copilot-with-bg-bg: #000000;
|
|
12
|
+
--modes-color-brand-copilot-no-bg-monochrome: #000000;
|
|
18
13
|
--modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
|
|
19
14
|
--modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
|
|
20
15
|
--modes-color-generic-bg-nought: #FFFFFF;
|
|
@@ -127,7 +122,8 @@
|
|
|
127
122
|
--modes-color-status-caution-hover: #b13a0d; /* used on pill hover states */
|
|
128
123
|
--modes-color-status-caution-hover-alt: #f1e0d8; /* used on pill hover states and message bg */
|
|
129
124
|
--modes-color-status-caution-text: #bf3e0c;
|
|
130
|
-
--modes-color-status-caution-
|
|
125
|
+
--modes-color-status-caution-frozenglobal-default: #ff8629; /* used on global message bg */
|
|
126
|
+
--modes-color-status-caution-frozenglobal-hover: #ff9a4e; /* used on global message bg */
|
|
131
127
|
--modes-color-status-content-with-default: #FFFFFF;
|
|
132
128
|
--modes-color-status-content-with-default-alt: #000000f2;
|
|
133
129
|
--modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
|
|
@@ -139,19 +135,21 @@
|
|
|
139
135
|
--modes-color-status-info-default-alt: #eaeef6; /* Subtle message bg */
|
|
140
136
|
--modes-color-status-info-hover: #10508a; /* used on pill hover states */
|
|
141
137
|
--modes-color-status-info-hover-alt: #dde1e8; /* used on pill hover states and message bg */
|
|
142
|
-
--modes-color-status-info-
|
|
138
|
+
--modes-color-status-info-frozenglobal-default: #65a9ff; /* used on global message bg */
|
|
139
|
+
--modes-color-status-info-frozenglobal-hover: #84b6ff; /* used on global message bg */
|
|
143
140
|
--modes-color-status-negative-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
|
|
144
141
|
--modes-color-status-negative-default-alt: #fdeceb; /* Subtle message bg */
|
|
145
142
|
--modes-color-status-negative-hover: #aa323f; /* used on pill hover states */
|
|
146
143
|
--modes-color-status-negative-hover-alt: #efdfde; /* used on pill hover states and message bg */
|
|
147
144
|
--modes-color-status-negative-text: #CD384B;
|
|
148
|
-
--modes-color-status-neutral-alt: #656565;
|
|
149
145
|
--modes-color-status-neutral-default: #656565;
|
|
150
146
|
--modes-color-status-neutral-default-alt: #efefef; /* Subtle message bg */
|
|
151
147
|
--modes-color-status-neutral-hover: #555; /* used on pill hover states */
|
|
152
148
|
--modes-color-status-neutral-hover-alt: #e2e2e2; /* used on pill hover states and message bg */
|
|
153
149
|
--modes-color-status-neutral-frozen-default: #335B70;
|
|
150
|
+
--modes-color-status-neutral-frozen-default-alt: #eaedf0; /* Subtle message bg */
|
|
154
151
|
--modes-color-status-neutral-frozen-hover: #20313b;
|
|
152
|
+
--modes-color-status-neutral-frozen-hover-alt: #dde0e2; /* used on pill hover states and message bg */
|
|
155
153
|
--modes-color-status-positive-default: #008A21; /* For pills and messages. Not accessible with white TEXT. */
|
|
156
154
|
--modes-color-status-positive-default-alt: #eaf3e8; /* Subtle message bg */
|
|
157
155
|
--modes-color-status-positive-hover: #0f731e; /* used on pill hover states */
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
--button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
|
|
22
22
|
--button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
|
|
23
23
|
--button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
|
|
24
|
-
--button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
25
|
-
--button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
26
|
-
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
27
24
|
--button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
|
|
28
25
|
--button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
|
|
29
26
|
--button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
|
|
@@ -48,7 +45,6 @@
|
|
|
48
45
|
--button-typography-responsive-subtle-s: var(--global-typography-responsive-component-firm-s);
|
|
49
46
|
--button-typography-responsive-subtle-m: var(--global-typography-responsive-component-firm-m);
|
|
50
47
|
--button-typography-responsive-subtle-l: var(--global-typography-responsive-component-firm-l);
|
|
51
|
-
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
52
48
|
--button-color-ai-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
53
49
|
--button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
|
|
54
50
|
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
|
@@ -56,25 +52,17 @@
|
|
|
56
52
|
--button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
|
|
57
53
|
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
|
|
58
54
|
--button-color-typical-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
59
|
-
--button-color-typical-secondary-border-
|
|
60
|
-
--button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
61
|
-
--button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
55
|
+
--button-color-typical-secondary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
62
56
|
--button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
63
57
|
--button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
64
|
-
--button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
65
58
|
--button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
66
|
-
--button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
|
|
67
59
|
--button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
68
|
-
--button-color-typical-tertiary-
|
|
60
|
+
--button-color-typical-tertiary-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
69
61
|
--button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
62
|
+
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
70
63
|
--button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
71
|
-
--button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
72
|
-
--button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
73
64
|
--button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
|
|
74
65
|
--button-color-video-bg-blur: var(--modes-color-interactive-monochrome-generic-hover-alt);
|
|
75
|
-
--button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
76
|
-
--button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
77
|
-
--button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
78
66
|
--button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
|
|
79
67
|
--button-size-s: var(--global-size-macro-s); /* min-height on S Buttons */
|
|
80
68
|
--button-size-m: var(--global-size-macro-m); /* min-height on M Buttons */
|
|
@@ -164,8 +152,8 @@
|
|
|
164
152
|
--button-space-video-x-s: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
165
153
|
--button-space-video-x-m: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
166
154
|
--button-space-video-x-l: var(--global-space-micro-xs); /* Left padding on play icon in video button */
|
|
167
|
-
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
168
155
|
--button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
156
|
+
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
169
157
|
--button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
170
158
|
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
|
171
159
|
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
|
@@ -177,25 +165,30 @@
|
|
|
177
165
|
--button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
178
166
|
--button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
|
|
179
167
|
--button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
|
|
180
|
-
--button-color-typical-secondary-
|
|
181
|
-
--button-color-typical-secondary-
|
|
168
|
+
--button-color-typical-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
169
|
+
--button-color-typical-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
182
170
|
--button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
183
|
-
--button-color-typical-
|
|
184
|
-
--button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
171
|
+
--button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
185
172
|
--button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
186
|
-
--button-color-typical-
|
|
187
|
-
--button-color-typical-tertiary-
|
|
173
|
+
--button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
174
|
+
--button-color-typical-tertiary-bg-enabled: var(--modes-color-interactive-monochrome-subtle-default);
|
|
188
175
|
--button-color-typical-tertiary-label-active-copy: var(--modes-color-interactive-monochrome-frozen-with-active);
|
|
189
176
|
--button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
177
|
+
--button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
190
178
|
--button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
|
|
179
|
+
--button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
191
180
|
--button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
|
|
192
181
|
--button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
|
|
182
|
+
--button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
|
|
193
183
|
--button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
194
184
|
--button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
185
|
+
--button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
|
|
186
|
+
--button-color-video-primary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
195
187
|
--button-color-video-secondary-bg-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
196
188
|
--button-color-video-secondary-border-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
197
189
|
--button-color-video-secondary-border-hover: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
198
190
|
--button-color-video-secondary-label-enabled: var(--modes-color-interactive-monochrome-generic-with-default);
|
|
191
|
+
--button-color-video-secondary-label-hover: var(--modes-color-interactive-monochrome-generic-default);
|
|
199
192
|
--button-radius-s: var(--global-radius-interactive-l); /* Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container) */
|
|
200
193
|
--button-radius-m: var(--global-radius-interactive-xl); /* Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container) */
|
|
201
194
|
--button-radius-l: var(--global-radius-interactive-xxl); /* Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container) */
|
|
@@ -216,11 +209,18 @@
|
|
|
216
209
|
--button-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary button. */
|
|
217
210
|
--button-borderwidth-togglecontainer: var(--global-borderwidth-xs); /* Toggle container */
|
|
218
211
|
--button-color-ai-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
212
|
+
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
219
213
|
--button-color-destructive-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
|
|
220
214
|
--button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
221
215
|
--button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
|
|
216
|
+
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
222
217
|
--button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
218
|
+
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
219
|
+
--button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
220
|
+
--button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
221
|
+
--button-color-typical-tertiary-bg-active: var(--modes-color-interactive-monochrome-generic-active-alt);
|
|
223
222
|
--button-color-typical-tertiary-bg-active-disabled: var(--modes-color-interactive-inactive-default);
|
|
224
223
|
--button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
|
|
224
|
+
--button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-generic-with-active-alt);
|
|
225
225
|
--button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
|
|
226
226
|
}
|
|
@@ -10,20 +10,15 @@
|
|
|
10
10
|
--container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
|
|
11
11
|
--container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
|
|
12
12
|
--container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
|
|
13
|
-
--container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
14
13
|
--container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
|
|
15
14
|
--container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
|
|
16
15
|
--container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
|
|
17
16
|
--container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
|
|
18
17
|
--container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
|
|
19
18
|
--container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
|
|
20
|
-
--container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
21
19
|
--container-color-interactive-border-activated: var(--modes-color-status-positive-default);
|
|
22
20
|
--container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
|
|
23
21
|
--container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
|
|
24
|
-
--container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
25
|
-
--container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
|
|
26
|
-
--container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
|
|
27
22
|
--container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
|
|
28
23
|
--container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
|
|
29
24
|
--container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
|
|
@@ -44,17 +39,18 @@
|
|
|
44
39
|
--container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
|
|
45
40
|
--container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
|
|
46
41
|
--container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color */
|
|
42
|
+
--container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
47
43
|
--container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
|
|
48
44
|
--container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
|
|
49
45
|
--container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc */
|
|
50
46
|
--container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
|
|
47
|
+
--container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
51
48
|
--container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds */
|
|
52
|
-
--container-color-interactive-
|
|
53
|
-
--container-color-interactive-icon-
|
|
54
|
-
--container-color-interactive-
|
|
49
|
+
--container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
|
|
50
|
+
--container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-generic-active); /* Active chevron for any accordion. */
|
|
51
|
+
--container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
|
|
55
52
|
--container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
|
|
56
53
|
--container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
|
|
57
|
-
--container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
|
|
58
54
|
--container-color-blockquote-border: var(--modes-color-interactive-primary-default);
|
|
59
55
|
--container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
|
|
60
56
|
--container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
|
|
@@ -74,9 +70,13 @@
|
|
|
74
70
|
--container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview. */
|
|
75
71
|
--container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
|
|
76
72
|
--container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
|
|
73
|
+
--container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-generic-default); /* Enabled chevron for any accordion. */
|
|
74
|
+
--container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-generic-default-alt); /* Enabled label for subtle accordion. */
|
|
75
|
+
--container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover chevron for any accordion. */
|
|
77
76
|
--container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-generic-with-active);
|
|
78
77
|
--container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
|
|
79
78
|
--container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
|
|
79
|
+
--container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
|
|
80
80
|
--container-size-none: var(--global-size-none);
|
|
81
81
|
--container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
|
|
82
82
|
--container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
|
|
@@ -4,16 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
6
|
--logo-size-ai-m: 14px; /* AI star */
|
|
7
|
-
--logo-color-copilot-with-bg-bg-s: var(--modes-color-brand-copilot-with-bg-s);
|
|
8
|
-
--logo-color-copilot-with-bg-bg-star: var(--modes-color-brand-copilot-with-bg-star);
|
|
9
7
|
--logo-color-sage-bg-default: var(--modes-color-brand-default); /* sage logo */
|
|
10
8
|
--logo-color-sage-bg-alt: var(--modes-color-brand-default-alt);
|
|
11
9
|
--logo-color-trust-bg-default: var(--modes-color-status-positive-default); /* filled */
|
|
12
10
|
--logo-color-trust-outline: var(--modes-color-generic-content-extreme);
|
|
13
|
-
--logo-color-copilot-no-bg-
|
|
14
|
-
--logo-color-copilot-no-bg-bg-star: var(--modes-color-brand-copilot-no-bg-star);
|
|
15
|
-
--logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-mono);
|
|
16
|
-
--logo-color-copilot-with-bg-bg-default: var(--modes-color-brand-copilot-with-bg-bg);
|
|
11
|
+
--logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-monochrome);
|
|
17
12
|
--logo-color-ai-identifier-bg-star: var(--modes-color-brand-copilot-ai-identifier-default); /* star bg color */
|
|
18
13
|
--logo-color-ai-identifier-bg-dot: var(--modes-color-brand-copilot-ai-identifier-with-default);
|
|
19
14
|
--logo-color-ai-identifier-outline: var(--modes-color-brand-copilot-ai-identifier-default); /* star outline variant */
|