@sage/design-tokens 13.1.0 → 13.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 +55 -13
- package/css/frozenproduct/large/components/button.css +16 -7
- package/css/frozenproduct/large/components/focus.css +4 -0
- package/css/frozenproduct/large/components/link.css +2 -0
- package/css/frozenproduct/large/components/table.css +1 -0
- package/css/frozenproduct/large/dark.css +16 -3
- package/css/frozenproduct/large/light.css +16 -3
- package/css/frozenproduct/small/components/button.css +16 -7
- package/css/frozenproduct/small/components/focus.css +4 -0
- package/css/frozenproduct/small/components/link.css +2 -0
- package/css/frozenproduct/small/components/table.css +1 -0
- package/css/frozenproduct/small/dark.css +16 -3
- package/css/frozenproduct/small/light.css +16 -3
- package/css/marketing/all.css +55 -13
- package/css/marketing/large/components/button.css +16 -7
- package/css/marketing/large/components/focus.css +4 -0
- package/css/marketing/large/components/link.css +2 -0
- package/css/marketing/large/components/table.css +1 -0
- package/css/marketing/large/dark.css +16 -3
- package/css/marketing/large/light.css +16 -3
- package/css/marketing/small/components/button.css +16 -7
- package/css/marketing/small/components/focus.css +4 -0
- package/css/marketing/small/components/link.css +2 -0
- package/css/marketing/small/components/table.css +1 -0
- package/css/marketing/small/dark.css +16 -3
- package/css/marketing/small/light.css +16 -3
- package/css/product/all.css +55 -13
- package/css/product/large/components/button.css +16 -7
- package/css/product/large/components/focus.css +4 -0
- package/css/product/large/components/link.css +2 -0
- package/css/product/large/components/table.css +1 -0
- package/css/product/large/dark.css +16 -3
- package/css/product/large/light.css +16 -3
- package/css/product/small/components/button.css +16 -7
- package/css/product/small/components/focus.css +4 -0
- package/css/product/small/components/link.css +2 -0
- package/css/product/small/components/table.css +1 -0
- package/css/product/small/dark.css +16 -3
- package/css/product/small/light.css +16 -3
- package/ios/frozenproduct/large/dark/components/button.h +10 -1
- package/ios/frozenproduct/large/dark/components/focus.h +4 -0
- package/ios/frozenproduct/large/dark/components/link.h +2 -0
- package/ios/frozenproduct/large/dark/components/table.h +1 -0
- package/ios/frozenproduct/large/dark/mode.h +16 -3
- package/ios/frozenproduct/large/light/components/button.h +10 -1
- package/ios/frozenproduct/large/light/components/focus.h +4 -0
- package/ios/frozenproduct/large/light/components/link.h +2 -0
- package/ios/frozenproduct/large/light/components/table.h +1 -0
- package/ios/frozenproduct/large/light/mode.h +16 -3
- package/ios/frozenproduct/small/dark/components/button.h +10 -1
- package/ios/frozenproduct/small/dark/components/focus.h +4 -0
- package/ios/frozenproduct/small/dark/components/link.h +2 -0
- package/ios/frozenproduct/small/dark/components/table.h +1 -0
- package/ios/frozenproduct/small/dark/mode.h +16 -3
- package/ios/frozenproduct/small/light/components/button.h +10 -1
- package/ios/frozenproduct/small/light/components/focus.h +4 -0
- package/ios/frozenproduct/small/light/components/link.h +2 -0
- package/ios/frozenproduct/small/light/components/table.h +1 -0
- package/ios/frozenproduct/small/light/mode.h +16 -3
- package/ios/marketing/large/dark/components/button.h +10 -1
- package/ios/marketing/large/dark/components/focus.h +4 -0
- package/ios/marketing/large/dark/components/link.h +2 -0
- package/ios/marketing/large/dark/components/table.h +1 -0
- package/ios/marketing/large/dark/mode.h +16 -3
- package/ios/marketing/large/light/components/button.h +10 -1
- package/ios/marketing/large/light/components/focus.h +4 -0
- package/ios/marketing/large/light/components/link.h +2 -0
- package/ios/marketing/large/light/components/table.h +1 -0
- package/ios/marketing/large/light/mode.h +16 -3
- package/ios/marketing/small/dark/components/button.h +10 -1
- package/ios/marketing/small/dark/components/focus.h +4 -0
- package/ios/marketing/small/dark/components/link.h +2 -0
- package/ios/marketing/small/dark/components/table.h +1 -0
- package/ios/marketing/small/dark/mode.h +16 -3
- package/ios/marketing/small/light/components/button.h +10 -1
- package/ios/marketing/small/light/components/focus.h +4 -0
- package/ios/marketing/small/light/components/link.h +2 -0
- package/ios/marketing/small/light/components/table.h +1 -0
- package/ios/marketing/small/light/mode.h +16 -3
- package/ios/product/large/dark/components/button.h +10 -1
- package/ios/product/large/dark/components/focus.h +4 -0
- package/ios/product/large/dark/components/link.h +2 -0
- package/ios/product/large/dark/components/table.h +1 -0
- package/ios/product/large/dark/mode.h +16 -3
- package/ios/product/large/light/components/button.h +10 -1
- package/ios/product/large/light/components/focus.h +4 -0
- package/ios/product/large/light/components/link.h +2 -0
- package/ios/product/large/light/components/table.h +1 -0
- package/ios/product/large/light/mode.h +16 -3
- package/ios/product/small/dark/components/button.h +10 -1
- package/ios/product/small/dark/components/focus.h +4 -0
- package/ios/product/small/dark/components/link.h +2 -0
- package/ios/product/small/dark/components/table.h +1 -0
- package/ios/product/small/dark/mode.h +16 -3
- package/ios/product/small/light/components/button.h +10 -1
- package/ios/product/small/light/components/focus.h +4 -0
- package/ios/product/small/light/components/link.h +2 -0
- package/ios/product/small/light/components/table.h +1 -0
- package/ios/product/small/light/mode.h +16 -3
- package/js/common/frozenproduct/large/dark/components/button.d.ts +11 -0
- package/js/common/frozenproduct/large/dark/components/button.js +185 -1
- package/js/common/frozenproduct/large/dark/components/focus.d.ts +6 -0
- package/js/common/frozenproduct/large/dark/components/focus.js +54 -0
- package/js/common/frozenproduct/large/dark/components/link.d.ts +4 -0
- package/js/common/frozenproduct/large/dark/components/link.js +30 -0
- package/js/common/frozenproduct/large/dark/components/table.d.ts +1 -0
- package/js/common/frozenproduct/large/dark/components/table.js +15 -0
- package/js/common/frozenproduct/large/dark/mode.d.ts +19 -2
- package/js/common/frozenproduct/large/dark/mode.js +447 -26
- package/js/common/frozenproduct/large/light/components/button.d.ts +11 -0
- package/js/common/frozenproduct/large/light/components/button.js +185 -1
- package/js/common/frozenproduct/large/light/components/focus.d.ts +6 -0
- package/js/common/frozenproduct/large/light/components/focus.js +54 -0
- package/js/common/frozenproduct/large/light/components/link.d.ts +4 -0
- package/js/common/frozenproduct/large/light/components/link.js +30 -0
- package/js/common/frozenproduct/large/light/components/table.d.ts +1 -0
- package/js/common/frozenproduct/large/light/components/table.js +15 -0
- package/js/common/frozenproduct/large/light/mode.d.ts +19 -2
- package/js/common/frozenproduct/large/light/mode.js +452 -31
- package/js/common/frozenproduct/small/dark/components/button.d.ts +11 -0
- package/js/common/frozenproduct/small/dark/components/button.js +185 -1
- package/js/common/frozenproduct/small/dark/components/focus.d.ts +6 -0
- package/js/common/frozenproduct/small/dark/components/focus.js +54 -0
- package/js/common/frozenproduct/small/dark/components/link.d.ts +4 -0
- package/js/common/frozenproduct/small/dark/components/link.js +30 -0
- package/js/common/frozenproduct/small/dark/components/table.d.ts +1 -0
- package/js/common/frozenproduct/small/dark/components/table.js +15 -0
- package/js/common/frozenproduct/small/dark/mode.d.ts +19 -2
- package/js/common/frozenproduct/small/dark/mode.js +447 -26
- package/js/common/frozenproduct/small/light/components/button.d.ts +11 -0
- package/js/common/frozenproduct/small/light/components/button.js +185 -1
- package/js/common/frozenproduct/small/light/components/focus.d.ts +6 -0
- package/js/common/frozenproduct/small/light/components/focus.js +54 -0
- package/js/common/frozenproduct/small/light/components/link.d.ts +4 -0
- package/js/common/frozenproduct/small/light/components/link.js +30 -0
- package/js/common/frozenproduct/small/light/components/table.d.ts +1 -0
- package/js/common/frozenproduct/small/light/components/table.js +15 -0
- package/js/common/frozenproduct/small/light/mode.d.ts +19 -2
- package/js/common/frozenproduct/small/light/mode.js +452 -31
- package/js/common/marketing/large/dark/components/button.d.ts +11 -0
- package/js/common/marketing/large/dark/components/button.js +185 -1
- package/js/common/marketing/large/dark/components/focus.d.ts +6 -0
- package/js/common/marketing/large/dark/components/focus.js +54 -0
- package/js/common/marketing/large/dark/components/link.d.ts +4 -0
- package/js/common/marketing/large/dark/components/link.js +30 -0
- package/js/common/marketing/large/dark/components/table.d.ts +1 -0
- package/js/common/marketing/large/dark/components/table.js +15 -0
- package/js/common/marketing/large/dark/mode.d.ts +19 -2
- package/js/common/marketing/large/dark/mode.js +447 -26
- package/js/common/marketing/large/light/components/button.d.ts +11 -0
- package/js/common/marketing/large/light/components/button.js +185 -1
- package/js/common/marketing/large/light/components/focus.d.ts +6 -0
- package/js/common/marketing/large/light/components/focus.js +54 -0
- package/js/common/marketing/large/light/components/link.d.ts +4 -0
- package/js/common/marketing/large/light/components/link.js +30 -0
- package/js/common/marketing/large/light/components/table.d.ts +1 -0
- package/js/common/marketing/large/light/components/table.js +15 -0
- package/js/common/marketing/large/light/mode.d.ts +19 -2
- package/js/common/marketing/large/light/mode.js +452 -31
- package/js/common/marketing/small/dark/components/button.d.ts +11 -0
- package/js/common/marketing/small/dark/components/button.js +185 -1
- package/js/common/marketing/small/dark/components/focus.d.ts +6 -0
- package/js/common/marketing/small/dark/components/focus.js +54 -0
- package/js/common/marketing/small/dark/components/link.d.ts +4 -0
- package/js/common/marketing/small/dark/components/link.js +30 -0
- package/js/common/marketing/small/dark/components/table.d.ts +1 -0
- package/js/common/marketing/small/dark/components/table.js +15 -0
- package/js/common/marketing/small/dark/mode.d.ts +19 -2
- package/js/common/marketing/small/dark/mode.js +447 -26
- package/js/common/marketing/small/light/components/button.d.ts +11 -0
- package/js/common/marketing/small/light/components/button.js +185 -1
- package/js/common/marketing/small/light/components/focus.d.ts +6 -0
- package/js/common/marketing/small/light/components/focus.js +54 -0
- package/js/common/marketing/small/light/components/link.d.ts +4 -0
- package/js/common/marketing/small/light/components/link.js +30 -0
- package/js/common/marketing/small/light/components/table.d.ts +1 -0
- package/js/common/marketing/small/light/components/table.js +15 -0
- package/js/common/marketing/small/light/mode.d.ts +19 -2
- package/js/common/marketing/small/light/mode.js +452 -31
- package/js/common/product/large/dark/components/button.d.ts +11 -0
- package/js/common/product/large/dark/components/button.js +185 -1
- package/js/common/product/large/dark/components/focus.d.ts +6 -0
- package/js/common/product/large/dark/components/focus.js +54 -0
- package/js/common/product/large/dark/components/link.d.ts +4 -0
- package/js/common/product/large/dark/components/link.js +30 -0
- package/js/common/product/large/dark/components/table.d.ts +1 -0
- package/js/common/product/large/dark/components/table.js +15 -0
- package/js/common/product/large/dark/mode.d.ts +19 -2
- package/js/common/product/large/dark/mode.js +447 -26
- package/js/common/product/large/light/components/button.d.ts +11 -0
- package/js/common/product/large/light/components/button.js +185 -1
- package/js/common/product/large/light/components/focus.d.ts +6 -0
- package/js/common/product/large/light/components/focus.js +54 -0
- package/js/common/product/large/light/components/link.d.ts +4 -0
- package/js/common/product/large/light/components/link.js +30 -0
- package/js/common/product/large/light/components/table.d.ts +1 -0
- package/js/common/product/large/light/components/table.js +15 -0
- package/js/common/product/large/light/mode.d.ts +19 -2
- package/js/common/product/large/light/mode.js +452 -31
- package/js/common/product/small/dark/components/button.d.ts +11 -0
- package/js/common/product/small/dark/components/button.js +185 -1
- package/js/common/product/small/dark/components/focus.d.ts +6 -0
- package/js/common/product/small/dark/components/focus.js +54 -0
- package/js/common/product/small/dark/components/link.d.ts +4 -0
- package/js/common/product/small/dark/components/link.js +30 -0
- package/js/common/product/small/dark/components/table.d.ts +1 -0
- package/js/common/product/small/dark/components/table.js +15 -0
- package/js/common/product/small/dark/mode.d.ts +19 -2
- package/js/common/product/small/dark/mode.js +447 -26
- package/js/common/product/small/light/components/button.d.ts +11 -0
- package/js/common/product/small/light/components/button.js +185 -1
- package/js/common/product/small/light/components/focus.d.ts +6 -0
- package/js/common/product/small/light/components/focus.js +54 -0
- package/js/common/product/small/light/components/link.d.ts +4 -0
- package/js/common/product/small/light/components/link.js +30 -0
- package/js/common/product/small/light/components/table.d.ts +1 -0
- package/js/common/product/small/light/components/table.js +15 -0
- package/js/common/product/small/light/mode.d.ts +19 -2
- package/js/common/product/small/light/mode.js +452 -31
- package/js/es6/frozenproduct/large/dark/components/button.d.ts +9 -0
- package/js/es6/frozenproduct/large/dark/components/button.js +10 -1
- package/js/es6/frozenproduct/large/dark/components/focus.d.ts +4 -0
- package/js/es6/frozenproduct/large/dark/components/focus.js +4 -0
- package/js/es6/frozenproduct/large/dark/components/link.d.ts +2 -0
- package/js/es6/frozenproduct/large/dark/components/link.js +2 -0
- package/js/es6/frozenproduct/large/dark/components/table.d.ts +1 -0
- package/js/es6/frozenproduct/large/dark/components/table.js +1 -0
- package/js/es6/frozenproduct/large/dark/mode.d.ts +15 -2
- package/js/es6/frozenproduct/large/dark/mode.js +16 -3
- package/js/es6/frozenproduct/large/light/components/button.d.ts +9 -0
- package/js/es6/frozenproduct/large/light/components/button.js +10 -1
- package/js/es6/frozenproduct/large/light/components/focus.d.ts +4 -0
- package/js/es6/frozenproduct/large/light/components/focus.js +4 -0
- package/js/es6/frozenproduct/large/light/components/link.d.ts +2 -0
- package/js/es6/frozenproduct/large/light/components/link.js +2 -0
- package/js/es6/frozenproduct/large/light/components/table.d.ts +1 -0
- package/js/es6/frozenproduct/large/light/components/table.js +1 -0
- package/js/es6/frozenproduct/large/light/mode.d.ts +15 -2
- package/js/es6/frozenproduct/large/light/mode.js +16 -3
- package/js/es6/frozenproduct/small/dark/components/button.d.ts +9 -0
- package/js/es6/frozenproduct/small/dark/components/button.js +10 -1
- package/js/es6/frozenproduct/small/dark/components/focus.d.ts +4 -0
- package/js/es6/frozenproduct/small/dark/components/focus.js +4 -0
- package/js/es6/frozenproduct/small/dark/components/link.d.ts +2 -0
- package/js/es6/frozenproduct/small/dark/components/link.js +2 -0
- package/js/es6/frozenproduct/small/dark/components/table.d.ts +1 -0
- package/js/es6/frozenproduct/small/dark/components/table.js +1 -0
- package/js/es6/frozenproduct/small/dark/mode.d.ts +15 -2
- package/js/es6/frozenproduct/small/dark/mode.js +16 -3
- package/js/es6/frozenproduct/small/light/components/button.d.ts +9 -0
- package/js/es6/frozenproduct/small/light/components/button.js +10 -1
- package/js/es6/frozenproduct/small/light/components/focus.d.ts +4 -0
- package/js/es6/frozenproduct/small/light/components/focus.js +4 -0
- package/js/es6/frozenproduct/small/light/components/link.d.ts +2 -0
- package/js/es6/frozenproduct/small/light/components/link.js +2 -0
- package/js/es6/frozenproduct/small/light/components/table.d.ts +1 -0
- package/js/es6/frozenproduct/small/light/components/table.js +1 -0
- package/js/es6/frozenproduct/small/light/mode.d.ts +15 -2
- package/js/es6/frozenproduct/small/light/mode.js +16 -3
- package/js/es6/marketing/large/dark/components/button.d.ts +9 -0
- package/js/es6/marketing/large/dark/components/button.js +10 -1
- package/js/es6/marketing/large/dark/components/focus.d.ts +4 -0
- package/js/es6/marketing/large/dark/components/focus.js +4 -0
- package/js/es6/marketing/large/dark/components/link.d.ts +2 -0
- package/js/es6/marketing/large/dark/components/link.js +2 -0
- package/js/es6/marketing/large/dark/components/table.d.ts +1 -0
- package/js/es6/marketing/large/dark/components/table.js +1 -0
- package/js/es6/marketing/large/dark/mode.d.ts +15 -2
- package/js/es6/marketing/large/dark/mode.js +16 -3
- package/js/es6/marketing/large/light/components/button.d.ts +9 -0
- package/js/es6/marketing/large/light/components/button.js +10 -1
- package/js/es6/marketing/large/light/components/focus.d.ts +4 -0
- package/js/es6/marketing/large/light/components/focus.js +4 -0
- package/js/es6/marketing/large/light/components/link.d.ts +2 -0
- package/js/es6/marketing/large/light/components/link.js +2 -0
- package/js/es6/marketing/large/light/components/table.d.ts +1 -0
- package/js/es6/marketing/large/light/components/table.js +1 -0
- package/js/es6/marketing/large/light/mode.d.ts +15 -2
- package/js/es6/marketing/large/light/mode.js +16 -3
- package/js/es6/marketing/small/dark/components/button.d.ts +9 -0
- package/js/es6/marketing/small/dark/components/button.js +10 -1
- package/js/es6/marketing/small/dark/components/focus.d.ts +4 -0
- package/js/es6/marketing/small/dark/components/focus.js +4 -0
- package/js/es6/marketing/small/dark/components/link.d.ts +2 -0
- package/js/es6/marketing/small/dark/components/link.js +2 -0
- package/js/es6/marketing/small/dark/components/table.d.ts +1 -0
- package/js/es6/marketing/small/dark/components/table.js +1 -0
- package/js/es6/marketing/small/dark/mode.d.ts +15 -2
- package/js/es6/marketing/small/dark/mode.js +16 -3
- package/js/es6/marketing/small/light/components/button.d.ts +9 -0
- package/js/es6/marketing/small/light/components/button.js +10 -1
- package/js/es6/marketing/small/light/components/focus.d.ts +4 -0
- package/js/es6/marketing/small/light/components/focus.js +4 -0
- package/js/es6/marketing/small/light/components/link.d.ts +2 -0
- package/js/es6/marketing/small/light/components/link.js +2 -0
- package/js/es6/marketing/small/light/components/table.d.ts +1 -0
- package/js/es6/marketing/small/light/components/table.js +1 -0
- package/js/es6/marketing/small/light/mode.d.ts +15 -2
- package/js/es6/marketing/small/light/mode.js +16 -3
- package/js/es6/product/large/dark/components/button.d.ts +9 -0
- package/js/es6/product/large/dark/components/button.js +10 -1
- package/js/es6/product/large/dark/components/focus.d.ts +4 -0
- package/js/es6/product/large/dark/components/focus.js +4 -0
- package/js/es6/product/large/dark/components/link.d.ts +2 -0
- package/js/es6/product/large/dark/components/link.js +2 -0
- package/js/es6/product/large/dark/components/table.d.ts +1 -0
- package/js/es6/product/large/dark/components/table.js +1 -0
- package/js/es6/product/large/dark/mode.d.ts +15 -2
- package/js/es6/product/large/dark/mode.js +16 -3
- package/js/es6/product/large/light/components/button.d.ts +9 -0
- package/js/es6/product/large/light/components/button.js +10 -1
- package/js/es6/product/large/light/components/focus.d.ts +4 -0
- package/js/es6/product/large/light/components/focus.js +4 -0
- package/js/es6/product/large/light/components/link.d.ts +2 -0
- package/js/es6/product/large/light/components/link.js +2 -0
- package/js/es6/product/large/light/components/table.d.ts +1 -0
- package/js/es6/product/large/light/components/table.js +1 -0
- package/js/es6/product/large/light/mode.d.ts +15 -2
- package/js/es6/product/large/light/mode.js +16 -3
- package/js/es6/product/small/dark/components/button.d.ts +9 -0
- package/js/es6/product/small/dark/components/button.js +10 -1
- package/js/es6/product/small/dark/components/focus.d.ts +4 -0
- package/js/es6/product/small/dark/components/focus.js +4 -0
- package/js/es6/product/small/dark/components/link.d.ts +2 -0
- package/js/es6/product/small/dark/components/link.js +2 -0
- package/js/es6/product/small/dark/components/table.d.ts +1 -0
- package/js/es6/product/small/dark/components/table.js +1 -0
- package/js/es6/product/small/dark/mode.d.ts +15 -2
- package/js/es6/product/small/dark/mode.js +16 -3
- package/js/es6/product/small/light/components/button.d.ts +9 -0
- package/js/es6/product/small/light/components/button.js +10 -1
- package/js/es6/product/small/light/components/focus.d.ts +4 -0
- package/js/es6/product/small/light/components/focus.js +4 -0
- package/js/es6/product/small/light/components/link.d.ts +2 -0
- package/js/es6/product/small/light/components/link.js +2 -0
- package/js/es6/product/small/light/components/table.d.ts +1 -0
- package/js/es6/product/small/light/components/table.js +1 -0
- package/js/es6/product/small/light/mode.d.ts +15 -2
- package/js/es6/product/small/light/mode.js +16 -3
- package/js/umd/frozenproduct/large/dark/components/button.js +190 -1
- package/js/umd/frozenproduct/large/dark/components/focus.js +54 -0
- package/js/umd/frozenproduct/large/dark/components/link.js +36 -0
- package/js/umd/frozenproduct/large/dark/components/table.js +15 -0
- package/js/umd/frozenproduct/large/dark/mode.js +447 -26
- package/js/umd/frozenproduct/large/light/components/button.js +190 -1
- package/js/umd/frozenproduct/large/light/components/focus.js +54 -0
- package/js/umd/frozenproduct/large/light/components/link.js +36 -0
- package/js/umd/frozenproduct/large/light/components/table.js +15 -0
- package/js/umd/frozenproduct/large/light/mode.js +452 -31
- package/js/umd/frozenproduct/small/dark/components/button.js +190 -1
- package/js/umd/frozenproduct/small/dark/components/focus.js +54 -0
- package/js/umd/frozenproduct/small/dark/components/link.js +36 -0
- package/js/umd/frozenproduct/small/dark/components/table.js +15 -0
- package/js/umd/frozenproduct/small/dark/mode.js +447 -26
- package/js/umd/frozenproduct/small/light/components/button.js +190 -1
- package/js/umd/frozenproduct/small/light/components/focus.js +54 -0
- package/js/umd/frozenproduct/small/light/components/link.js +36 -0
- package/js/umd/frozenproduct/small/light/components/table.js +15 -0
- package/js/umd/frozenproduct/small/light/mode.js +452 -31
- package/js/umd/marketing/large/dark/components/button.js +190 -1
- package/js/umd/marketing/large/dark/components/focus.js +54 -0
- package/js/umd/marketing/large/dark/components/link.js +36 -0
- package/js/umd/marketing/large/dark/components/table.js +15 -0
- package/js/umd/marketing/large/dark/mode.js +447 -26
- package/js/umd/marketing/large/light/components/button.js +190 -1
- package/js/umd/marketing/large/light/components/focus.js +54 -0
- package/js/umd/marketing/large/light/components/link.js +36 -0
- package/js/umd/marketing/large/light/components/table.js +15 -0
- package/js/umd/marketing/large/light/mode.js +452 -31
- package/js/umd/marketing/small/dark/components/button.js +190 -1
- package/js/umd/marketing/small/dark/components/focus.js +54 -0
- package/js/umd/marketing/small/dark/components/link.js +36 -0
- package/js/umd/marketing/small/dark/components/table.js +15 -0
- package/js/umd/marketing/small/dark/mode.js +447 -26
- package/js/umd/marketing/small/light/components/button.js +190 -1
- package/js/umd/marketing/small/light/components/focus.js +54 -0
- package/js/umd/marketing/small/light/components/link.js +36 -0
- package/js/umd/marketing/small/light/components/table.js +15 -0
- package/js/umd/marketing/small/light/mode.js +452 -31
- package/js/umd/product/large/dark/components/button.js +190 -1
- package/js/umd/product/large/dark/components/focus.js +54 -0
- package/js/umd/product/large/dark/components/link.js +36 -0
- package/js/umd/product/large/dark/components/table.js +15 -0
- package/js/umd/product/large/dark/mode.js +447 -26
- package/js/umd/product/large/light/components/button.js +190 -1
- package/js/umd/product/large/light/components/focus.js +54 -0
- package/js/umd/product/large/light/components/link.js +36 -0
- package/js/umd/product/large/light/components/table.js +15 -0
- package/js/umd/product/large/light/mode.js +452 -31
- package/js/umd/product/small/dark/components/button.js +190 -1
- package/js/umd/product/small/dark/components/focus.js +54 -0
- package/js/umd/product/small/dark/components/link.js +36 -0
- package/js/umd/product/small/dark/components/table.js +15 -0
- package/js/umd/product/small/dark/mode.js +447 -26
- package/js/umd/product/small/light/components/button.js +190 -1
- package/js/umd/product/small/light/components/focus.js +54 -0
- package/js/umd/product/small/light/components/link.js +36 -0
- package/js/umd/product/small/light/components/table.js +15 -0
- package/js/umd/product/small/light/mode.js +452 -31
- package/json/flat/frozenproduct/large/dark/components/button.json +10 -1
- package/json/flat/frozenproduct/large/dark/components/focus.json +4 -0
- package/json/flat/frozenproduct/large/dark/components/link.json +2 -0
- package/json/flat/frozenproduct/large/dark/components/table.json +1 -0
- package/json/flat/frozenproduct/large/dark/mode.json +16 -3
- package/json/flat/frozenproduct/large/light/components/button.json +10 -1
- package/json/flat/frozenproduct/large/light/components/focus.json +4 -0
- package/json/flat/frozenproduct/large/light/components/link.json +2 -0
- package/json/flat/frozenproduct/large/light/components/table.json +1 -0
- package/json/flat/frozenproduct/large/light/mode.json +16 -3
- package/json/flat/frozenproduct/small/dark/components/button.json +10 -1
- package/json/flat/frozenproduct/small/dark/components/focus.json +4 -0
- package/json/flat/frozenproduct/small/dark/components/link.json +2 -0
- package/json/flat/frozenproduct/small/dark/components/table.json +1 -0
- package/json/flat/frozenproduct/small/dark/mode.json +16 -3
- package/json/flat/frozenproduct/small/light/components/button.json +10 -1
- package/json/flat/frozenproduct/small/light/components/focus.json +4 -0
- package/json/flat/frozenproduct/small/light/components/link.json +2 -0
- package/json/flat/frozenproduct/small/light/components/table.json +1 -0
- package/json/flat/frozenproduct/small/light/mode.json +16 -3
- package/json/flat/marketing/large/dark/components/button.json +10 -1
- package/json/flat/marketing/large/dark/components/focus.json +4 -0
- package/json/flat/marketing/large/dark/components/link.json +2 -0
- package/json/flat/marketing/large/dark/components/table.json +1 -0
- package/json/flat/marketing/large/dark/mode.json +16 -3
- package/json/flat/marketing/large/light/components/button.json +10 -1
- package/json/flat/marketing/large/light/components/focus.json +4 -0
- package/json/flat/marketing/large/light/components/link.json +2 -0
- package/json/flat/marketing/large/light/components/table.json +1 -0
- package/json/flat/marketing/large/light/mode.json +16 -3
- package/json/flat/marketing/small/dark/components/button.json +10 -1
- package/json/flat/marketing/small/dark/components/focus.json +4 -0
- package/json/flat/marketing/small/dark/components/link.json +2 -0
- package/json/flat/marketing/small/dark/components/table.json +1 -0
- package/json/flat/marketing/small/dark/mode.json +16 -3
- package/json/flat/marketing/small/light/components/button.json +10 -1
- package/json/flat/marketing/small/light/components/focus.json +4 -0
- package/json/flat/marketing/small/light/components/link.json +2 -0
- package/json/flat/marketing/small/light/components/table.json +1 -0
- package/json/flat/marketing/small/light/mode.json +16 -3
- package/json/flat/product/large/dark/components/button.json +10 -1
- package/json/flat/product/large/dark/components/focus.json +4 -0
- package/json/flat/product/large/dark/components/link.json +2 -0
- package/json/flat/product/large/dark/components/table.json +1 -0
- package/json/flat/product/large/dark/mode.json +16 -3
- package/json/flat/product/large/light/components/button.json +10 -1
- package/json/flat/product/large/light/components/focus.json +4 -0
- package/json/flat/product/large/light/components/link.json +2 -0
- package/json/flat/product/large/light/components/table.json +1 -0
- package/json/flat/product/large/light/mode.json +16 -3
- package/json/flat/product/small/dark/components/button.json +10 -1
- package/json/flat/product/small/dark/components/focus.json +4 -0
- package/json/flat/product/small/dark/components/link.json +2 -0
- package/json/flat/product/small/dark/components/table.json +1 -0
- package/json/flat/product/small/dark/mode.json +16 -3
- package/json/flat/product/small/light/components/button.json +10 -1
- package/json/flat/product/small/light/components/focus.json +4 -0
- package/json/flat/product/small/light/components/link.json +2 -0
- package/json/flat/product/small/light/components/table.json +1 -0
- package/json/flat/product/small/light/mode.json +16 -3
- package/json/nested/frozenproduct/large/dark/components/button.json +13 -2
- package/json/nested/frozenproduct/large/dark/components/focus.json +7 -1
- package/json/nested/frozenproduct/large/dark/components/link.json +5 -1
- package/json/nested/frozenproduct/large/dark/components/table.json +1 -0
- package/json/nested/frozenproduct/large/dark/mode.json +22 -5
- package/json/nested/frozenproduct/large/light/components/button.json +13 -2
- package/json/nested/frozenproduct/large/light/components/focus.json +7 -1
- package/json/nested/frozenproduct/large/light/components/link.json +5 -1
- package/json/nested/frozenproduct/large/light/components/table.json +1 -0
- package/json/nested/frozenproduct/large/light/mode.json +22 -5
- package/json/nested/frozenproduct/small/dark/components/button.json +13 -2
- package/json/nested/frozenproduct/small/dark/components/focus.json +7 -1
- package/json/nested/frozenproduct/small/dark/components/link.json +5 -1
- package/json/nested/frozenproduct/small/dark/components/table.json +1 -0
- package/json/nested/frozenproduct/small/dark/mode.json +22 -5
- package/json/nested/frozenproduct/small/light/components/button.json +13 -2
- package/json/nested/frozenproduct/small/light/components/focus.json +7 -1
- package/json/nested/frozenproduct/small/light/components/link.json +5 -1
- package/json/nested/frozenproduct/small/light/components/table.json +1 -0
- package/json/nested/frozenproduct/small/light/mode.json +22 -5
- package/json/nested/marketing/large/dark/components/button.json +13 -2
- package/json/nested/marketing/large/dark/components/focus.json +7 -1
- package/json/nested/marketing/large/dark/components/link.json +5 -1
- package/json/nested/marketing/large/dark/components/table.json +1 -0
- package/json/nested/marketing/large/dark/mode.json +22 -5
- package/json/nested/marketing/large/light/components/button.json +13 -2
- package/json/nested/marketing/large/light/components/focus.json +7 -1
- package/json/nested/marketing/large/light/components/link.json +5 -1
- package/json/nested/marketing/large/light/components/table.json +1 -0
- package/json/nested/marketing/large/light/mode.json +22 -5
- package/json/nested/marketing/small/dark/components/button.json +13 -2
- package/json/nested/marketing/small/dark/components/focus.json +7 -1
- package/json/nested/marketing/small/dark/components/link.json +5 -1
- package/json/nested/marketing/small/dark/components/table.json +1 -0
- package/json/nested/marketing/small/dark/mode.json +22 -5
- package/json/nested/marketing/small/light/components/button.json +13 -2
- package/json/nested/marketing/small/light/components/focus.json +7 -1
- package/json/nested/marketing/small/light/components/link.json +5 -1
- package/json/nested/marketing/small/light/components/table.json +1 -0
- package/json/nested/marketing/small/light/mode.json +22 -5
- package/json/nested/product/large/dark/components/button.json +13 -2
- package/json/nested/product/large/dark/components/focus.json +7 -1
- package/json/nested/product/large/dark/components/link.json +5 -1
- package/json/nested/product/large/dark/components/table.json +1 -0
- package/json/nested/product/large/dark/mode.json +22 -5
- package/json/nested/product/large/light/components/button.json +13 -2
- package/json/nested/product/large/light/components/focus.json +7 -1
- package/json/nested/product/large/light/components/link.json +5 -1
- package/json/nested/product/large/light/components/table.json +1 -0
- package/json/nested/product/large/light/mode.json +22 -5
- package/json/nested/product/small/dark/components/button.json +13 -2
- package/json/nested/product/small/dark/components/focus.json +7 -1
- package/json/nested/product/small/dark/components/link.json +5 -1
- package/json/nested/product/small/dark/components/table.json +1 -0
- package/json/nested/product/small/dark/mode.json +22 -5
- package/json/nested/product/small/light/components/button.json +13 -2
- package/json/nested/product/small/light/components/focus.json +7 -1
- package/json/nested/product/small/light/components/link.json +5 -1
- package/json/nested/product/small/light/components/table.json +1 -0
- package/json/nested/product/small/light/mode.json +22 -5
- package/package.json +1 -1
- package/sage-design-tokens-13.2.0.tgz +0 -0
- package/scss/frozenproduct/large/components/button.scss +16 -7
- package/scss/frozenproduct/large/components/focus.scss +4 -0
- package/scss/frozenproduct/large/components/link.scss +2 -0
- package/scss/frozenproduct/large/components/table.scss +1 -0
- package/scss/frozenproduct/large/dark.scss +16 -3
- package/scss/frozenproduct/large/light.scss +16 -3
- package/scss/frozenproduct/small/components/button.scss +16 -7
- package/scss/frozenproduct/small/components/focus.scss +4 -0
- package/scss/frozenproduct/small/components/link.scss +2 -0
- package/scss/frozenproduct/small/components/table.scss +1 -0
- package/scss/frozenproduct/small/dark.scss +16 -3
- package/scss/frozenproduct/small/light.scss +16 -3
- package/scss/marketing/large/components/button.scss +27 -18
- package/scss/marketing/large/components/container.scss +9 -9
- package/scss/marketing/large/components/focus.scss +4 -0
- package/scss/marketing/large/components/form.scss +7 -7
- package/scss/marketing/large/components/link.scss +4 -2
- package/scss/marketing/large/components/nav.scss +5 -5
- 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 +3 -3
- package/scss/marketing/large/components/tab.scss +7 -7
- package/scss/marketing/large/components/table.scss +11 -10
- package/scss/marketing/large/dark.scss +16 -3
- package/scss/marketing/large/light.scss +16 -3
- package/scss/marketing/small/components/button.scss +16 -7
- package/scss/marketing/small/components/focus.scss +4 -0
- package/scss/marketing/small/components/link.scss +2 -0
- package/scss/marketing/small/components/table.scss +1 -0
- package/scss/marketing/small/dark.scss +16 -3
- package/scss/marketing/small/light.scss +16 -3
- package/scss/product/large/components/button.scss +27 -18
- package/scss/product/large/components/container.scss +9 -9
- package/scss/product/large/components/focus.scss +4 -0
- package/scss/product/large/components/form.scss +7 -7
- package/scss/product/large/components/link.scss +4 -2
- package/scss/product/large/components/nav.scss +5 -5
- 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 +3 -3
- package/scss/product/large/components/tab.scss +7 -7
- package/scss/product/large/components/table.scss +11 -10
- package/scss/product/large/dark.scss +16 -3
- package/scss/product/large/light.scss +16 -3
- package/scss/product/small/components/button.scss +16 -7
- package/scss/product/small/components/focus.scss +4 -0
- package/scss/product/small/components/link.scss +2 -0
- package/scss/product/small/components/table.scss +1 -0
- package/scss/product/small/dark.scss +16 -3
- package/scss/product/small/light.scss +16 -3
- package/sage-design-tokens-13.1.0.tgz +0 -0
@@ -216,10 +216,18 @@
|
|
216
216
|
--modes-color-interactive-danger-default-light: #CD384B;
|
217
217
|
--modes-color-interactive-danger-default-alt-light: #b23342; /* For links in datatables */
|
218
218
|
--modes-color-interactive-danger-hover-light: #aa323f; /* used on solid-pill and primary-button hover states */
|
219
|
-
--modes-color-interactive-danger-hover-alt-light: #
|
219
|
+
--modes-color-interactive-danger-hover-alt-light: #cd384b14; /* used on secondary-button hover states */
|
220
220
|
--modes-color-interactive-danger-hover-alt2-light: #a3303d; /* used on link hover state */
|
221
221
|
--modes-color-interactive-danger-with-active-light: #FFFFFF;
|
222
222
|
--modes-color-interactive-danger-with-default-light: #FFFFFF;
|
223
|
+
--modes-color-interactive-danger-inverse-active-light: #f28486; /* used on pill hover states */
|
224
|
+
--modes-color-interactive-danger-inverse-default-light: #E13E53;
|
225
|
+
--modes-color-interactive-danger-inverse-default-alt-light: #e85b66; /* For links in datatables */
|
226
|
+
--modes-color-interactive-danger-inverse-hover-light: #eb646c; /* used on solid-pill and primary-button hover states */
|
227
|
+
--modes-color-interactive-danger-inverse-hover-alt-light: #e13e5314; /* used on secondary-button hover states */
|
228
|
+
--modes-color-interactive-danger-inverse-hover-alt2-light: #ec6a71; /* used on link hover state */
|
229
|
+
--modes-color-interactive-danger-inverse-with-active-light: #000000;
|
230
|
+
--modes-color-interactive-danger-inverse-with-default-light: #000000;
|
223
231
|
--modes-color-interactive-data-entry-default-light: #FFFFFF; /* Input backgrounds. */
|
224
232
|
--modes-color-interactive-data-entry-with-active-light: #000000; /* checkbox tick icon or radio handle */
|
225
233
|
--modes-color-interactive-data-entry-with-active-alt-light: #FFFFFF;
|
@@ -230,10 +238,14 @@
|
|
230
238
|
--modes-color-interactive-data-entry-content-light: #000000f2; /* Input Text */
|
231
239
|
--modes-color-interactive-data-entry-content-alt-light: #0000008c; /* Hint text, placeholder text, character count etc */
|
232
240
|
--modes-color-interactive-data-entry-frozen-with-default-light: #698495; /* Input borders. */
|
233
|
-
--modes-color-interactive-focus-with-default-light: #FFB500;
|
234
|
-
--modes-color-interactive-focus-with-default-alt-light: #ffd27e;
|
235
241
|
--modes-color-interactive-focus-default-light: #000000;
|
236
242
|
--modes-color-interactive-focus-content-light: #000000;
|
243
|
+
--modes-color-interactive-focus-with-default-light: #FFB500;
|
244
|
+
--modes-color-interactive-focus-with-default-alt-light: #ffd27e;
|
245
|
+
--modes-color-interactive-focus-inverse-default-light: #FFB500;
|
246
|
+
--modes-color-interactive-focus-inverse-content-light: #FFFFFF;
|
247
|
+
--modes-color-interactive-focus-inverse-with-default-light: #000000;
|
248
|
+
--modes-color-interactive-focus-inverse-with-default-alt-light: #926916;
|
237
249
|
--modes-color-interactive-inactive-default-light: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
|
238
250
|
--modes-color-interactive-inactive-mask-light: #000000; /* full screen takeover token for modal dimmer */
|
239
251
|
--modes-color-interactive-inactive-default-alt-light: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
@@ -244,6 +256,7 @@
|
|
244
256
|
--modes-color-interactive-inactive-frozen-default-alt-light: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
245
257
|
--modes-color-interactive-inactive-inverse-default-light: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
246
258
|
--modes-color-interactive-inactive-inverse-content-light: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
|
259
|
+
--modes-color-interactive-inactive-inverse-content-alt-light: #000000; /* Disabled labels inside buttons and Switch. */
|
247
260
|
--modes-color-interactive-monochrome-active-light: #000000;
|
248
261
|
--modes-color-interactive-monochrome-active-alt-light: #00000029;
|
249
262
|
--modes-color-interactive-monochrome-default-light: #000000e6;
|
@@ -475,10 +488,18 @@
|
|
475
488
|
--modes-color-interactive-danger-default-dark: #E13E53;
|
476
489
|
--modes-color-interactive-danger-default-alt-dark: #e85b66; /* for links in datatables */
|
477
490
|
--modes-color-interactive-danger-hover-dark: #eb646c;
|
478
|
-
--modes-color-interactive-danger-hover-alt-dark: #
|
491
|
+
--modes-color-interactive-danger-hover-alt-dark: #e13e5314; /* button hover on dark */
|
479
492
|
--modes-color-interactive-danger-hover-alt2-dark: #ec6a71; /* for links in datatables */
|
480
493
|
--modes-color-interactive-danger-with-active-dark: #000000;
|
481
494
|
--modes-color-interactive-danger-with-default-dark: #000000;
|
495
|
+
--modes-color-interactive-danger-inverse-active-dark: #882b34; /* used on pill hover states */
|
496
|
+
--modes-color-interactive-danger-inverse-default-dark: #CD384B;
|
497
|
+
--modes-color-interactive-danger-inverse-default-alt-dark: #b23342; /* For links in datatables */
|
498
|
+
--modes-color-interactive-danger-inverse-hover-dark: #aa323f; /* used on solid-pill and primary-button hover states */
|
499
|
+
--modes-color-interactive-danger-inverse-hover-alt-dark: #cd384b14; /* used on secondary-button hover states */
|
500
|
+
--modes-color-interactive-danger-inverse-hover-alt2-dark: #a3303d; /* used on link hover state */
|
501
|
+
--modes-color-interactive-danger-inverse-with-active-dark: #FFFFFF;
|
502
|
+
--modes-color-interactive-danger-inverse-with-default-dark: #FFFFFF;
|
482
503
|
--modes-color-interactive-data-entry-default-dark: #000000; /* Input backgrounds. */
|
483
504
|
--modes-color-interactive-data-entry-with-active-dark: #FFFFFF; /* checkbox tick icon or radio handle */
|
484
505
|
--modes-color-interactive-data-entry-with-active-alt-dark: #000000;
|
@@ -489,10 +510,14 @@
|
|
489
510
|
--modes-color-interactive-data-entry-content-dark: #fffffff2; /* Input Text */
|
490
511
|
--modes-color-interactive-data-entry-content-alt-dark: #ffffff8c; /* Hint text, placeholder text, character count etc */
|
491
512
|
--modes-color-interactive-data-entry-frozen-with-default-dark: #777; /* Input borders. */
|
492
|
-
--modes-color-interactive-focus-
|
513
|
+
--modes-color-interactive-focus-default-dark: #FFB500;
|
493
514
|
--modes-color-interactive-focus-content-dark: #FFFFFF;
|
515
|
+
--modes-color-interactive-focus-with-default-dark: #000000;
|
494
516
|
--modes-color-interactive-focus-with-default-alt-dark: #926916;
|
495
|
-
--modes-color-interactive-focus-default-dark: #
|
517
|
+
--modes-color-interactive-focus-inverse-default-dark: #000000;
|
518
|
+
--modes-color-interactive-focus-inverse-content-dark: #000000;
|
519
|
+
--modes-color-interactive-focus-inverse-with-default-dark: #FFB500;
|
520
|
+
--modes-color-interactive-focus-inverse-with-default-alt-dark: #ffd27e;
|
496
521
|
--modes-color-interactive-inactive-default-dark: #4b4b4b; /* disabled buttons on dark */
|
497
522
|
--modes-color-interactive-inactive-mask-dark: #FFFFFF; /* full screen takeover token for modal dimmer */
|
498
523
|
--modes-color-interactive-inactive-default-alt-dark: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
|
@@ -503,6 +528,7 @@
|
|
503
528
|
--modes-color-interactive-inactive-frozen-default-alt-dark: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
504
529
|
--modes-color-interactive-inactive-inverse-default-dark: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
505
530
|
--modes-color-interactive-inactive-inverse-content-dark: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
|
531
|
+
--modes-color-interactive-inactive-inverse-content-alt-dark: #FFFFFF; /* Disabled labels inside buttons and Switch. */
|
506
532
|
--modes-color-interactive-monochrome-active-dark: #FFFFFF;
|
507
533
|
--modes-color-interactive-monochrome-active-alt-dark: #ffffff29;
|
508
534
|
--modes-color-interactive-monochrome-default-dark: #ffffffe6;
|
@@ -705,8 +731,20 @@
|
|
705
731
|
--button-color-ai-border-enabled: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
|
706
732
|
--button-color-ai-border-hover: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark));
|
707
733
|
--button-color-destructive-primary-bg-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
734
|
+
--button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
735
|
+
--button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
708
736
|
--button-color-destructive-secondary-border-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
709
737
|
--button-color-destructive-secondary-label-enabled: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
738
|
+
--button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
|
739
|
+
--button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
|
740
|
+
--button-color-typical-primary-label-enabled: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
|
741
|
+
--button-color-typical-primary-label-hover: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark));
|
742
|
+
--button-color-typical-primary-inverse-bg-default: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark)); /* For spacer in Split button */
|
743
|
+
--button-color-typical-primary-inverse-bg-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
|
744
|
+
--button-color-typical-primary-inverse-label-active: light-dark(var(--modes-color-interactive-primary-inverse-with-active-light), var(--modes-color-interactive-primary-inverse-with-active-dark));
|
745
|
+
--button-color-typical-primary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-alt-light), var(--modes-color-interactive-inactive-inverse-content-alt-dark));
|
746
|
+
--button-color-typical-primary-inverse-label-enabled: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
|
747
|
+
--button-color-typical-primary-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
|
710
748
|
--button-color-typical-secondary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
|
711
749
|
--button-color-typical-secondary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
|
712
750
|
--button-color-typical-tertiary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
|
@@ -730,9 +768,11 @@
|
|
730
768
|
--button-color-ai-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
|
731
769
|
--button-color-ai-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
732
770
|
--button-color-destructive-primary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
771
|
+
--button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
|
733
772
|
--button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
734
773
|
--button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
735
774
|
--button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
|
775
|
+
--button-color-typical-primary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-light), var(--modes-color-interactive-primary-inverse-default-dark));
|
736
776
|
--button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
|
737
777
|
--button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
738
778
|
--button-color-typical-tertiary-bg-enabled: var(--button-color-none);
|
@@ -866,17 +906,12 @@
|
|
866
906
|
--button-color-ai-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
867
907
|
--button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
868
908
|
--button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
869
|
-
--button-color-destructive-primary-label-enabled: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
870
|
-
--button-color-destructive-primary-label-hover: light-dark(var(--modes-color-interactive-danger-with-default-light), var(--modes-color-interactive-danger-with-default-dark));
|
871
|
-
--button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
|
872
909
|
--button-color-destructive-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
873
910
|
--button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
|
874
|
-
--button-color-typical-primary-bg-default: light-dark(var(--modes-color-interactive-primary-with-default-light), var(--modes-color-interactive-primary-with-default-dark)); /* For spacer in Split button */
|
875
911
|
--button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
|
876
|
-
--button-color-typical-primary-label-active: light-dark(var(--modes-color-interactive-primary-with-active-light), var(--modes-color-interactive-primary-with-active-dark));
|
877
912
|
--button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
878
|
-
--button-color-typical-primary-
|
879
|
-
--button-color-typical-primary-
|
913
|
+
--button-color-typical-primary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
|
914
|
+
--button-color-typical-primary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
|
880
915
|
--button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-active-alt-light), var(--modes-color-interactive-primary-active-alt-dark));
|
881
916
|
--button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
|
882
917
|
--button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-primary-default-alt-light), var(--modes-color-interactive-primary-default-alt-dark));
|
@@ -1295,6 +1330,10 @@
|
|
1295
1330
|
--focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
|
1296
1331
|
--focus-color-border: light-dark(var(--modes-color-interactive-focus-with-default-light), var(--modes-color-interactive-focus-with-default-dark));
|
1297
1332
|
--focus-color-label: light-dark(var(--modes-color-interactive-focus-content-light), var(--modes-color-interactive-focus-content-dark));
|
1333
|
+
--focus-color-inverse-bg: light-dark(var(--modes-color-interactive-focus-inverse-with-default-alt-light), var(--modes-color-interactive-focus-inverse-with-default-alt-dark));
|
1334
|
+
--focus-color-inverse-borderalt: light-dark(var(--modes-color-interactive-focus-inverse-default-light), var(--modes-color-interactive-focus-inverse-default-dark));
|
1335
|
+
--focus-color-inverse-border: light-dark(var(--modes-color-interactive-focus-inverse-with-default-light), var(--modes-color-interactive-focus-inverse-with-default-dark));
|
1336
|
+
--focus-color-inverse-label: light-dark(var(--modes-color-interactive-focus-inverse-content-light), var(--modes-color-interactive-focus-inverse-content-dark));
|
1298
1337
|
--focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
|
1299
1338
|
--focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
|
1300
1339
|
--focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
|
@@ -1598,10 +1637,12 @@
|
|
1598
1637
|
--link-typography-heading-m: var(--global-typography-component-underlined-firm-m);
|
1599
1638
|
--link-typography-heading-l: var(--global-typography-component-underlined-firm-l);
|
1600
1639
|
--link-color-destructive-label-default: light-dark(var(--modes-color-interactive-danger-default-alt-light), var(--modes-color-interactive-danger-default-alt-dark)); /* . */
|
1640
|
+
--link-color-destructive-inverse-label-default: light-dark(var(--modes-color-interactive-danger-inverse-default-alt-light), var(--modes-color-interactive-danger-inverse-default-alt-dark)); /* . */
|
1601
1641
|
--link-color-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
1602
1642
|
--link-color-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-active-light), var(--modes-color-interactive-monochrome-inverse-active-dark));
|
1603
1643
|
--link-boxshadow-skiplink: var(--global-boxshadow-container-near);
|
1604
1644
|
--link-color-destructive-label-hover: light-dark(var(--modes-color-interactive-danger-hover-alt2-light), var(--modes-color-interactive-danger-hover-alt2-dark));
|
1645
|
+
--link-color-destructive-inverse-label-hover: light-dark(var(--modes-color-interactive-danger-inverse-hover-alt2-light), var(--modes-color-interactive-danger-inverse-hover-alt2-dark));
|
1605
1646
|
--link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-default-alt3-light), var(--modes-color-interactive-primary-default-alt3-dark));
|
1606
1647
|
--link-color-typical-inverse-label-default: light-dark(var(--modes-color-interactive-primary-inverse-default-alt3-light), var(--modes-color-interactive-primary-inverse-default-alt3-dark));
|
1607
1648
|
--link-color-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
@@ -2303,6 +2344,7 @@
|
|
2303
2344
|
--table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
|
2304
2345
|
--table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
|
2305
2346
|
--table-space-none: var(--global-space-none);
|
2347
|
+
--table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
|
2306
2348
|
--table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
|
2307
2349
|
--table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
|
2308
2350
|
--table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
|
@@ -19,8 +19,20 @@
|
|
19
19
|
--button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
|
20
20
|
--button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
|
21
21
|
--button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
|
22
|
+
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
23
|
+
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
22
24
|
--button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
|
23
25
|
--button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
|
26
|
+
--button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
|
27
|
+
--button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
|
28
|
+
--button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
|
29
|
+
--button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
|
30
|
+
--button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
|
31
|
+
--button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
32
|
+
--button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
|
33
|
+
--button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
|
34
|
+
--button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
|
35
|
+
--button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
|
24
36
|
--button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
25
37
|
--button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
|
26
38
|
--button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
@@ -59,9 +71,11 @@
|
|
59
71
|
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
|
60
72
|
--button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
61
73
|
--button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
|
74
|
+
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
62
75
|
--button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
|
63
76
|
--button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
|
64
77
|
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
|
78
|
+
--button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
|
65
79
|
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
|
66
80
|
--button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
67
81
|
--button-color-typical-tertiary-bg-enabled: var(--button-color-none);
|
@@ -195,17 +209,12 @@
|
|
195
209
|
--button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
|
196
210
|
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
|
197
211
|
--button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
198
|
-
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
199
|
-
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
200
|
-
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
201
212
|
--button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
202
213
|
--button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
|
203
|
-
--button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
|
204
214
|
--button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
|
205
|
-
--button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
|
206
215
|
--button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
207
|
-
--button-color-typical-primary-
|
208
|
-
--button-color-typical-primary-
|
216
|
+
--button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
|
217
|
+
--button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
|
209
218
|
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
|
210
219
|
--button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
|
211
220
|
--button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
|
@@ -7,6 +7,10 @@
|
|
7
7
|
--focus-color-borderalt: var(--modes-color-interactive-focus-default);
|
8
8
|
--focus-color-border: var(--modes-color-interactive-focus-with-default);
|
9
9
|
--focus-color-label: var(--modes-color-interactive-focus-content);
|
10
|
+
--focus-color-inverse-bg: var(--modes-color-interactive-focus-inverse-with-default-alt);
|
11
|
+
--focus-color-inverse-borderalt: var(--modes-color-interactive-focus-inverse-default);
|
12
|
+
--focus-color-inverse-border: var(--modes-color-interactive-focus-inverse-with-default);
|
13
|
+
--focus-color-inverse-label: var(--modes-color-interactive-focus-inverse-content);
|
10
14
|
--focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
|
11
15
|
--focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
|
12
16
|
--focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
|
@@ -16,10 +16,12 @@
|
|
16
16
|
--link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
|
17
17
|
--link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
|
18
18
|
--link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
|
19
|
+
--link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
|
19
20
|
--link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
|
20
21
|
--link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
|
21
22
|
--link-boxshadow-skiplink: var(--global-boxshadow-container-near);
|
22
23
|
--link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
|
24
|
+
--link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
|
23
25
|
--link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
|
24
26
|
--link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
|
25
27
|
--link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
|
@@ -56,6 +56,7 @@
|
|
56
56
|
--table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
|
57
57
|
--table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
|
58
58
|
--table-space-none: var(--global-space-none);
|
59
|
+
--table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
|
59
60
|
--table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
|
60
61
|
--table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
|
61
62
|
--table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
|
@@ -67,10 +67,18 @@
|
|
67
67
|
--modes-color-interactive-danger-default: #E13E53;
|
68
68
|
--modes-color-interactive-danger-default-alt: #e85b66; /* for links in datatables */
|
69
69
|
--modes-color-interactive-danger-hover: #eb646c;
|
70
|
-
--modes-color-interactive-danger-hover-alt: #
|
70
|
+
--modes-color-interactive-danger-hover-alt: #e13e5314; /* button hover on dark */
|
71
71
|
--modes-color-interactive-danger-hover-alt2: #ec6a71; /* for links in datatables */
|
72
72
|
--modes-color-interactive-danger-with-active: #000000;
|
73
73
|
--modes-color-interactive-danger-with-default: #000000;
|
74
|
+
--modes-color-interactive-danger-inverse-active: #882b34; /* used on pill hover states */
|
75
|
+
--modes-color-interactive-danger-inverse-default: #CD384B;
|
76
|
+
--modes-color-interactive-danger-inverse-default-alt: #b23342; /* For links in datatables */
|
77
|
+
--modes-color-interactive-danger-inverse-hover: #aa323f; /* used on solid-pill and primary-button hover states */
|
78
|
+
--modes-color-interactive-danger-inverse-hover-alt: #cd384b14; /* used on secondary-button hover states */
|
79
|
+
--modes-color-interactive-danger-inverse-hover-alt2: #a3303d; /* used on link hover state */
|
80
|
+
--modes-color-interactive-danger-inverse-with-active: #FFFFFF;
|
81
|
+
--modes-color-interactive-danger-inverse-with-default: #FFFFFF;
|
74
82
|
--modes-color-interactive-data-entry-default: #000000; /* Input backgrounds. */
|
75
83
|
--modes-color-interactive-data-entry-with-active: #FFFFFF; /* checkbox tick icon or radio handle */
|
76
84
|
--modes-color-interactive-data-entry-with-active-alt: #000000;
|
@@ -81,10 +89,14 @@
|
|
81
89
|
--modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
|
82
90
|
--modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
|
83
91
|
--modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
|
84
|
-
--modes-color-interactive-focus-
|
92
|
+
--modes-color-interactive-focus-default: #FFB500;
|
85
93
|
--modes-color-interactive-focus-content: #FFFFFF;
|
94
|
+
--modes-color-interactive-focus-with-default: #000000;
|
86
95
|
--modes-color-interactive-focus-with-default-alt: #926916;
|
87
|
-
--modes-color-interactive-focus-default: #
|
96
|
+
--modes-color-interactive-focus-inverse-default: #000000;
|
97
|
+
--modes-color-interactive-focus-inverse-content: #000000;
|
98
|
+
--modes-color-interactive-focus-inverse-with-default: #FFB500;
|
99
|
+
--modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
|
88
100
|
--modes-color-interactive-inactive-default: #4b4b4b; /* disabled buttons on dark */
|
89
101
|
--modes-color-interactive-inactive-mask: #FFFFFF; /* full screen takeover token for modal dimmer */
|
90
102
|
--modes-color-interactive-inactive-default-alt: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
|
@@ -95,6 +107,7 @@
|
|
95
107
|
--modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
96
108
|
--modes-color-interactive-inactive-inverse-default: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
97
109
|
--modes-color-interactive-inactive-inverse-content: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
|
110
|
+
--modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; /* Disabled labels inside buttons and Switch. */
|
98
111
|
--modes-color-interactive-monochrome-active: #FFFFFF;
|
99
112
|
--modes-color-interactive-monochrome-active-alt: #ffffff29;
|
100
113
|
--modes-color-interactive-monochrome-default: #ffffffe6;
|
@@ -67,10 +67,18 @@
|
|
67
67
|
--modes-color-interactive-danger-default: #CD384B;
|
68
68
|
--modes-color-interactive-danger-default-alt: #b23342; /* For links in datatables */
|
69
69
|
--modes-color-interactive-danger-hover: #aa323f; /* used on solid-pill and primary-button hover states */
|
70
|
-
--modes-color-interactive-danger-hover-alt: #
|
70
|
+
--modes-color-interactive-danger-hover-alt: #cd384b14; /* used on secondary-button hover states */
|
71
71
|
--modes-color-interactive-danger-hover-alt2: #a3303d; /* used on link hover state */
|
72
72
|
--modes-color-interactive-danger-with-active: #FFFFFF;
|
73
73
|
--modes-color-interactive-danger-with-default: #FFFFFF;
|
74
|
+
--modes-color-interactive-danger-inverse-active: #f28486; /* used on pill hover states */
|
75
|
+
--modes-color-interactive-danger-inverse-default: #E13E53;
|
76
|
+
--modes-color-interactive-danger-inverse-default-alt: #e85b66; /* For links in datatables */
|
77
|
+
--modes-color-interactive-danger-inverse-hover: #eb646c; /* used on solid-pill and primary-button hover states */
|
78
|
+
--modes-color-interactive-danger-inverse-hover-alt: #e13e5314; /* used on secondary-button hover states */
|
79
|
+
--modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; /* used on link hover state */
|
80
|
+
--modes-color-interactive-danger-inverse-with-active: #000000;
|
81
|
+
--modes-color-interactive-danger-inverse-with-default: #000000;
|
74
82
|
--modes-color-interactive-data-entry-default: #FFFFFF; /* Input backgrounds. */
|
75
83
|
--modes-color-interactive-data-entry-with-active: #000000; /* checkbox tick icon or radio handle */
|
76
84
|
--modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
|
@@ -81,10 +89,14 @@
|
|
81
89
|
--modes-color-interactive-data-entry-content: #000000f2; /* Input Text */
|
82
90
|
--modes-color-interactive-data-entry-content-alt: #0000008c; /* Hint text, placeholder text, character count etc */
|
83
91
|
--modes-color-interactive-data-entry-frozen-with-default: #698495; /* Input borders. */
|
84
|
-
--modes-color-interactive-focus-with-default: #FFB500;
|
85
|
-
--modes-color-interactive-focus-with-default-alt: #ffd27e;
|
86
92
|
--modes-color-interactive-focus-default: #000000;
|
87
93
|
--modes-color-interactive-focus-content: #000000;
|
94
|
+
--modes-color-interactive-focus-with-default: #FFB500;
|
95
|
+
--modes-color-interactive-focus-with-default-alt: #ffd27e;
|
96
|
+
--modes-color-interactive-focus-inverse-default: #FFB500;
|
97
|
+
--modes-color-interactive-focus-inverse-content: #FFFFFF;
|
98
|
+
--modes-color-interactive-focus-inverse-with-default: #000000;
|
99
|
+
--modes-color-interactive-focus-inverse-with-default-alt: #926916;
|
88
100
|
--modes-color-interactive-inactive-default: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
|
89
101
|
--modes-color-interactive-inactive-mask: #000000; /* full screen takeover token for modal dimmer */
|
90
102
|
--modes-color-interactive-inactive-default-alt: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
@@ -95,6 +107,7 @@
|
|
95
107
|
--modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
96
108
|
--modes-color-interactive-inactive-inverse-default: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
97
109
|
--modes-color-interactive-inactive-inverse-content: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
|
110
|
+
--modes-color-interactive-inactive-inverse-content-alt: #000000; /* Disabled labels inside buttons and Switch. */
|
98
111
|
--modes-color-interactive-monochrome-active: #000000;
|
99
112
|
--modes-color-interactive-monochrome-active-alt: #00000029;
|
100
113
|
--modes-color-interactive-monochrome-default: #000000e6;
|
@@ -19,8 +19,20 @@
|
|
19
19
|
--button-color-ai-border-enabled: var(--modes-color-interactive-ai-default);
|
20
20
|
--button-color-ai-border-hover: var(--modes-color-interactive-ai-default);
|
21
21
|
--button-color-destructive-primary-bg-enabled: var(--modes-color-interactive-danger-default);
|
22
|
+
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
23
|
+
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
22
24
|
--button-color-destructive-secondary-border-enabled: var(--modes-color-interactive-danger-default);
|
23
25
|
--button-color-destructive-secondary-label-enabled: var(--modes-color-interactive-danger-default);
|
26
|
+
--button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
|
27
|
+
--button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
|
28
|
+
--button-color-typical-primary-label-enabled: var(--modes-color-interactive-primary-with-default);
|
29
|
+
--button-color-typical-primary-label-hover: var(--modes-color-interactive-primary-with-default);
|
30
|
+
--button-color-typical-primary-inverse-bg-default: var(--modes-color-interactive-primary-inverse-with-default); /* For spacer in Split button */
|
31
|
+
--button-color-typical-primary-inverse-bg-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
32
|
+
--button-color-typical-primary-inverse-label-active: var(--modes-color-interactive-primary-inverse-with-active);
|
33
|
+
--button-color-typical-primary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content-alt);
|
34
|
+
--button-color-typical-primary-inverse-label-enabled: var(--modes-color-interactive-primary-inverse-with-default);
|
35
|
+
--button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
|
24
36
|
--button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
25
37
|
--button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
|
26
38
|
--button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
@@ -59,9 +71,11 @@
|
|
59
71
|
--button-color-ai-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
|
60
72
|
--button-color-ai-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
61
73
|
--button-color-destructive-primary-bg-hover: var(--modes-color-interactive-danger-hover);
|
74
|
+
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
62
75
|
--button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
|
63
76
|
--button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
|
64
77
|
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
|
78
|
+
--button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
|
65
79
|
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
|
66
80
|
--button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
67
81
|
--button-color-typical-tertiary-bg-enabled: var(--button-color-none);
|
@@ -195,17 +209,12 @@
|
|
195
209
|
--button-color-ai-label-disabled: var(--modes-color-interactive-inactive-content);
|
196
210
|
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
|
197
211
|
--button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
198
|
-
--button-color-destructive-primary-label-enabled: var(--modes-color-interactive-danger-with-default);
|
199
|
-
--button-color-destructive-primary-label-hover: var(--modes-color-interactive-danger-with-default);
|
200
|
-
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
201
212
|
--button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
202
213
|
--button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
|
203
|
-
--button-color-typical-primary-bg-default: var(--modes-color-interactive-primary-with-default); /* For spacer in Split button */
|
204
214
|
--button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
|
205
|
-
--button-color-typical-primary-label-active: var(--modes-color-interactive-primary-with-active);
|
206
215
|
--button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
207
|
-
--button-color-typical-primary-
|
208
|
-
--button-color-typical-primary-
|
216
|
+
--button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
|
217
|
+
--button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
|
209
218
|
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
|
210
219
|
--button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
|
211
220
|
--button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
|
@@ -7,6 +7,10 @@
|
|
7
7
|
--focus-color-borderalt: var(--modes-color-interactive-focus-default);
|
8
8
|
--focus-color-border: var(--modes-color-interactive-focus-with-default);
|
9
9
|
--focus-color-label: var(--modes-color-interactive-focus-content);
|
10
|
+
--focus-color-inverse-bg: var(--modes-color-interactive-focus-inverse-with-default-alt);
|
11
|
+
--focus-color-inverse-borderalt: var(--modes-color-interactive-focus-inverse-default);
|
12
|
+
--focus-color-inverse-border: var(--modes-color-interactive-focus-inverse-with-default);
|
13
|
+
--focus-color-inverse-label: var(--modes-color-interactive-focus-inverse-content);
|
10
14
|
--focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
|
11
15
|
--focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
|
12
16
|
--focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
|
@@ -16,10 +16,12 @@
|
|
16
16
|
--link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
|
17
17
|
--link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
|
18
18
|
--link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
|
19
|
+
--link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
|
19
20
|
--link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
|
20
21
|
--link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
|
21
22
|
--link-boxshadow-skiplink: var(--global-boxshadow-container-near);
|
22
23
|
--link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
|
24
|
+
--link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
|
23
25
|
--link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt3);
|
24
26
|
--link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt3);
|
25
27
|
--link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
|
@@ -56,6 +56,7 @@
|
|
56
56
|
--table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
|
57
57
|
--table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */
|
58
58
|
--table-space-none: var(--global-space-none);
|
59
|
+
--table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
|
59
60
|
--table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
|
60
61
|
--table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
|
61
62
|
--table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
|
@@ -67,10 +67,18 @@
|
|
67
67
|
--modes-color-interactive-danger-default: #E13E53;
|
68
68
|
--modes-color-interactive-danger-default-alt: #e85b66; /* for links in datatables */
|
69
69
|
--modes-color-interactive-danger-hover: #eb646c;
|
70
|
-
--modes-color-interactive-danger-hover-alt: #
|
70
|
+
--modes-color-interactive-danger-hover-alt: #e13e5314; /* button hover on dark */
|
71
71
|
--modes-color-interactive-danger-hover-alt2: #ec6a71; /* for links in datatables */
|
72
72
|
--modes-color-interactive-danger-with-active: #000000;
|
73
73
|
--modes-color-interactive-danger-with-default: #000000;
|
74
|
+
--modes-color-interactive-danger-inverse-active: #882b34; /* used on pill hover states */
|
75
|
+
--modes-color-interactive-danger-inverse-default: #CD384B;
|
76
|
+
--modes-color-interactive-danger-inverse-default-alt: #b23342; /* For links in datatables */
|
77
|
+
--modes-color-interactive-danger-inverse-hover: #aa323f; /* used on solid-pill and primary-button hover states */
|
78
|
+
--modes-color-interactive-danger-inverse-hover-alt: #cd384b14; /* used on secondary-button hover states */
|
79
|
+
--modes-color-interactive-danger-inverse-hover-alt2: #a3303d; /* used on link hover state */
|
80
|
+
--modes-color-interactive-danger-inverse-with-active: #FFFFFF;
|
81
|
+
--modes-color-interactive-danger-inverse-with-default: #FFFFFF;
|
74
82
|
--modes-color-interactive-data-entry-default: #000000; /* Input backgrounds. */
|
75
83
|
--modes-color-interactive-data-entry-with-active: #FFFFFF; /* checkbox tick icon or radio handle */
|
76
84
|
--modes-color-interactive-data-entry-with-active-alt: #000000;
|
@@ -81,10 +89,14 @@
|
|
81
89
|
--modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
|
82
90
|
--modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
|
83
91
|
--modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
|
84
|
-
--modes-color-interactive-focus-
|
92
|
+
--modes-color-interactive-focus-default: #FFB500;
|
85
93
|
--modes-color-interactive-focus-content: #FFFFFF;
|
94
|
+
--modes-color-interactive-focus-with-default: #000000;
|
86
95
|
--modes-color-interactive-focus-with-default-alt: #926916;
|
87
|
-
--modes-color-interactive-focus-default: #
|
96
|
+
--modes-color-interactive-focus-inverse-default: #000000;
|
97
|
+
--modes-color-interactive-focus-inverse-content: #000000;
|
98
|
+
--modes-color-interactive-focus-inverse-with-default: #FFB500;
|
99
|
+
--modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
|
88
100
|
--modes-color-interactive-inactive-default: #4b4b4b; /* disabled buttons on dark */
|
89
101
|
--modes-color-interactive-inactive-mask: #FFFFFF; /* full screen takeover token for modal dimmer */
|
90
102
|
--modes-color-interactive-inactive-default-alt: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
|
@@ -95,6 +107,7 @@
|
|
95
107
|
--modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
96
108
|
--modes-color-interactive-inactive-inverse-default: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
97
109
|
--modes-color-interactive-inactive-inverse-content: #0000006b; /* Inversed disabled text inside buttons and form inputs. */
|
110
|
+
--modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; /* Disabled labels inside buttons and Switch. */
|
98
111
|
--modes-color-interactive-monochrome-active: #FFFFFF;
|
99
112
|
--modes-color-interactive-monochrome-active-alt: #ffffff29;
|
100
113
|
--modes-color-interactive-monochrome-default: #ffffffe6;
|
@@ -67,10 +67,18 @@
|
|
67
67
|
--modes-color-interactive-danger-default: #CD384B;
|
68
68
|
--modes-color-interactive-danger-default-alt: #b23342; /* For links in datatables */
|
69
69
|
--modes-color-interactive-danger-hover: #aa323f; /* used on solid-pill and primary-button hover states */
|
70
|
-
--modes-color-interactive-danger-hover-alt: #
|
70
|
+
--modes-color-interactive-danger-hover-alt: #cd384b14; /* used on secondary-button hover states */
|
71
71
|
--modes-color-interactive-danger-hover-alt2: #a3303d; /* used on link hover state */
|
72
72
|
--modes-color-interactive-danger-with-active: #FFFFFF;
|
73
73
|
--modes-color-interactive-danger-with-default: #FFFFFF;
|
74
|
+
--modes-color-interactive-danger-inverse-active: #f28486; /* used on pill hover states */
|
75
|
+
--modes-color-interactive-danger-inverse-default: #E13E53;
|
76
|
+
--modes-color-interactive-danger-inverse-default-alt: #e85b66; /* For links in datatables */
|
77
|
+
--modes-color-interactive-danger-inverse-hover: #eb646c; /* used on solid-pill and primary-button hover states */
|
78
|
+
--modes-color-interactive-danger-inverse-hover-alt: #e13e5314; /* used on secondary-button hover states */
|
79
|
+
--modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; /* used on link hover state */
|
80
|
+
--modes-color-interactive-danger-inverse-with-active: #000000;
|
81
|
+
--modes-color-interactive-danger-inverse-with-default: #000000;
|
74
82
|
--modes-color-interactive-data-entry-default: #FFFFFF; /* Input backgrounds. */
|
75
83
|
--modes-color-interactive-data-entry-with-active: #000000; /* checkbox tick icon or radio handle */
|
76
84
|
--modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
|
@@ -81,10 +89,14 @@
|
|
81
89
|
--modes-color-interactive-data-entry-content: #000000f2; /* Input Text */
|
82
90
|
--modes-color-interactive-data-entry-content-alt: #0000008c; /* Hint text, placeholder text, character count etc */
|
83
91
|
--modes-color-interactive-data-entry-frozen-with-default: #698495; /* Input borders. */
|
84
|
-
--modes-color-interactive-focus-with-default: #FFB500;
|
85
|
-
--modes-color-interactive-focus-with-default-alt: #ffd27e;
|
86
92
|
--modes-color-interactive-focus-default: #000000;
|
87
93
|
--modes-color-interactive-focus-content: #000000;
|
94
|
+
--modes-color-interactive-focus-with-default: #FFB500;
|
95
|
+
--modes-color-interactive-focus-with-default-alt: #ffd27e;
|
96
|
+
--modes-color-interactive-focus-inverse-default: #FFB500;
|
97
|
+
--modes-color-interactive-focus-inverse-content: #FFFFFF;
|
98
|
+
--modes-color-interactive-focus-inverse-with-default: #000000;
|
99
|
+
--modes-color-interactive-focus-inverse-with-default-alt: #926916;
|
88
100
|
--modes-color-interactive-inactive-default: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
|
89
101
|
--modes-color-interactive-inactive-mask: #000000; /* full screen takeover token for modal dimmer */
|
90
102
|
--modes-color-interactive-inactive-default-alt: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
@@ -95,6 +107,7 @@
|
|
95
107
|
--modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
|
96
108
|
--modes-color-interactive-inactive-inverse-default: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
|
97
109
|
--modes-color-interactive-inactive-inverse-content: #ffffff6b; /* Inversed disabled text inside buttons and form inputs. */
|
110
|
+
--modes-color-interactive-inactive-inverse-content-alt: #000000; /* Disabled labels inside buttons and Switch. */
|
98
111
|
--modes-color-interactive-monochrome-active: #000000;
|
99
112
|
--modes-color-interactive-monochrome-active-alt: #00000029;
|
100
113
|
--modes-color-interactive-monochrome-default: #000000e6;
|