@sage/design-tokens 15.1.0 → 15.2.1
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 +122 -118
- package/css/frozenproduct/large/components/badge.css +3 -3
- package/css/frozenproduct/large/components/button.css +32 -32
- package/css/frozenproduct/large/components/container.css +11 -11
- package/css/frozenproduct/large/components/form.css +17 -14
- package/css/frozenproduct/large/components/link.css +2 -2
- package/css/frozenproduct/large/components/nav.css +3 -3
- package/css/frozenproduct/large/components/popover.css +6 -6
- package/css/frozenproduct/large/components/progress.css +5 -5
- package/css/frozenproduct/large/components/status.css +25 -25
- package/css/frozenproduct/large/components/tab.css +7 -7
- package/css/frozenproduct/large/components/table.css +8 -8
- package/css/frozenproduct/large/dark.css +2 -1
- package/css/frozenproduct/large/light.css +2 -1
- package/css/frozenproduct/small/components/badge.css +3 -3
- package/css/frozenproduct/small/components/button.css +32 -32
- package/css/frozenproduct/small/components/container.css +11 -11
- package/css/frozenproduct/small/components/form.css +17 -14
- package/css/frozenproduct/small/components/link.css +2 -2
- package/css/frozenproduct/small/components/nav.css +3 -3
- package/css/frozenproduct/small/components/popover.css +6 -6
- package/css/frozenproduct/small/components/progress.css +5 -5
- package/css/frozenproduct/small/components/status.css +25 -25
- package/css/frozenproduct/small/components/tab.css +7 -7
- package/css/frozenproduct/small/components/table.css +8 -8
- package/css/frozenproduct/small/dark.css +2 -1
- package/css/frozenproduct/small/light.css +2 -1
- package/css/product/all.css +6 -2
- package/css/product/large/components/form.css +3 -0
- package/css/product/large/dark.css +2 -1
- package/css/product/large/light.css +2 -1
- package/css/product/small/components/form.css +3 -0
- package/css/product/small/dark.css +2 -1
- package/css/product/small/light.css +2 -1
- package/ios/frozenproduct/large/dark/components/badge.h +2 -2
- package/ios/frozenproduct/large/dark/components/button.h +15 -15
- package/ios/frozenproduct/large/dark/components/container.h +9 -9
- package/ios/frozenproduct/large/dark/components/form.h +13 -10
- package/ios/frozenproduct/large/dark/components/nav.h +2 -2
- package/ios/frozenproduct/large/dark/components/popover.h +2 -2
- package/ios/frozenproduct/large/dark/components/progress.h +2 -2
- package/ios/frozenproduct/large/dark/components/status.h +20 -20
- package/ios/frozenproduct/large/dark/components/tab.h +5 -5
- package/ios/frozenproduct/large/dark/components/table.h +8 -8
- package/ios/frozenproduct/large/dark/mode.h +2 -1
- package/ios/frozenproduct/large/light/components/badge.h +2 -2
- package/ios/frozenproduct/large/light/components/button.h +30 -30
- package/ios/frozenproduct/large/light/components/container.h +11 -11
- package/ios/frozenproduct/large/light/components/form.h +17 -14
- package/ios/frozenproduct/large/light/components/link.h +2 -2
- package/ios/frozenproduct/large/light/components/nav.h +3 -3
- package/ios/frozenproduct/large/light/components/popover.h +6 -6
- package/ios/frozenproduct/large/light/components/progress.h +5 -5
- package/ios/frozenproduct/large/light/components/status.h +25 -25
- package/ios/frozenproduct/large/light/components/tab.h +6 -6
- package/ios/frozenproduct/large/light/components/table.h +8 -8
- package/ios/frozenproduct/large/light/mode.h +2 -1
- package/ios/frozenproduct/small/dark/components/badge.h +2 -2
- package/ios/frozenproduct/small/dark/components/button.h +15 -15
- package/ios/frozenproduct/small/dark/components/container.h +9 -9
- package/ios/frozenproduct/small/dark/components/form.h +13 -10
- package/ios/frozenproduct/small/dark/components/nav.h +2 -2
- package/ios/frozenproduct/small/dark/components/popover.h +2 -2
- package/ios/frozenproduct/small/dark/components/progress.h +2 -2
- package/ios/frozenproduct/small/dark/components/status.h +20 -20
- package/ios/frozenproduct/small/dark/components/tab.h +5 -5
- package/ios/frozenproduct/small/dark/components/table.h +8 -8
- package/ios/frozenproduct/small/dark/mode.h +2 -1
- package/ios/frozenproduct/small/light/components/badge.h +2 -2
- package/ios/frozenproduct/small/light/components/button.h +30 -30
- package/ios/frozenproduct/small/light/components/container.h +11 -11
- package/ios/frozenproduct/small/light/components/form.h +17 -14
- package/ios/frozenproduct/small/light/components/link.h +2 -2
- package/ios/frozenproduct/small/light/components/nav.h +3 -3
- package/ios/frozenproduct/small/light/components/popover.h +6 -6
- package/ios/frozenproduct/small/light/components/progress.h +5 -5
- package/ios/frozenproduct/small/light/components/status.h +25 -25
- package/ios/frozenproduct/small/light/components/tab.h +6 -6
- package/ios/frozenproduct/small/light/components/table.h +8 -8
- package/ios/frozenproduct/small/light/mode.h +2 -1
- package/ios/product/large/dark/components/form.h +3 -0
- package/ios/product/large/dark/mode.h +2 -1
- package/ios/product/large/light/components/form.h +3 -0
- package/ios/product/large/light/mode.h +2 -1
- package/ios/product/small/dark/components/button.h +51 -51
- package/ios/product/small/dark/components/container.h +76 -76
- package/ios/product/small/dark/components/form.h +50 -47
- package/ios/product/small/dark/components/link.h +1 -1
- package/ios/product/small/dark/components/nav.h +42 -42
- package/ios/product/small/dark/components/page.h +28 -28
- package/ios/product/small/dark/components/popover.h +12 -12
- package/ios/product/small/dark/components/profile.h +7 -7
- package/ios/product/small/dark/components/progress.h +5 -5
- package/ios/product/small/dark/components/status.h +10 -10
- package/ios/product/small/dark/components/tab.h +2 -2
- package/ios/product/small/dark/components/table.h +9 -9
- package/ios/product/small/dark/mode.h +2 -1
- package/ios/product/small/light/components/button.h +51 -51
- package/ios/product/small/light/components/container.h +76 -76
- package/ios/product/small/light/components/form.h +50 -47
- package/ios/product/small/light/components/link.h +1 -1
- package/ios/product/small/light/components/nav.h +42 -42
- package/ios/product/small/light/components/page.h +28 -28
- package/ios/product/small/light/components/popover.h +12 -12
- package/ios/product/small/light/components/profile.h +7 -7
- package/ios/product/small/light/components/progress.h +5 -5
- package/ios/product/small/light/components/status.h +10 -10
- package/ios/product/small/light/components/tab.h +2 -2
- package/ios/product/small/light/components/table.h +9 -9
- package/ios/product/small/light/mode.h +2 -1
- package/js/common/frozenproduct/large/dark/components/badge.js +8 -10
- package/js/common/frozenproduct/large/dark/components/button.js +81 -79
- package/js/common/frozenproduct/large/dark/components/container.js +31 -33
- package/js/common/frozenproduct/large/dark/components/form.d.ts +3 -0
- package/js/common/frozenproduct/large/dark/components/form.js +93 -40
- package/js/common/frozenproduct/large/dark/components/link.js +4 -4
- package/js/common/frozenproduct/large/dark/components/nav.js +8 -8
- package/js/common/frozenproduct/large/dark/components/popover.js +14 -20
- package/js/common/frozenproduct/large/dark/components/progress.js +12 -12
- package/js/common/frozenproduct/large/dark/components/status.js +78 -76
- package/js/common/frozenproduct/large/dark/components/tab.js +19 -19
- package/js/common/frozenproduct/large/dark/components/table.js +24 -28
- package/js/common/frozenproduct/large/dark/mode.d.ts +1 -0
- package/js/common/frozenproduct/large/dark/mode.js +42 -2
- package/js/common/frozenproduct/large/light/components/badge.js +8 -10
- package/js/common/frozenproduct/large/light/components/button.js +96 -94
- package/js/common/frozenproduct/large/light/components/container.js +33 -35
- package/js/common/frozenproduct/large/light/components/form.d.ts +3 -0
- package/js/common/frozenproduct/large/light/components/form.js +97 -44
- package/js/common/frozenproduct/large/light/components/link.js +6 -6
- package/js/common/frozenproduct/large/light/components/nav.js +9 -9
- package/js/common/frozenproduct/large/light/components/popover.js +18 -24
- package/js/common/frozenproduct/large/light/components/progress.js +15 -15
- package/js/common/frozenproduct/large/light/components/status.js +83 -81
- package/js/common/frozenproduct/large/light/components/tab.js +20 -20
- package/js/common/frozenproduct/large/light/components/table.js +24 -28
- package/js/common/frozenproduct/large/light/mode.d.ts +1 -0
- package/js/common/frozenproduct/large/light/mode.js +42 -2
- package/js/common/frozenproduct/small/dark/components/badge.js +8 -10
- package/js/common/frozenproduct/small/dark/components/button.js +81 -79
- package/js/common/frozenproduct/small/dark/components/container.js +31 -33
- package/js/common/frozenproduct/small/dark/components/form.d.ts +3 -0
- package/js/common/frozenproduct/small/dark/components/form.js +93 -40
- package/js/common/frozenproduct/small/dark/components/link.js +4 -4
- package/js/common/frozenproduct/small/dark/components/nav.js +8 -8
- package/js/common/frozenproduct/small/dark/components/popover.js +14 -20
- package/js/common/frozenproduct/small/dark/components/progress.js +12 -12
- package/js/common/frozenproduct/small/dark/components/status.js +78 -76
- package/js/common/frozenproduct/small/dark/components/tab.js +19 -19
- package/js/common/frozenproduct/small/dark/components/table.js +24 -28
- package/js/common/frozenproduct/small/dark/mode.d.ts +1 -0
- package/js/common/frozenproduct/small/dark/mode.js +42 -2
- package/js/common/frozenproduct/small/light/components/badge.js +8 -10
- package/js/common/frozenproduct/small/light/components/button.js +96 -94
- package/js/common/frozenproduct/small/light/components/container.js +33 -35
- package/js/common/frozenproduct/small/light/components/form.d.ts +3 -0
- package/js/common/frozenproduct/small/light/components/form.js +97 -44
- package/js/common/frozenproduct/small/light/components/link.js +6 -6
- package/js/common/frozenproduct/small/light/components/nav.js +9 -9
- package/js/common/frozenproduct/small/light/components/popover.js +18 -24
- package/js/common/frozenproduct/small/light/components/progress.js +15 -15
- package/js/common/frozenproduct/small/light/components/status.js +83 -81
- package/js/common/frozenproduct/small/light/components/tab.js +20 -20
- package/js/common/frozenproduct/small/light/components/table.js +24 -28
- package/js/common/frozenproduct/small/light/mode.d.ts +1 -0
- package/js/common/frozenproduct/small/light/mode.js +42 -2
- package/js/common/product/large/dark/components/form.d.ts +3 -0
- package/js/common/product/large/dark/components/form.js +53 -0
- package/js/common/product/large/dark/mode.d.ts +1 -0
- package/js/common/product/large/dark/mode.js +42 -2
- package/js/common/product/large/light/components/form.d.ts +3 -0
- package/js/common/product/large/light/components/form.js +53 -0
- package/js/common/product/large/light/mode.d.ts +1 -0
- package/js/common/product/large/light/mode.js +42 -2
- package/js/common/product/small/dark/components/button.js +51 -51
- package/js/common/product/small/dark/components/container.js +76 -76
- package/js/common/product/small/dark/components/form.d.ts +3 -0
- package/js/common/product/small/dark/components/form.js +100 -47
- package/js/common/product/small/dark/components/link.js +1 -1
- package/js/common/product/small/dark/components/nav.js +42 -42
- package/js/common/product/small/dark/components/page.js +28 -28
- package/js/common/product/small/dark/components/popover.js +12 -12
- package/js/common/product/small/dark/components/profile.js +7 -7
- package/js/common/product/small/dark/components/progress.js +5 -5
- package/js/common/product/small/dark/components/status.js +10 -10
- package/js/common/product/small/dark/components/tab.js +2 -2
- package/js/common/product/small/dark/components/table.js +9 -9
- package/js/common/product/small/dark/mode.d.ts +1 -0
- package/js/common/product/small/dark/mode.js +42 -2
- package/js/common/product/small/light/components/button.js +51 -51
- package/js/common/product/small/light/components/container.js +76 -76
- package/js/common/product/small/light/components/form.d.ts +3 -0
- package/js/common/product/small/light/components/form.js +100 -47
- package/js/common/product/small/light/components/link.js +1 -1
- package/js/common/product/small/light/components/nav.js +42 -42
- package/js/common/product/small/light/components/page.js +28 -28
- package/js/common/product/small/light/components/popover.js +12 -12
- package/js/common/product/small/light/components/profile.js +7 -7
- package/js/common/product/small/light/components/progress.js +5 -5
- package/js/common/product/small/light/components/status.js +10 -10
- package/js/common/product/small/light/components/tab.js +2 -2
- package/js/common/product/small/light/components/table.js +9 -9
- package/js/common/product/small/light/mode.d.ts +1 -0
- package/js/common/product/small/light/mode.js +42 -2
- package/js/es6/frozenproduct/large/dark/components/badge.js +2 -2
- package/js/es6/frozenproduct/large/dark/components/button.js +15 -15
- package/js/es6/frozenproduct/large/dark/components/container.js +9 -9
- package/js/es6/frozenproduct/large/dark/components/form.d.ts +16 -1
- package/js/es6/frozenproduct/large/dark/components/form.js +25 -10
- package/js/es6/frozenproduct/large/dark/components/nav.js +2 -2
- package/js/es6/frozenproduct/large/dark/components/popover.js +2 -2
- package/js/es6/frozenproduct/large/dark/components/progress.js +2 -2
- package/js/es6/frozenproduct/large/dark/components/status.js +20 -20
- package/js/es6/frozenproduct/large/dark/components/tab.js +5 -5
- package/js/es6/frozenproduct/large/dark/components/table.js +8 -8
- package/js/es6/frozenproduct/large/dark/mode.d.ts +1 -0
- package/js/es6/frozenproduct/large/dark/mode.js +2 -1
- package/js/es6/frozenproduct/large/light/components/badge.js +2 -2
- package/js/es6/frozenproduct/large/light/components/button.js +30 -30
- package/js/es6/frozenproduct/large/light/components/container.js +11 -11
- package/js/es6/frozenproduct/large/light/components/form.d.ts +16 -1
- package/js/es6/frozenproduct/large/light/components/form.js +29 -14
- package/js/es6/frozenproduct/large/light/components/link.js +2 -2
- package/js/es6/frozenproduct/large/light/components/nav.js +3 -3
- package/js/es6/frozenproduct/large/light/components/popover.js +6 -6
- package/js/es6/frozenproduct/large/light/components/progress.js +5 -5
- package/js/es6/frozenproduct/large/light/components/status.js +25 -25
- package/js/es6/frozenproduct/large/light/components/tab.js +6 -6
- package/js/es6/frozenproduct/large/light/components/table.js +8 -8
- package/js/es6/frozenproduct/large/light/mode.d.ts +1 -0
- package/js/es6/frozenproduct/large/light/mode.js +2 -1
- package/js/es6/frozenproduct/small/dark/components/badge.js +2 -2
- package/js/es6/frozenproduct/small/dark/components/button.js +15 -15
- package/js/es6/frozenproduct/small/dark/components/container.js +9 -9
- package/js/es6/frozenproduct/small/dark/components/form.d.ts +16 -1
- package/js/es6/frozenproduct/small/dark/components/form.js +25 -10
- package/js/es6/frozenproduct/small/dark/components/nav.js +2 -2
- package/js/es6/frozenproduct/small/dark/components/popover.js +2 -2
- package/js/es6/frozenproduct/small/dark/components/progress.js +2 -2
- package/js/es6/frozenproduct/small/dark/components/status.js +20 -20
- package/js/es6/frozenproduct/small/dark/components/tab.js +5 -5
- package/js/es6/frozenproduct/small/dark/components/table.js +8 -8
- package/js/es6/frozenproduct/small/dark/mode.d.ts +1 -0
- package/js/es6/frozenproduct/small/dark/mode.js +2 -1
- package/js/es6/frozenproduct/small/light/components/badge.js +2 -2
- package/js/es6/frozenproduct/small/light/components/button.js +30 -30
- package/js/es6/frozenproduct/small/light/components/container.js +11 -11
- package/js/es6/frozenproduct/small/light/components/form.d.ts +16 -1
- package/js/es6/frozenproduct/small/light/components/form.js +29 -14
- package/js/es6/frozenproduct/small/light/components/link.js +2 -2
- package/js/es6/frozenproduct/small/light/components/nav.js +3 -3
- package/js/es6/frozenproduct/small/light/components/popover.js +6 -6
- package/js/es6/frozenproduct/small/light/components/progress.js +5 -5
- package/js/es6/frozenproduct/small/light/components/status.js +25 -25
- package/js/es6/frozenproduct/small/light/components/tab.js +6 -6
- package/js/es6/frozenproduct/small/light/components/table.js +8 -8
- package/js/es6/frozenproduct/small/light/mode.d.ts +1 -0
- package/js/es6/frozenproduct/small/light/mode.js +2 -1
- package/js/es6/product/large/dark/components/form.d.ts +15 -0
- package/js/es6/product/large/dark/components/form.js +15 -0
- package/js/es6/product/large/dark/mode.d.ts +1 -0
- package/js/es6/product/large/dark/mode.js +2 -1
- package/js/es6/product/large/light/components/form.d.ts +15 -0
- package/js/es6/product/large/light/components/form.js +15 -0
- package/js/es6/product/large/light/mode.d.ts +1 -0
- package/js/es6/product/large/light/mode.js +2 -1
- package/js/es6/product/small/dark/components/button.js +51 -51
- package/js/es6/product/small/dark/components/container.js +76 -76
- package/js/es6/product/small/dark/components/form.d.ts +15 -0
- package/js/es6/product/small/dark/components/form.js +62 -47
- package/js/es6/product/small/dark/components/link.js +1 -1
- package/js/es6/product/small/dark/components/nav.js +42 -42
- package/js/es6/product/small/dark/components/page.js +28 -28
- package/js/es6/product/small/dark/components/popover.js +12 -12
- package/js/es6/product/small/dark/components/profile.js +7 -7
- package/js/es6/product/small/dark/components/progress.js +5 -5
- package/js/es6/product/small/dark/components/status.js +10 -10
- package/js/es6/product/small/dark/components/tab.js +2 -2
- package/js/es6/product/small/dark/components/table.js +9 -9
- package/js/es6/product/small/dark/mode.d.ts +1 -0
- package/js/es6/product/small/dark/mode.js +2 -1
- package/js/es6/product/small/light/components/button.js +51 -51
- package/js/es6/product/small/light/components/container.js +76 -76
- package/js/es6/product/small/light/components/form.d.ts +15 -0
- package/js/es6/product/small/light/components/form.js +62 -47
- package/js/es6/product/small/light/components/link.js +1 -1
- package/js/es6/product/small/light/components/nav.js +42 -42
- package/js/es6/product/small/light/components/page.js +28 -28
- package/js/es6/product/small/light/components/popover.js +12 -12
- package/js/es6/product/small/light/components/profile.js +7 -7
- package/js/es6/product/small/light/components/progress.js +5 -5
- package/js/es6/product/small/light/components/status.js +10 -10
- package/js/es6/product/small/light/components/tab.js +2 -2
- package/js/es6/product/small/light/components/table.js +9 -9
- package/js/es6/product/small/light/mode.d.ts +1 -0
- package/js/es6/product/small/light/mode.js +2 -1
- package/js/umd/frozenproduct/large/dark/components/badge.js +8 -10
- package/js/umd/frozenproduct/large/dark/components/button.js +86 -79
- package/js/umd/frozenproduct/large/dark/components/container.js +31 -33
- package/js/umd/frozenproduct/large/dark/components/form.js +93 -40
- package/js/umd/frozenproduct/large/dark/components/link.js +4 -4
- package/js/umd/frozenproduct/large/dark/components/nav.js +9 -8
- package/js/umd/frozenproduct/large/dark/components/popover.js +14 -20
- package/js/umd/frozenproduct/large/dark/components/progress.js +12 -12
- package/js/umd/frozenproduct/large/dark/components/status.js +78 -76
- package/js/umd/frozenproduct/large/dark/components/tab.js +19 -19
- package/js/umd/frozenproduct/large/dark/components/table.js +25 -28
- package/js/umd/frozenproduct/large/dark/mode.js +42 -2
- package/js/umd/frozenproduct/large/light/components/badge.js +8 -10
- package/js/umd/frozenproduct/large/light/components/button.js +101 -94
- package/js/umd/frozenproduct/large/light/components/container.js +33 -35
- package/js/umd/frozenproduct/large/light/components/form.js +97 -44
- package/js/umd/frozenproduct/large/light/components/link.js +6 -6
- package/js/umd/frozenproduct/large/light/components/nav.js +10 -9
- package/js/umd/frozenproduct/large/light/components/popover.js +18 -24
- package/js/umd/frozenproduct/large/light/components/progress.js +15 -15
- package/js/umd/frozenproduct/large/light/components/status.js +83 -81
- package/js/umd/frozenproduct/large/light/components/tab.js +20 -20
- package/js/umd/frozenproduct/large/light/components/table.js +25 -28
- package/js/umd/frozenproduct/large/light/mode.js +42 -2
- package/js/umd/frozenproduct/small/dark/components/badge.js +8 -10
- package/js/umd/frozenproduct/small/dark/components/button.js +86 -79
- package/js/umd/frozenproduct/small/dark/components/container.js +31 -33
- package/js/umd/frozenproduct/small/dark/components/form.js +93 -40
- package/js/umd/frozenproduct/small/dark/components/link.js +4 -4
- package/js/umd/frozenproduct/small/dark/components/nav.js +9 -8
- package/js/umd/frozenproduct/small/dark/components/popover.js +14 -20
- package/js/umd/frozenproduct/small/dark/components/progress.js +12 -12
- package/js/umd/frozenproduct/small/dark/components/status.js +78 -76
- package/js/umd/frozenproduct/small/dark/components/tab.js +19 -19
- package/js/umd/frozenproduct/small/dark/components/table.js +25 -28
- package/js/umd/frozenproduct/small/dark/mode.js +42 -2
- package/js/umd/frozenproduct/small/light/components/badge.js +8 -10
- package/js/umd/frozenproduct/small/light/components/button.js +101 -94
- package/js/umd/frozenproduct/small/light/components/container.js +33 -35
- package/js/umd/frozenproduct/small/light/components/form.js +97 -44
- package/js/umd/frozenproduct/small/light/components/link.js +6 -6
- package/js/umd/frozenproduct/small/light/components/nav.js +10 -9
- package/js/umd/frozenproduct/small/light/components/popover.js +18 -24
- package/js/umd/frozenproduct/small/light/components/progress.js +15 -15
- package/js/umd/frozenproduct/small/light/components/status.js +83 -81
- package/js/umd/frozenproduct/small/light/components/tab.js +20 -20
- package/js/umd/frozenproduct/small/light/components/table.js +25 -28
- package/js/umd/frozenproduct/small/light/mode.js +42 -2
- package/js/umd/product/large/dark/components/form.js +53 -0
- package/js/umd/product/large/dark/mode.js +42 -2
- package/js/umd/product/large/light/components/form.js +53 -0
- package/js/umd/product/large/light/mode.js +42 -2
- package/js/umd/product/small/dark/components/button.js +51 -51
- package/js/umd/product/small/dark/components/container.js +76 -76
- package/js/umd/product/small/dark/components/form.js +100 -47
- package/js/umd/product/small/dark/components/link.js +1 -1
- package/js/umd/product/small/dark/components/nav.js +42 -42
- package/js/umd/product/small/dark/components/page.js +28 -28
- package/js/umd/product/small/dark/components/popover.js +12 -12
- package/js/umd/product/small/dark/components/profile.js +7 -7
- package/js/umd/product/small/dark/components/progress.js +5 -5
- package/js/umd/product/small/dark/components/status.js +10 -10
- package/js/umd/product/small/dark/components/tab.js +2 -2
- package/js/umd/product/small/dark/components/table.js +9 -9
- package/js/umd/product/small/dark/mode.js +42 -2
- package/js/umd/product/small/light/components/button.js +51 -51
- package/js/umd/product/small/light/components/container.js +76 -76
- package/js/umd/product/small/light/components/form.js +100 -47
- package/js/umd/product/small/light/components/link.js +1 -1
- package/js/umd/product/small/light/components/nav.js +42 -42
- package/js/umd/product/small/light/components/page.js +28 -28
- package/js/umd/product/small/light/components/popover.js +12 -12
- package/js/umd/product/small/light/components/profile.js +7 -7
- package/js/umd/product/small/light/components/progress.js +5 -5
- package/js/umd/product/small/light/components/status.js +10 -10
- package/js/umd/product/small/light/components/tab.js +2 -2
- package/js/umd/product/small/light/components/table.js +9 -9
- package/js/umd/product/small/light/mode.js +42 -2
- package/json/flat/frozenproduct/large/dark/components/badge.json +2 -2
- package/json/flat/frozenproduct/large/dark/components/button.json +15 -15
- package/json/flat/frozenproduct/large/dark/components/container.json +9 -9
- package/json/flat/frozenproduct/large/dark/components/form.json +13 -10
- package/json/flat/frozenproduct/large/dark/components/nav.json +2 -2
- package/json/flat/frozenproduct/large/dark/components/popover.json +2 -2
- package/json/flat/frozenproduct/large/dark/components/progress.json +2 -2
- package/json/flat/frozenproduct/large/dark/components/status.json +20 -20
- package/json/flat/frozenproduct/large/dark/components/tab.json +5 -5
- package/json/flat/frozenproduct/large/dark/components/table.json +8 -8
- package/json/flat/frozenproduct/large/dark/mode.json +2 -1
- package/json/flat/frozenproduct/large/light/components/badge.json +2 -2
- package/json/flat/frozenproduct/large/light/components/button.json +30 -30
- package/json/flat/frozenproduct/large/light/components/container.json +11 -11
- package/json/flat/frozenproduct/large/light/components/form.json +17 -14
- package/json/flat/frozenproduct/large/light/components/link.json +2 -2
- package/json/flat/frozenproduct/large/light/components/nav.json +3 -3
- package/json/flat/frozenproduct/large/light/components/popover.json +6 -6
- package/json/flat/frozenproduct/large/light/components/progress.json +5 -5
- package/json/flat/frozenproduct/large/light/components/status.json +25 -25
- package/json/flat/frozenproduct/large/light/components/tab.json +6 -6
- package/json/flat/frozenproduct/large/light/components/table.json +8 -8
- package/json/flat/frozenproduct/large/light/mode.json +2 -1
- package/json/flat/frozenproduct/small/dark/components/badge.json +2 -2
- package/json/flat/frozenproduct/small/dark/components/button.json +15 -15
- package/json/flat/frozenproduct/small/dark/components/container.json +9 -9
- package/json/flat/frozenproduct/small/dark/components/form.json +13 -10
- package/json/flat/frozenproduct/small/dark/components/nav.json +2 -2
- package/json/flat/frozenproduct/small/dark/components/popover.json +2 -2
- package/json/flat/frozenproduct/small/dark/components/progress.json +2 -2
- package/json/flat/frozenproduct/small/dark/components/status.json +20 -20
- package/json/flat/frozenproduct/small/dark/components/tab.json +5 -5
- package/json/flat/frozenproduct/small/dark/components/table.json +8 -8
- package/json/flat/frozenproduct/small/dark/mode.json +2 -1
- package/json/flat/frozenproduct/small/light/components/badge.json +2 -2
- package/json/flat/frozenproduct/small/light/components/button.json +30 -30
- package/json/flat/frozenproduct/small/light/components/container.json +11 -11
- package/json/flat/frozenproduct/small/light/components/form.json +17 -14
- package/json/flat/frozenproduct/small/light/components/link.json +2 -2
- package/json/flat/frozenproduct/small/light/components/nav.json +3 -3
- package/json/flat/frozenproduct/small/light/components/popover.json +6 -6
- package/json/flat/frozenproduct/small/light/components/progress.json +5 -5
- package/json/flat/frozenproduct/small/light/components/status.json +25 -25
- package/json/flat/frozenproduct/small/light/components/tab.json +6 -6
- package/json/flat/frozenproduct/small/light/components/table.json +8 -8
- package/json/flat/frozenproduct/small/light/mode.json +2 -1
- package/json/flat/product/large/dark/components/form.json +3 -0
- package/json/flat/product/large/dark/mode.json +2 -1
- package/json/flat/product/large/light/components/form.json +3 -0
- package/json/flat/product/large/light/mode.json +2 -1
- package/json/flat/product/small/dark/components/button.json +51 -51
- package/json/flat/product/small/dark/components/container.json +76 -76
- package/json/flat/product/small/dark/components/form.json +50 -47
- package/json/flat/product/small/dark/components/link.json +1 -1
- package/json/flat/product/small/dark/components/nav.json +42 -42
- package/json/flat/product/small/dark/components/page.json +28 -28
- package/json/flat/product/small/dark/components/popover.json +12 -12
- package/json/flat/product/small/dark/components/profile.json +7 -7
- package/json/flat/product/small/dark/components/progress.json +5 -5
- package/json/flat/product/small/dark/components/status.json +10 -10
- package/json/flat/product/small/dark/components/tab.json +2 -2
- package/json/flat/product/small/dark/components/table.json +9 -9
- package/json/flat/product/small/dark/mode.json +2 -1
- package/json/flat/product/small/light/components/button.json +51 -51
- package/json/flat/product/small/light/components/container.json +76 -76
- package/json/flat/product/small/light/components/form.json +50 -47
- package/json/flat/product/small/light/components/link.json +1 -1
- package/json/flat/product/small/light/components/nav.json +42 -42
- package/json/flat/product/small/light/components/page.json +28 -28
- package/json/flat/product/small/light/components/popover.json +12 -12
- package/json/flat/product/small/light/components/profile.json +7 -7
- package/json/flat/product/small/light/components/progress.json +5 -5
- package/json/flat/product/small/light/components/status.json +10 -10
- package/json/flat/product/small/light/components/tab.json +2 -2
- package/json/flat/product/small/light/components/table.json +9 -9
- package/json/flat/product/small/light/mode.json +2 -1
- package/json/nested/frozenproduct/large/dark/components/badge.json +2 -2
- package/json/nested/frozenproduct/large/dark/components/button.json +15 -15
- package/json/nested/frozenproduct/large/dark/components/container.json +9 -9
- package/json/nested/frozenproduct/large/dark/components/form.json +26 -11
- package/json/nested/frozenproduct/large/dark/components/nav.json +2 -2
- package/json/nested/frozenproduct/large/dark/components/popover.json +2 -2
- package/json/nested/frozenproduct/large/dark/components/progress.json +2 -2
- package/json/nested/frozenproduct/large/dark/components/status.json +20 -20
- package/json/nested/frozenproduct/large/dark/components/tab.json +5 -5
- package/json/nested/frozenproduct/large/dark/components/table.json +8 -8
- package/json/nested/frozenproduct/large/dark/mode.json +2 -1
- package/json/nested/frozenproduct/large/light/components/badge.json +2 -2
- package/json/nested/frozenproduct/large/light/components/button.json +30 -30
- package/json/nested/frozenproduct/large/light/components/container.json +11 -11
- package/json/nested/frozenproduct/large/light/components/form.json +30 -15
- package/json/nested/frozenproduct/large/light/components/link.json +2 -2
- package/json/nested/frozenproduct/large/light/components/nav.json +3 -3
- package/json/nested/frozenproduct/large/light/components/popover.json +6 -6
- package/json/nested/frozenproduct/large/light/components/progress.json +5 -5
- package/json/nested/frozenproduct/large/light/components/status.json +25 -25
- package/json/nested/frozenproduct/large/light/components/tab.json +6 -6
- package/json/nested/frozenproduct/large/light/components/table.json +8 -8
- package/json/nested/frozenproduct/large/light/mode.json +2 -1
- package/json/nested/frozenproduct/small/dark/components/badge.json +2 -2
- package/json/nested/frozenproduct/small/dark/components/button.json +15 -15
- package/json/nested/frozenproduct/small/dark/components/container.json +9 -9
- package/json/nested/frozenproduct/small/dark/components/form.json +26 -11
- package/json/nested/frozenproduct/small/dark/components/nav.json +2 -2
- package/json/nested/frozenproduct/small/dark/components/popover.json +2 -2
- package/json/nested/frozenproduct/small/dark/components/progress.json +2 -2
- package/json/nested/frozenproduct/small/dark/components/status.json +20 -20
- package/json/nested/frozenproduct/small/dark/components/tab.json +5 -5
- package/json/nested/frozenproduct/small/dark/components/table.json +8 -8
- package/json/nested/frozenproduct/small/dark/mode.json +2 -1
- package/json/nested/frozenproduct/small/light/components/badge.json +2 -2
- package/json/nested/frozenproduct/small/light/components/button.json +30 -30
- package/json/nested/frozenproduct/small/light/components/container.json +11 -11
- package/json/nested/frozenproduct/small/light/components/form.json +30 -15
- package/json/nested/frozenproduct/small/light/components/link.json +2 -2
- package/json/nested/frozenproduct/small/light/components/nav.json +3 -3
- package/json/nested/frozenproduct/small/light/components/popover.json +6 -6
- package/json/nested/frozenproduct/small/light/components/progress.json +5 -5
- package/json/nested/frozenproduct/small/light/components/status.json +25 -25
- package/json/nested/frozenproduct/small/light/components/tab.json +6 -6
- package/json/nested/frozenproduct/small/light/components/table.json +8 -8
- package/json/nested/frozenproduct/small/light/mode.json +2 -1
- package/json/nested/product/large/dark/components/form.json +16 -1
- package/json/nested/product/large/dark/mode.json +2 -1
- package/json/nested/product/large/light/components/form.json +16 -1
- package/json/nested/product/large/light/mode.json +2 -1
- package/json/nested/product/small/dark/components/button.json +51 -51
- package/json/nested/product/small/dark/components/container.json +76 -76
- package/json/nested/product/small/dark/components/form.json +63 -48
- package/json/nested/product/small/dark/components/link.json +1 -1
- package/json/nested/product/small/dark/components/nav.json +42 -42
- package/json/nested/product/small/dark/components/page.json +28 -28
- package/json/nested/product/small/dark/components/popover.json +12 -12
- package/json/nested/product/small/dark/components/profile.json +7 -7
- package/json/nested/product/small/dark/components/progress.json +5 -5
- package/json/nested/product/small/dark/components/status.json +10 -10
- package/json/nested/product/small/dark/components/tab.json +2 -2
- package/json/nested/product/small/dark/components/table.json +9 -9
- package/json/nested/product/small/dark/mode.json +2 -1
- package/json/nested/product/small/light/components/button.json +51 -51
- package/json/nested/product/small/light/components/container.json +76 -76
- package/json/nested/product/small/light/components/form.json +63 -48
- package/json/nested/product/small/light/components/link.json +1 -1
- package/json/nested/product/small/light/components/nav.json +42 -42
- package/json/nested/product/small/light/components/page.json +28 -28
- package/json/nested/product/small/light/components/popover.json +12 -12
- package/json/nested/product/small/light/components/profile.json +7 -7
- package/json/nested/product/small/light/components/progress.json +5 -5
- package/json/nested/product/small/light/components/status.json +10 -10
- package/json/nested/product/small/light/components/tab.json +2 -2
- package/json/nested/product/small/light/components/table.json +9 -9
- package/json/nested/product/small/light/mode.json +2 -1
- package/package.json +1 -1
- package/sage-design-tokens-15.2.1.tgz +0 -0
- package/scss/frozenproduct/large/components/badge.scss +3 -3
- package/scss/frozenproduct/large/components/button.scss +32 -32
- package/scss/frozenproduct/large/components/container.scss +11 -11
- package/scss/frozenproduct/large/components/form.scss +16 -13
- package/scss/frozenproduct/large/components/link.scss +2 -2
- package/scss/frozenproduct/large/components/nav.scss +3 -3
- package/scss/frozenproduct/large/components/popover.scss +6 -6
- package/scss/frozenproduct/large/components/progress.scss +5 -5
- package/scss/frozenproduct/large/components/status.scss +25 -25
- package/scss/frozenproduct/large/components/tab.scss +7 -7
- package/scss/frozenproduct/large/components/table.scss +8 -8
- package/scss/frozenproduct/large/dark.scss +2 -1
- package/scss/frozenproduct/large/light.scss +2 -1
- package/scss/frozenproduct/small/components/badge.scss +3 -3
- package/scss/frozenproduct/small/components/button.scss +32 -32
- package/scss/frozenproduct/small/components/container.scss +11 -11
- package/scss/frozenproduct/small/components/form.scss +16 -13
- package/scss/frozenproduct/small/components/link.scss +2 -2
- package/scss/frozenproduct/small/components/nav.scss +3 -3
- package/scss/frozenproduct/small/components/popover.scss +6 -6
- package/scss/frozenproduct/small/components/progress.scss +5 -5
- package/scss/frozenproduct/small/components/status.scss +25 -25
- package/scss/frozenproduct/small/components/tab.scss +7 -7
- package/scss/frozenproduct/small/components/table.scss +8 -8
- package/scss/frozenproduct/small/dark.scss +2 -1
- package/scss/frozenproduct/small/light.scss +2 -1
- package/scss/product/large/components/form.scss +3 -0
- package/scss/product/large/dark.scss +2 -1
- package/scss/product/large/light.scss +2 -1
- package/scss/product/small/components/button.scss +13 -13
- package/scss/product/small/components/container.scss +10 -10
- package/scss/product/small/components/form.scss +10 -7
- package/scss/product/small/components/link.scss +2 -2
- package/scss/product/small/components/nav.scss +5 -5
- package/scss/product/small/components/page.scss +1 -1
- package/scss/product/small/components/popover.scss +2 -2
- package/scss/product/small/components/progress.scss +6 -6
- package/scss/product/small/components/status.scss +3 -3
- package/scss/product/small/components/tab.scss +7 -7
- package/scss/product/small/components/table.scss +10 -10
- package/scss/product/small/dark.scss +2 -1
- package/scss/product/small/light.scss +2 -1
- package/sage-design-tokens-15.1.0.tgz +0 -0
@@ -3,9 +3,10 @@
|
|
3
3
|
*/
|
4
4
|
|
5
5
|
:root {
|
6
|
+
--badge-color-notification-bg-default: var(--modes-color-status-caution-frozenglobal-default);
|
6
7
|
--badge-radius-badge: var(--global-radius-circle); /* Badge */
|
7
|
-
--badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
|
8
8
|
--badge-color-notification-bg-alt: var(--modes-color-status-info-default);
|
9
|
+
--badge-color-notification-label-default: var(--modes-color-generic-content-extreme);
|
9
10
|
--badge-color-notification-inverse-border-default: var(--modes-color-generic-content-extreme);
|
10
11
|
--badge-color-notification-inverse-bg-default: var(--modes-color-status-negative-inverse-default); /* Used in global nav notification badges */
|
11
12
|
--badge-color-notification-inverse-bg-alt: var(--modes-color-status-info-inverse-default);
|
@@ -14,8 +15,7 @@
|
|
14
15
|
--badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
|
15
16
|
--badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
|
16
17
|
--badge-color-notification-border-default: var(--modes-color-generic-content-nought);
|
17
|
-
--badge-color-notification-label-
|
18
|
-
--badge-color-notification-label-alt: var(--modes-color-generic-content-nought);
|
18
|
+
--badge-color-notification-label-alt: var(--modes-color-generic-fg-nought);
|
19
19
|
--badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
|
20
20
|
--badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
|
21
21
|
--badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */
|
@@ -34,9 +34,15 @@
|
|
34
34
|
--button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
|
35
35
|
--button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
36
36
|
--button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
|
37
|
+
--button-color-typical-tertiary-bg-enabled: var(--modes-color-none);
|
38
|
+
--button-color-typical-tertiary-border-disabled: var(--modes-color-none);
|
39
|
+
--button-color-typical-tertiary-border-enabled: var(--modes-color-none);
|
40
|
+
--button-color-typical-tertiary-border-hover: var(--modes-color-none);
|
37
41
|
--button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
|
38
42
|
--button-color-typical-tertiary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
|
43
|
+
--button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default);
|
39
44
|
--button-color-typical-subtle-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
|
45
|
+
--button-color-typical-toggle-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
|
40
46
|
--button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
|
41
47
|
--button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
|
42
48
|
--button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
|
@@ -73,20 +79,15 @@
|
|
73
79
|
--button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
|
74
80
|
--button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
|
75
81
|
--button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
|
76
|
-
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
|
82
|
+
--button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-frozen-default);
|
77
83
|
--button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
|
78
|
-
--button-color-typical-secondary-
|
79
|
-
--button-color-typical-secondary-label-
|
80
|
-
--button-color-typical-tertiary-
|
81
|
-
--button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
|
82
|
-
--button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
84
|
+
--button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-frozen-default);
|
85
|
+
--button-color-typical-secondary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
|
86
|
+
--button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
|
83
87
|
--button-color-typical-tertiary-inverse-bg-enabled: var(--button-color-none);
|
84
|
-
--button-color-typical-subtle-
|
85
|
-
--button-color-typical-
|
86
|
-
--button-color-typical-
|
87
|
-
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-active);
|
88
|
-
--button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
|
89
|
-
--button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
88
|
+
--button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-frozen-active);
|
89
|
+
--button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
|
90
|
+
--button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default-alt);
|
90
91
|
--button-color-video-bg-blur: var(--modes-color-interactive-monochrome-hover-alt);
|
91
92
|
--button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
|
92
93
|
--button-size-xs: var(--global-size-macro-xs); /* min-height on XS Buttons */
|
@@ -228,19 +229,19 @@
|
|
228
229
|
--button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
|
229
230
|
--button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
230
231
|
--button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
231
|
-
--button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
|
232
|
-
--button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
|
232
|
+
--button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-frozen-active);
|
233
|
+
--button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
|
233
234
|
--button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
|
234
235
|
--button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
|
235
236
|
--button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
|
236
|
-
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active
|
237
|
+
--button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-frozen-active);
|
237
238
|
--button-color-typical-secondary-bg-enabled: var(--modes-color-interactive-primary-default-alt3);
|
238
|
-
--button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-hover
|
239
|
-
--button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
|
240
|
-
--button-color-typical-secondary-border-
|
241
|
-
--button-color-typical-secondary-
|
239
|
+
--button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
|
240
|
+
--button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-frozen-active);
|
241
|
+
--button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-frozen-hover);
|
242
|
+
--button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
|
242
243
|
--button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
|
243
|
-
--button-color-typical-secondary-label-
|
244
|
+
--button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
|
244
245
|
--button-color-typical-secondary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
|
245
246
|
--button-color-typical-secondary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default-alt3);
|
246
247
|
--button-color-typical-secondary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
|
@@ -250,13 +251,12 @@
|
|
250
251
|
--button-color-typical-secondary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
|
251
252
|
--button-color-typical-secondary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
|
252
253
|
--button-color-typical-secondary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
|
253
|
-
--button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-active
|
254
|
-
--button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-hover
|
255
|
-
--button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-active);
|
256
|
-
--button-color-typical-tertiary-
|
257
|
-
--button-color-typical-tertiary-border-hover: var(--modes-color-interactive-primary-hover);
|
254
|
+
--button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-frozen-active);
|
255
|
+
--button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
|
256
|
+
--button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-frozen-active);
|
257
|
+
--button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
|
258
258
|
--button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
|
259
|
-
--button-color-typical-tertiary-label-
|
259
|
+
--button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
|
260
260
|
--button-color-typical-tertiary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
|
261
261
|
--button-color-typical-tertiary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
|
262
262
|
--button-color-typical-tertiary-inverse-border-active: var(--modes-color-interactive-primary-inverse-active);
|
@@ -265,17 +265,19 @@
|
|
265
265
|
--button-color-typical-tertiary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
|
266
266
|
--button-color-typical-tertiary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
|
267
267
|
--button-color-typical-tertiary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
|
268
|
+
--button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-frozen-active-alt);
|
269
|
+
--button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
|
268
270
|
--button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
|
269
|
-
--button-color-typical-subtle-label-
|
271
|
+
--button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
|
270
272
|
--button-color-typical-subtle-inverse-bg-hover: var(--modes-color-interactive-monochrome-inverse-hover-alt);
|
271
273
|
--button-color-typical-subtle-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
|
272
274
|
--button-color-typical-subtle-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
|
273
275
|
--button-color-typical-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
|
274
276
|
--button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
|
275
|
-
--button-color-typical-toggle-
|
276
|
-
--button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-with-active);
|
277
|
+
--button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
|
278
|
+
--button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
|
277
279
|
--button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
|
278
|
-
--button-color-typical-toggle-label-
|
280
|
+
--button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
|
279
281
|
--button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-with-default);
|
280
282
|
--button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-with-default);
|
281
283
|
--button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-default);
|
@@ -320,8 +322,6 @@
|
|
320
322
|
--button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
321
323
|
--button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
|
322
324
|
--button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
|
323
|
-
--button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
|
324
|
-
--button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-active-alt);
|
325
325
|
--button-color-typical-subtle-inverse-bg-active: var(--modes-color-interactive-monochrome-inverse-active-alt);
|
326
326
|
--button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
|
327
327
|
--button-color-typical-toggle-border-disabled: var(--modes-color-interactive-inactive-default);
|
@@ -24,7 +24,7 @@
|
|
24
24
|
--container-color-interactive-border-activated: var(--modes-color-status-positive-default);
|
25
25
|
--container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
|
26
26
|
--container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
|
27
|
-
--container-color-interactive-detailedicon-bg: var(--modes-color-custom-
|
27
|
+
--container-color-interactive-detailedicon-bg: var(--modes-color-custom-frozen);
|
28
28
|
--container-color-interactive-droptarget-bg-default: var(--modes-color-status-info-default); /* draggable drop target background color */
|
29
29
|
--container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
|
30
30
|
--container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
|
@@ -52,7 +52,7 @@
|
|
52
52
|
--container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
|
53
53
|
--container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
|
54
54
|
--container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
|
55
|
-
--container-color-blockquote-border: var(--modes-color-interactive-primary-default);
|
55
|
+
--container-color-blockquote-border: var(--modes-color-interactive-primary-frozen-default);
|
56
56
|
--container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
|
57
57
|
--container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* Used for accordion hover backgrounds */
|
58
58
|
--container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
|
@@ -151,15 +151,15 @@
|
|
151
151
|
--container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
|
152
152
|
--container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
|
153
153
|
--container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners) */
|
154
|
-
--container-radius-card-moderate: var(--global-radius-container-
|
155
|
-
--container-radius-card-curved: var(--global-radius-container-
|
156
|
-
--container-radius-card-sweeping: var(--global-radius-container-
|
157
|
-
--container-radius-tile-moderate: var(--global-radius-container-
|
158
|
-
--container-radius-tile-curved: var(--global-radius-container-
|
159
|
-
--container-radius-tile-sweeping: var(--global-radius-container-
|
160
|
-
--container-radius-tileselect-moderate: var(--global-radius-container-
|
161
|
-
--container-radius-tileselect-curved: var(--global-radius-container-
|
162
|
-
--container-radius-tileselect-sweeping: var(--global-radius-container-
|
154
|
+
--container-radius-card-moderate: var(--global-radius-container-m); /* Card (less rounded) */
|
155
|
+
--container-radius-card-curved: var(--global-radius-container-l); /* Card (more rounded) */
|
156
|
+
--container-radius-card-sweeping: var(--global-radius-container-xl); /* Card largest rounded type */
|
157
|
+
--container-radius-tile-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
|
158
|
+
--container-radius-tile-curved: var(--global-radius-container-l); /* Tile (more rounded) */
|
159
|
+
--container-radius-tile-sweeping: var(--global-radius-container-xl); /* Tile largest roundedness */
|
160
|
+
--container-radius-tileselect-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
|
161
|
+
--container-radius-tileselect-curved: var(--global-radius-container-l); /* Tile (more rounded) */
|
162
|
+
--container-radius-tileselect-sweeping: var(--global-radius-container-xl);
|
163
163
|
--container-space-none: var(--global-space-none);
|
164
164
|
--container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
|
165
165
|
--container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
|
@@ -9,12 +9,16 @@
|
|
9
9
|
--form-color-switch-border-active: transparent;
|
10
10
|
--form-color-switch-border-activedisabled: transparent;
|
11
11
|
--form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
|
12
|
-
--form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container), */
|
13
12
|
--form-radius-radio: var(--global-radius-circle); /* Radio button */
|
14
13
|
--form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
|
15
14
|
--form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
|
16
15
|
--form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
|
16
|
+
--form-color-calendar-bg-duration: var(--modes-color-interactive-inactive-frozen-default-alt);
|
17
17
|
--form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
|
18
|
+
--form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
|
19
|
+
--form-color-switch-bg-active: var(--modes-color-interactive-monochrome-frozen-default);
|
20
|
+
--form-color-switch-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
|
21
|
+
--form-color-switch-fg-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
|
18
22
|
--form-color-validation-border-error: var(--modes-color-status-negative-default);
|
19
23
|
--form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
|
20
24
|
--form-color-validation-bar-warning: var(--modes-color-status-caution-default); /* warning bar to left of inputs */
|
@@ -24,18 +28,19 @@
|
|
24
28
|
--form-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
|
25
29
|
--form-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
|
26
30
|
--form-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
|
31
|
+
--form-typography-adaptive-default-xs: var(--global-typography-adaptive-component-moderate-xs);
|
27
32
|
--form-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
|
28
33
|
--form-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
|
29
34
|
--form-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
|
30
35
|
--form-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
|
31
36
|
--form-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
|
32
37
|
--form-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
|
38
|
+
--form-typography-responsive-default-xs: var(--global-typography-responsive-component-moderate-xs);
|
33
39
|
--form-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
|
34
40
|
--form-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
|
35
41
|
--form-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
|
36
|
-
--form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-active);
|
42
|
+
--form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
|
37
43
|
--form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
|
38
|
-
--form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-active);
|
39
44
|
--form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-with-hover);
|
40
45
|
--form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
41
46
|
--form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
|
@@ -45,7 +50,6 @@
|
|
45
50
|
--form-color-typical-icon-hover: var(--modes-color-interactive-data-entry-with-hover);
|
46
51
|
--form-color-typical-text-hover: var(--modes-color-interactive-data-entry-with-hover); /* text hover state when dragging a file over file input */
|
47
52
|
--form-color-typical-text-read-only: var(--modes-color-generic-content-harsh);
|
48
|
-
--form-color-switch-bg-active: var(--modes-color-interactive-monochrome-active);
|
49
53
|
--form-color-switch-bg-enabled: var(--modes-color-interactive-data-entry-default); /* for switch */
|
50
54
|
--form-space-none: var(--global-space-none);
|
51
55
|
--form-space-calendar-x-m: var(--global-space-macro-m);
|
@@ -218,18 +222,18 @@
|
|
218
222
|
--form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
|
219
223
|
--form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
|
220
224
|
--form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
|
221
|
-
--form-color-calendar-
|
225
|
+
--form-color-calendar-border-duration: var(--form-color-calendar-bg-active);
|
222
226
|
--form-color-calendar-text-active: var(--modes-color-interactive-monochrome-with-active);
|
223
227
|
--form-color-calendar-text-alt: var(--modes-color-interactive-data-entry-content-alt); /* Days of the week subheaders */
|
224
228
|
--form-color-calendar-text-disabled: var(--modes-color-interactive-inactive-content);
|
225
229
|
--form-color-calendar-text-duration: var(--modes-color-interactive-data-entry-content);
|
226
230
|
--form-color-calendar-text-enabled: var(--modes-color-interactive-data-entry-content);
|
227
231
|
--form-color-calendar-text-alt-enabled: var(--modes-color-interactive-data-entry-content-alt);
|
228
|
-
--form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
|
229
232
|
--form-color-dropdown-label-active: var(--modes-color-interactive-monochrome-with-active);
|
230
233
|
--form-color-dropdown-label-alt: var(--modes-color-interactive-monochrome-default);
|
231
234
|
--form-color-dropdown-label-disabled: var(--modes-color-interactive-inactive-content);
|
232
235
|
--form-color-dropdown-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
|
236
|
+
--form-color-dropdown-label-subtext: var(--modes-color-interactive-monochrome-default-alt2); /* Option subtext. */
|
233
237
|
--form-color-labelset-label-default: var(--modes-color-interactive-data-entry-content);
|
234
238
|
--form-color-labelset-label-alt: var(--modes-color-interactive-data-entry-content-alt); /* used for '(optional)' text and hint text. */
|
235
239
|
--form-color-labelset-label-disabled: var(--modes-color-interactive-inactive-content);
|
@@ -249,19 +253,18 @@
|
|
249
253
|
--form-color-typical-text-disabled: var(--modes-color-interactive-inactive-content);
|
250
254
|
--form-color-typical-text-enabled: var(--modes-color-interactive-data-entry-content); /* Dropdown text (subtle dropdown). */
|
251
255
|
--form-color-switch-bg-disabled: var(--modes-color-interactive-inactive-default-alt); /* for switch */
|
252
|
-
--form-color-switch-border-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
|
253
256
|
--form-color-switch-fg-active: var(--modes-color-interactive-monochrome-with-active);
|
254
257
|
--form-color-switch-fg-activedisabled: var(--modes-color-interactive-inactive-content-alt);
|
255
|
-
--form-color-switch-fg-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
|
256
258
|
--form-color-switch-label-active: var(--modes-color-interactive-data-entry-content);
|
257
259
|
--form-color-switch-label-enabled: var(--modes-color-interactive-data-entry-content-alt);
|
258
260
|
--form-color-switch-icon-enabled: var(--modes-color-interactive-data-entry-content-alt);
|
259
|
-
--form-radius-checkbox: var(--global-radius-interactive-
|
261
|
+
--form-radius-checkbox: var(--global-radius-interactive-xs); /* S and M checkbox */
|
260
262
|
--form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
|
261
|
-
--form-radius-
|
262
|
-
--form-radius-
|
263
|
-
--form-radius-
|
264
|
-
--form-radius-
|
263
|
+
--form-radius-colorpicker: var(--global-radius-interactive-l); /* Color picker (swatch container) */
|
264
|
+
--form-radius-fileupload: var(--global-radius-interactive-s); /* File input (file uploads) */
|
265
|
+
--form-radius-fileselector: var(--global-radius-interactive-s); /* File preview (file selector asset) */
|
266
|
+
--form-radius-input: var(--global-radius-interactive-s); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
|
267
|
+
--form-radius-validationbar: var(--global-radius-interactive-xxs); /* Validation bar */
|
265
268
|
--form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
|
266
269
|
--form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
|
267
270
|
--form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
|
@@ -293,8 +296,8 @@
|
|
293
296
|
--form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
|
294
297
|
--form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
|
295
298
|
--form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
|
299
|
+
--form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
|
296
300
|
--form-color-typical-border-alt: var(--modes-color-interactive-inactive-default);
|
297
|
-
--form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-with-default);
|
298
301
|
--form-color-typical-border-disabled: var(--modes-color-interactive-inactive-default);
|
299
302
|
--form-color-typical-border-read-only: var(--modes-color-interactive-inactive-default);
|
300
303
|
--form-color-switch-bg-activedisabled: var(--modes-color-interactive-inactive-default);
|
@@ -22,7 +22,7 @@
|
|
22
22
|
--link-boxshadow-skiplink: var(--global-boxshadow-container-near);
|
23
23
|
--link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
|
24
24
|
--link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
|
25
|
-
--link-color-typical-label-default: var(--modes-color-interactive-primary-default-
|
25
|
+
--link-color-typical-label-default: var(--modes-color-interactive-primary-frozen-default-alt);
|
26
26
|
--link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt2);
|
27
27
|
--link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
|
28
28
|
--link-color-subtle-inverse-label-default: var(--modes-color-interactive-monochrome-inverse-default);
|
@@ -34,6 +34,6 @@
|
|
34
34
|
--link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
|
35
35
|
--link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
|
36
36
|
--link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
|
37
|
-
--link-color-typical-label-hover: var(--modes-color-interactive-primary-hover-
|
37
|
+
--link-color-typical-label-hover: var(--modes-color-interactive-primary-frozen-hover-alt);
|
38
38
|
--link-color-typical-inverse-label-hover: var(--modes-color-interactive-primary-inverse-hover-alt2);
|
39
39
|
}
|
@@ -8,6 +8,7 @@
|
|
8
8
|
--nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
|
9
9
|
--nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
|
10
10
|
--nav-color-item-bg-enabled: var(--modes-color-none);
|
11
|
+
--nav-color-item-bg-hover: var(--modes-color-interactive-primary-frozen-nav-hover);
|
11
12
|
--nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of horizontal nav variant that launches the left nav */
|
12
13
|
--nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
|
13
14
|
--nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
|
@@ -34,9 +35,7 @@
|
|
34
35
|
--nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
|
35
36
|
--nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
|
36
37
|
--nav-color-item-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt);
|
37
|
-
--nav-color-item-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
|
38
38
|
--nav-color-item-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
|
39
|
-
--nav-color-item-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
40
39
|
--nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
|
41
40
|
--nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
|
42
41
|
--nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
|
@@ -63,7 +62,7 @@
|
|
63
62
|
--nav-color-topnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
|
64
63
|
--nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
|
65
64
|
--nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape), */
|
66
|
-
--nav-radius-menumodal: var(--global-radius-interactive-
|
65
|
+
--nav-radius-menumodal: var(--global-radius-interactive-m); /* Menu on mobile */
|
67
66
|
--nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
68
67
|
--nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
69
68
|
--nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
@@ -156,4 +155,5 @@
|
|
156
155
|
--nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
|
157
156
|
--nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
|
158
157
|
--nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
|
158
|
+
--nav-color-item-label-hover: var(--modes-color-interactive-primary-frozen-nav-label-hover);
|
159
159
|
}
|
@@ -18,11 +18,7 @@
|
|
18
18
|
--popover-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
|
19
19
|
--popover-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
|
20
20
|
--popover-boxshadow-container: var(--global-boxshadow-container-near); /* REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) */
|
21
|
-
--popover-color-bg-active: var(--modes-color-interactive-monochrome-active);
|
22
|
-
--popover-color-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM. */
|
23
|
-
--popover-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM. */
|
24
|
-
--popover-color-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
|
25
|
-
--popover-color-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
21
|
+
--popover-color-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
|
26
22
|
--popover-color-submenu-bg-default: var(--modes-color-generic-bg-faint); /* popover small screen submenu container bg */
|
27
23
|
--popover-size-icon-m: var(--global-size-icon-m);
|
28
24
|
--popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
|
@@ -51,9 +47,13 @@
|
|
51
47
|
--popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
52
48
|
--popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
53
49
|
--popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
50
|
+
--popover-color-bg-activealt: var(--modes-color-interactive-monochrome-frozen-hover-alt);
|
51
|
+
--popover-color-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
|
54
52
|
--popover-color-label-active: var(--modes-color-interactive-monochrome-with-active);
|
53
|
+
--popover-color-label-activealt: var(--modes-color-interactive-monochrome-frozen-with-hover);
|
55
54
|
--popover-color-label-disabled: var(--modes-color-interactive-inactive-content);
|
56
|
-
--popover-color-label-
|
55
|
+
--popover-color-label-hover: var(--modes-color-interactive-monochrome-default);
|
56
|
+
--popover-color-label-enabled: var(--modes-color-interactive-monochrome-default);
|
57
57
|
--popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
|
58
58
|
--popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
|
59
59
|
--popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */
|
@@ -20,12 +20,14 @@
|
|
20
20
|
--progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
|
21
21
|
--progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
|
22
22
|
--progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
|
23
|
+
--progress-color-bg-default: var(--modes-color-interactive-progress-frozen-bg-alt);
|
23
24
|
--progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
|
24
25
|
--progress-color-fg-alt: var(--modes-color-status-positive-default);
|
25
26
|
--progress-color-fg-caution: var(--modes-color-status-caution-default);
|
26
27
|
--progress-color-fg-error: var(--modes-color-status-negative-default);
|
27
28
|
--progress-color-fg-info: var(--modes-color-status-info-default);
|
28
29
|
--progress-color-datavis-fg-default: var(--modes-color-status-custom-teal-default);
|
30
|
+
--progress-color-loader-bg-default: var(--modes-color-interactive-progress-frozen-bg);
|
29
31
|
--progress-color-loader-fg-error: var(--modes-color-status-negative-default);
|
30
32
|
--progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
|
31
33
|
--progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
|
@@ -43,13 +45,12 @@
|
|
43
45
|
--progress-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
|
44
46
|
--progress-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
|
45
47
|
--progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
|
46
|
-
--progress-color-
|
48
|
+
--progress-color-border-default: var(--modes-color-generic-fg-frozen-soft);
|
47
49
|
--progress-color-fg-alt2: var(--modes-color-generic-content-firm);
|
48
|
-
--progress-color-fg-default: var(--modes-color-
|
50
|
+
--progress-color-fg-default: var(--modes-color-generic-fg-frozen-soft);
|
49
51
|
--progress-color-label-alt: var(--modes-color-generic-content-firm);
|
50
52
|
--progress-color-label-default: var(--modes-color-generic-content-harsh);
|
51
|
-
--progress-color-loader-
|
52
|
-
--progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-active); /* used for loader standard loader spinner */
|
53
|
+
--progress-color-loader-fg-default: var(--modes-color-interactive-primary-frozen-default); /* used for loader standard loader spinner */
|
53
54
|
--progress-color-loader-inverse-bg-default: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
|
54
55
|
--progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-active);
|
55
56
|
--progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
|
@@ -76,7 +77,6 @@
|
|
76
77
|
--progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
|
77
78
|
--progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
|
78
79
|
--progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
|
79
|
-
--progress-color-border-default: var(--modes-color-generic-fg-soft);
|
80
80
|
--progress-color-loader-inverse-fg-default: var(--modes-color-interactive-monochrome-with-active); /* used on inverse loading spinner */
|
81
81
|
--progress-color-stepflow-border-default: var(--modes-color-generic-fg-soft);
|
82
82
|
--progress-color-stepindicator-border-default: var(--modes-color-generic-fg-soft);
|
@@ -3,34 +3,29 @@
|
|
3
3
|
*/
|
4
4
|
|
5
5
|
:root {
|
6
|
+
--status-color-message-global-info-bg-default: var(--modes-color-status-info-frozenglobal-default); /* Global message bg */
|
7
|
+
--status-color-message-global-warning-bg-default: var(--modes-color-status-caution-frozenglobal-default); /* Global message bg */
|
6
8
|
--status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
|
7
9
|
--status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
|
8
10
|
--status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
|
9
11
|
--status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
|
10
12
|
--status-color-message-contextual-icon-alt: var(--modes-color-status-neutral-default); /* icon on neutral status dialogs */
|
11
|
-
--status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
|
12
13
|
--status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
|
13
14
|
--status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
|
14
|
-
--status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
|
15
15
|
--status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
|
16
16
|
--status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
|
17
17
|
--status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
|
18
|
-
--status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
|
19
18
|
--status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
|
20
19
|
--status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
|
21
20
|
--status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
|
22
|
-
--status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
|
23
21
|
--status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
|
24
22
|
--status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
|
25
23
|
--status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
|
26
|
-
--status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
|
27
24
|
--status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
|
28
25
|
--status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
|
29
26
|
--status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
|
30
|
-
--status-color-message-global-info-bg-
|
31
|
-
--status-color-message-global-
|
32
|
-
--status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
|
33
|
-
--status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
|
27
|
+
--status-color-message-global-info-bg-hover: var(--modes-color-status-info-frozenglobal-hover); /* Global message bg */
|
28
|
+
--status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-frozenglobal-hover); /* Global message bg */
|
34
29
|
--status-color-pill-custom-blue-bg-default: var(--modes-color-status-custom-blue-default);
|
35
30
|
--status-color-pill-custom-blue-bg-alt-default: var(--modes-color-status-custom-blue-default-alt); /* outline pill bg */
|
36
31
|
--status-color-pill-custom-blue-border-default: var(--modes-color-status-custom-blue-default);
|
@@ -62,7 +57,6 @@
|
|
62
57
|
--status-color-pill-custom-slate-bg-alt-default: var(--modes-color-status-custom-slate-default-alt); /* outline pill bg */
|
63
58
|
--status-color-pill-custom-slate-border-default: var(--modes-color-status-custom-slate-default);
|
64
59
|
--status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
|
65
|
-
--status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
|
66
60
|
--status-color-pill-error-border-default: var(--modes-color-status-negative-default);
|
67
61
|
--status-color-pill-error-inverse-bg-default: var(--modes-color-status-negative-inverse-default);
|
68
62
|
--status-color-pill-error-inverse-bg-alt-default: var(--modes-color-status-negative-inverse-default-alt); /* outline pill bg */
|
@@ -74,25 +68,22 @@
|
|
74
68
|
--status-color-pill-important-inverse-bg-alt-default: var(--modes-color-status-important-inverse-default-alt); /* outline pill bg */
|
75
69
|
--status-color-pill-important-inverse-border-default: var(--modes-color-status-important-inverse-default);
|
76
70
|
--status-color-pill-info-bg-default: var(--modes-color-status-info-default);
|
77
|
-
--status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
|
78
71
|
--status-color-pill-info-border-default: var(--modes-color-status-info-default);
|
79
72
|
--status-color-pill-info-inverse-bg-default: var(--modes-color-status-info-inverse-default);
|
80
73
|
--status-color-pill-info-inverse-bg-alt-default: var(--modes-color-status-info-inverse-default-alt); /* outline pill bg */
|
81
74
|
--status-color-pill-info-inverse-border-default: var(--modes-color-status-info-inverse-default);
|
82
|
-
--status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
|
83
|
-
--status-color-pill-neutral-bg-
|
84
|
-
--status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
|
75
|
+
--status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-frozen-default);
|
76
|
+
--status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-frozen-hover);
|
77
|
+
--status-color-pill-neutral-border-default: var(--modes-color-status-neutral-frozen-default);
|
85
78
|
--status-color-pill-neutral-inverse-bg-default: var(--modes-color-status-neutral-inverse-default);
|
86
79
|
--status-color-pill-neutral-inverse-bg-alt-default: var(--modes-color-status-neutral-inverse-default-alt); /* outline pill bg */
|
87
80
|
--status-color-pill-neutral-inverse-border-default: var(--modes-color-status-neutral-inverse-default);
|
88
81
|
--status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
|
89
|
-
--status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
|
90
82
|
--status-color-pill-success-border-default: var(--modes-color-status-positive-default);
|
91
83
|
--status-color-pill-success-inverse-bg-default: var(--modes-color-status-positive-inverse-default);
|
92
84
|
--status-color-pill-success-inverse-bg-alt-default: var(--modes-color-status-positive-inverse-default-alt); /* outline pill bg */
|
93
85
|
--status-color-pill-success-inverse-border-default: var(--modes-color-status-positive-inverse-default);
|
94
86
|
--status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
|
95
|
-
--status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
|
96
87
|
--status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
|
97
88
|
--status-color-pill-warning-inverse-bg-default: var(--modes-color-status-caution-inverse-default);
|
98
89
|
--status-color-pill-warning-inverse-bg-alt-default: var(--modes-color-status-caution-inverse-default-alt); /* Global message bg */
|
@@ -117,11 +108,14 @@
|
|
117
108
|
--status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
|
118
109
|
--status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
|
119
110
|
--status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
|
111
|
+
--status-color-message-contextual-ai-bg-alt: var(--status-color-none); /* Subtle message bg */
|
120
112
|
--status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
|
113
|
+
--status-color-message-contextual-error-bg-alt: var(--status-color-none); /* Subtle message bg */
|
114
|
+
--status-color-message-contextual-info-bg-alt: var(--status-color-none); /* Subtle message bg */
|
115
|
+
--status-color-message-contextual-success-bg-alt: var(--status-color-none); /* Subtle message bg */
|
116
|
+
--status-color-message-contextual-warning-bg-alt: var(--status-color-none); /* Subtle message bg */
|
121
117
|
--status-color-message-global-label-hover: var(--modes-color-interactive-monochrome-with-hover);
|
122
118
|
--status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
|
123
|
-
--status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
|
124
|
-
--status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
|
125
119
|
--status-color-pill-custom-blue-bg-alt-hover: var(--modes-color-status-custom-blue-hover-alt);
|
126
120
|
--status-color-pill-custom-blue-bg-hover: var(--modes-color-status-custom-blue-hover);
|
127
121
|
--status-color-pill-custom-teal-bg-alt-hover: var(--modes-color-status-custom-teal-hover-alt);
|
@@ -142,6 +136,7 @@
|
|
142
136
|
--status-color-pill-custom-gray-bg-hover: var(--modes-color-status-custom-gray-hover);
|
143
137
|
--status-color-pill-custom-slate-bg-alt-hover: var(--modes-color-status-custom-slate-hover-alt);
|
144
138
|
--status-color-pill-custom-slate-bg-hover: var(--modes-color-status-custom-slate-hover);
|
139
|
+
--status-color-pill-error-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
145
140
|
--status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
|
146
141
|
--status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
|
147
142
|
--status-color-pill-error-inverse-bg-alt-hover: var(--modes-color-status-negative-inverse-hover-alt);
|
@@ -152,30 +147,35 @@
|
|
152
147
|
--status-color-pill-important-bg-hover: var(--modes-color-status-important-hover);
|
153
148
|
--status-color-pill-important-inverse-bg-alt-hover: var(--modes-color-status-important-inverse-hover-alt);
|
154
149
|
--status-color-pill-important-inverse-bg-hover: var(--modes-color-status-important-inverse-hover);
|
150
|
+
--status-color-pill-info-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
155
151
|
--status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
|
156
152
|
--status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
|
157
153
|
--status-color-pill-info-inverse-bg-alt-hover: var(--modes-color-status-info-inverse-hover-alt);
|
158
154
|
--status-color-pill-info-inverse-bg-hover: var(--modes-color-status-info-inverse-hover);
|
159
|
-
--status-color-pill-neutral-bg-alt-
|
160
|
-
--status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
|
155
|
+
--status-color-pill-neutral-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
156
|
+
--status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-frozen-hover-alt);
|
161
157
|
--status-color-pill-neutral-inverse-bg-alt-hover: var(--modes-color-status-neutral-inverse-hover-alt);
|
162
158
|
--status-color-pill-neutral-inverse-bg-hover: var(--modes-color-status-neutral-inverse-hover);
|
163
159
|
--status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
|
160
|
+
--status-color-pill-success-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
164
161
|
--status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
|
165
162
|
--status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
|
166
163
|
--status-color-pill-success-inverse-bg-alt-hover: var(--modes-color-status-positive-inverse-hover-alt);
|
167
164
|
--status-color-pill-success-inverse-bg-hover: var(--modes-color-status-positive-inverse-hover);
|
165
|
+
--status-color-pill-warning-bg-alt-default: var(--status-color-none); /* Global message bg */
|
168
166
|
--status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
|
169
167
|
--status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
|
170
168
|
--status-color-pill-warning-inverse-bg-alt-hover: var(--modes-color-status-caution-inverse-hover-alt);
|
171
169
|
--status-color-pill-warning-inverse-bg-hover: var(--modes-color-status-caution-inverse-hover);
|
172
|
-
--status-color-rating-bg-default: var(--modes-color-status-reviews-default);
|
173
|
-
--status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
|
174
|
-
--status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
|
175
|
-
--status-color-rating-border-default: var(--modes-color-status-reviews-default);
|
170
|
+
--status-color-rating-bg-default: var(--modes-color-status-reviews-frozen-default);
|
171
|
+
--status-color-rating-bg-default-alt: var(--modes-color-status-reviews-frozen-default-alt);
|
172
|
+
--status-color-rating-bg-hover: var(--modes-color-status-reviews-frozen-hover);
|
173
|
+
--status-color-rating-border-default: var(--modes-color-status-reviews-frozen-default);
|
176
174
|
--status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
|
177
175
|
--status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
|
178
176
|
--status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
|
177
|
+
--status-color-message-global-info-icon: var(--modes-color-status-content-with-default-alt);
|
178
|
+
--status-color-message-global-warning-icon: var(--modes-color-status-content-with-default-alt);
|
179
179
|
--status-color-pill-generic-label-default: var(--modes-color-status-content-with-default);
|
180
180
|
--status-color-pill-generic-label-hover: var(--modes-color-status-content-with-hover);
|
181
181
|
--status-color-pill-generic-label-alt-default: var(--modes-color-status-content-with-default-alt);
|
@@ -190,7 +190,7 @@
|
|
190
190
|
--status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
|
191
191
|
--status-size-icon-m: var(--global-size-icon-m);
|
192
192
|
--status-radius-message: var(--global-radius-container-m); /* Message */
|
193
|
-
--status-radius-pill: var(--global-radius-container-
|
193
|
+
--status-radius-pill: var(--global-radius-container-xs); /* Pill (outer corners) */
|
194
194
|
--status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
|
195
195
|
--status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
|
196
196
|
--status-space-none: var(--global-space-none);
|