@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
|
@@ -265,7 +265,8 @@
|
|
|
265
265
|
--modes-color-interactive-monochrome-active-alt-light: #00000026;
|
|
266
266
|
--modes-color-interactive-monochrome-default-light: #000000e6;
|
|
267
267
|
--modes-color-interactive-monochrome-default-alt-light: #000000ab; /* subtle and toggle button text */
|
|
268
|
-
--modes-color-interactive-monochrome-default-alt2-light: #
|
|
268
|
+
--modes-color-interactive-monochrome-default-alt2-light: #0000008c; /* Dropdown option subtext. */
|
|
269
|
+
--modes-color-interactive-monochrome-default-alt3-light: #0000006b; /* Tertiary border color */
|
|
269
270
|
--modes-color-interactive-monochrome-hover-alt-light: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
|
|
270
271
|
--modes-color-interactive-monochrome-hover-light: #00000026; /* subtle table header hover */
|
|
271
272
|
--modes-color-interactive-monochrome-with-active-light: #FFFFFF;
|
|
@@ -574,7 +575,8 @@
|
|
|
574
575
|
--modes-color-interactive-monochrome-active-alt-dark: #ffffff26;
|
|
575
576
|
--modes-color-interactive-monochrome-default-dark: #ffffffe6;
|
|
576
577
|
--modes-color-interactive-monochrome-default-alt-dark: #ffffffab; /* subtle and toggle button text */
|
|
577
|
-
--modes-color-interactive-monochrome-default-alt2-dark: #
|
|
578
|
+
--modes-color-interactive-monochrome-default-alt2-dark: #ffffff8c; /* Dropdown option subtext. */
|
|
579
|
+
--modes-color-interactive-monochrome-default-alt3-dark: #ffffff6b; /* Tertiary border color */
|
|
578
580
|
--modes-color-interactive-monochrome-hover-alt-dark: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
|
|
579
581
|
--modes-color-interactive-monochrome-hover-dark: #ffffff26; /* subtle table header hover */
|
|
580
582
|
--modes-color-interactive-monochrome-with-active-dark: #000000;
|
|
@@ -774,9 +776,10 @@
|
|
|
774
776
|
--modes-color-modifier-contrast-more-dark: #FFFFFF;
|
|
775
777
|
|
|
776
778
|
/* badge component tokens */
|
|
779
|
+
--badge-color-notification-bg-default: light-dark(var(--modes-color-status-caution-frozenglobal-default-light), var(--modes-color-status-caution-frozenglobal-default-dark));
|
|
777
780
|
--badge-radius-badge: var(--global-radius-circle); /* Badge */
|
|
778
|
-
--badge-color-notification-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Used in global nav notification badges */
|
|
779
781
|
--badge-color-notification-bg-alt: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
782
|
+
--badge-color-notification-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
|
|
780
783
|
--badge-color-notification-inverse-border-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
|
|
781
784
|
--badge-color-notification-inverse-bg-default: light-dark(var(--modes-color-status-negative-inverse-default-light), var(--modes-color-status-negative-inverse-default-dark)); /* Used in global nav notification badges */
|
|
782
785
|
--badge-color-notification-inverse-bg-alt: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
|
|
@@ -784,8 +787,7 @@
|
|
|
784
787
|
--badge-color-notification-inverse-label-alt: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
|
|
785
788
|
--badge-typography-m: var(--global-typography-component-notification-m);
|
|
786
789
|
--badge-color-notification-border-default: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark));
|
|
787
|
-
--badge-color-notification-label-
|
|
788
|
-
--badge-color-notification-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark));
|
|
790
|
+
--badge-color-notification-label-alt: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
|
|
789
791
|
--badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
|
|
790
792
|
--badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
|
|
791
793
|
--badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */
|
|
@@ -829,9 +831,15 @@
|
|
|
829
831
|
--button-color-typical-primary-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-with-default-light), var(--modes-color-interactive-primary-inverse-with-default-dark));
|
|
830
832
|
--button-color-typical-secondary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
|
|
831
833
|
--button-color-typical-secondary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
|
|
834
|
+
--button-color-typical-tertiary-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
835
|
+
--button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
836
|
+
--button-color-typical-tertiary-border-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
837
|
+
--button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
832
838
|
--button-color-typical-tertiary-inverse-border-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-default-light), var(--modes-color-interactive-inactive-inverse-default-dark));
|
|
833
839
|
--button-color-typical-tertiary-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
|
|
840
|
+
--button-color-typical-subtle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-frozen-default-light), var(--modes-color-interactive-monochrome-frozen-default-dark));
|
|
834
841
|
--button-color-typical-subtle-inverse-label-disabled: light-dark(var(--modes-color-interactive-inactive-inverse-content-light), var(--modes-color-interactive-inactive-inverse-content-dark));
|
|
842
|
+
--button-color-typical-toggle-border-enabled: light-dark(var(--modes-color-interactive-data-entry-frozen-with-default-light), var(--modes-color-interactive-data-entry-frozen-with-default-dark));
|
|
835
843
|
--button-typography-primary-s: var(--global-typography-component-firm-s);
|
|
836
844
|
--button-typography-primary-m: var(--global-typography-component-firm-m);
|
|
837
845
|
--button-typography-primary-l: var(--global-typography-component-firm-l);
|
|
@@ -853,20 +861,15 @@
|
|
|
853
861
|
--button-color-destructive-secondary-bg-hover: light-dark(var(--modes-color-interactive-danger-hover-alt-light), var(--modes-color-interactive-danger-hover-alt-dark));
|
|
854
862
|
--button-color-destructive-secondary-border-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
|
855
863
|
--button-color-destructive-secondary-label-hover: light-dark(var(--modes-color-interactive-danger-hover-light), var(--modes-color-interactive-danger-hover-dark));
|
|
856
|
-
--button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
|
|
864
|
+
--button-color-typical-primary-bg-enabled: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
857
865
|
--button-color-typical-primary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-light), var(--modes-color-interactive-primary-inverse-default-dark));
|
|
858
|
-
--button-color-typical-secondary-
|
|
859
|
-
--button-color-typical-secondary-label-
|
|
860
|
-
--button-color-typical-tertiary-
|
|
861
|
-
--button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
|
|
862
|
-
--button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
866
|
+
--button-color-typical-secondary-border-enabled: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
867
|
+
--button-color-typical-secondary-label-enabled: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
868
|
+
--button-color-typical-tertiary-label-enabled: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
863
869
|
--button-color-typical-tertiary-inverse-bg-enabled: var(--button-color-none);
|
|
864
|
-
--button-color-typical-subtle-
|
|
865
|
-
--button-color-typical-
|
|
866
|
-
--button-color-typical-
|
|
867
|
-
--button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
868
|
-
--button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
|
|
869
|
-
--button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
870
|
+
--button-color-typical-subtle-label-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-light), var(--modes-color-interactive-monochrome-frozen-active-dark));
|
|
871
|
+
--button-color-typical-toggle-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-light), var(--modes-color-interactive-monochrome-frozen-active-dark));
|
|
872
|
+
--button-color-typical-toggle-label-enabled: light-dark(var(--modes-color-interactive-monochrome-frozen-default-alt-light), var(--modes-color-interactive-monochrome-frozen-default-alt-dark));
|
|
870
873
|
--button-color-video-bg-blur: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
|
|
871
874
|
--button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
|
|
872
875
|
--button-size-xs: var(--global-size-macro-xs); /* min-height on XS Buttons */
|
|
@@ -1008,19 +1011,19 @@
|
|
|
1008
1011
|
--button-color-ai-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
1009
1012
|
--button-color-destructive-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
1010
1013
|
--button-color-destructive-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1011
|
-
--button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
|
|
1012
|
-
--button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
|
|
1014
|
+
--button-color-typical-primary-bg-active: light-dark(var(--modes-color-interactive-primary-frozen-active-light), var(--modes-color-interactive-primary-frozen-active-dark));
|
|
1015
|
+
--button-color-typical-primary-bg-hover: light-dark(var(--modes-color-interactive-primary-frozen-hover-light), var(--modes-color-interactive-primary-frozen-hover-dark));
|
|
1013
1016
|
--button-color-typical-primary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
1014
1017
|
--button-color-typical-primary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
|
|
1015
1018
|
--button-color-typical-primary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-light), var(--modes-color-interactive-primary-inverse-hover-dark));
|
|
1016
|
-
--button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-active-
|
|
1019
|
+
--button-color-typical-secondary-bg-active: light-dark(var(--modes-color-interactive-primary-frozen-active-light), var(--modes-color-interactive-primary-frozen-active-dark));
|
|
1017
1020
|
--button-color-typical-secondary-bg-enabled: light-dark(var(--modes-color-interactive-primary-default-alt3-light), var(--modes-color-interactive-primary-default-alt3-dark));
|
|
1018
|
-
--button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-
|
|
1019
|
-
--button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
|
|
1020
|
-
--button-color-typical-secondary-border-
|
|
1021
|
-
--button-color-typical-secondary-
|
|
1021
|
+
--button-color-typical-secondary-bg-hover: light-dark(var(--modes-color-interactive-primary-frozen-hover-light), var(--modes-color-interactive-primary-frozen-hover-dark));
|
|
1022
|
+
--button-color-typical-secondary-border-active: light-dark(var(--modes-color-interactive-primary-frozen-active-light), var(--modes-color-interactive-primary-frozen-active-dark));
|
|
1023
|
+
--button-color-typical-secondary-border-hover: light-dark(var(--modes-color-interactive-primary-frozen-hover-light), var(--modes-color-interactive-primary-frozen-hover-dark));
|
|
1024
|
+
--button-color-typical-secondary-label-active: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
|
|
1022
1025
|
--button-color-typical-secondary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1023
|
-
--button-color-typical-secondary-label-
|
|
1026
|
+
--button-color-typical-secondary-label-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-with-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-with-hover-alt-dark));
|
|
1024
1027
|
--button-color-typical-secondary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-alt-light), var(--modes-color-interactive-primary-inverse-active-alt-dark));
|
|
1025
1028
|
--button-color-typical-secondary-inverse-bg-enabled: light-dark(var(--modes-color-interactive-primary-inverse-default-alt3-light), var(--modes-color-interactive-primary-inverse-default-alt3-dark));
|
|
1026
1029
|
--button-color-typical-secondary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt-light), var(--modes-color-interactive-primary-inverse-hover-alt-dark));
|
|
@@ -1030,13 +1033,12 @@
|
|
|
1030
1033
|
--button-color-typical-secondary-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
|
|
1031
1034
|
--button-color-typical-secondary-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
|
|
1032
1035
|
--button-color-typical-secondary-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
|
|
1033
|
-
--button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-primary-active-
|
|
1034
|
-
--button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-primary-hover-
|
|
1035
|
-
--button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-primary-active-light), var(--modes-color-interactive-primary-active-dark));
|
|
1036
|
-
--button-color-typical-tertiary-
|
|
1037
|
-
--button-color-typical-tertiary-border-hover: light-dark(var(--modes-color-interactive-primary-hover-light), var(--modes-color-interactive-primary-hover-dark));
|
|
1036
|
+
--button-color-typical-tertiary-bg-active: light-dark(var(--modes-color-interactive-primary-frozen-active-light), var(--modes-color-interactive-primary-frozen-active-dark));
|
|
1037
|
+
--button-color-typical-tertiary-bg-hover: light-dark(var(--modes-color-interactive-primary-frozen-hover-light), var(--modes-color-interactive-primary-frozen-hover-dark));
|
|
1038
|
+
--button-color-typical-tertiary-border-active: light-dark(var(--modes-color-interactive-primary-frozen-active-light), var(--modes-color-interactive-primary-frozen-active-dark));
|
|
1039
|
+
--button-color-typical-tertiary-label-active: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
|
|
1038
1040
|
--button-color-typical-tertiary-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1039
|
-
--button-color-typical-tertiary-label-
|
|
1041
|
+
--button-color-typical-tertiary-label-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-with-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-with-hover-alt-dark));
|
|
1040
1042
|
--button-color-typical-tertiary-inverse-bg-active: light-dark(var(--modes-color-interactive-primary-inverse-active-alt-light), var(--modes-color-interactive-primary-inverse-active-alt-dark));
|
|
1041
1043
|
--button-color-typical-tertiary-inverse-bg-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt-light), var(--modes-color-interactive-primary-inverse-hover-alt-dark));
|
|
1042
1044
|
--button-color-typical-tertiary-inverse-border-active: light-dark(var(--modes-color-interactive-primary-inverse-active-light), var(--modes-color-interactive-primary-inverse-active-dark));
|
|
@@ -1045,17 +1047,19 @@
|
|
|
1045
1047
|
--button-color-typical-tertiary-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
|
|
1046
1048
|
--button-color-typical-tertiary-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
|
|
1047
1049
|
--button-color-typical-tertiary-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
|
|
1050
|
+
--button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-alt-light), var(--modes-color-interactive-monochrome-frozen-active-alt-dark));
|
|
1051
|
+
--button-color-typical-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
1048
1052
|
--button-color-typical-subtle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1049
|
-
--button-color-typical-subtle-label-
|
|
1053
|
+
--button-color-typical-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-with-hover-light), var(--modes-color-interactive-monochrome-frozen-with-hover-dark));
|
|
1050
1054
|
--button-color-typical-subtle-inverse-bg-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-hover-alt-light), var(--modes-color-interactive-monochrome-inverse-hover-alt-dark));
|
|
1051
1055
|
--button-color-typical-subtle-inverse-label-active: light-dark(var(--modes-color-interactive-monochrome-inverse-with-active-alt-light), var(--modes-color-interactive-monochrome-inverse-with-active-alt-dark));
|
|
1052
1056
|
--button-color-typical-subtle-inverse-label-enabled: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
|
|
1053
1057
|
--button-color-typical-subtle-inverse-label-hover: light-dark(var(--modes-color-interactive-monochrome-inverse-with-hover-light), var(--modes-color-interactive-monochrome-inverse-with-hover-dark));
|
|
1054
1058
|
--button-color-typical-toggle-label-active-disabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
1055
|
-
--button-color-typical-toggle-
|
|
1056
|
-
--button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
1059
|
+
--button-color-typical-toggle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
1060
|
+
--button-color-typical-toggle-label-active: light-dark(var(--modes-color-interactive-monochrome-frozen-with-active-light), var(--modes-color-interactive-monochrome-frozen-with-active-dark));
|
|
1057
1061
|
--button-color-typical-toggle-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1058
|
-
--button-color-typical-toggle-label-
|
|
1062
|
+
--button-color-typical-toggle-label-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-with-hover-light), var(--modes-color-interactive-monochrome-frozen-with-hover-dark));
|
|
1059
1063
|
--button-color-video-primary-bg-enabled: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
|
|
1060
1064
|
--button-color-video-primary-bg-hover: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
|
|
1061
1065
|
--button-color-video-primary-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
@@ -1100,8 +1104,6 @@
|
|
|
1100
1104
|
--button-color-destructive-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1101
1105
|
--button-color-typical-primary-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1102
1106
|
--button-color-typical-secondary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1103
|
-
--button-color-typical-tertiary-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1104
|
-
--button-color-typical-subtle-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-alt-light), var(--modes-color-interactive-monochrome-active-alt-dark));
|
|
1105
1107
|
--button-color-typical-subtle-inverse-bg-active: light-dark(var(--modes-color-interactive-monochrome-inverse-active-alt-light), var(--modes-color-interactive-monochrome-inverse-active-alt-dark));
|
|
1106
1108
|
--button-color-typical-toggle-bg-active-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1107
1109
|
--button-color-typical-toggle-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
@@ -1128,7 +1130,7 @@
|
|
|
1128
1130
|
--container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
1129
1131
|
--container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color */
|
|
1130
1132
|
--container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
|
|
1131
|
-
--container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-
|
|
1133
|
+
--container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-frozen-light), var(--modes-color-custom-frozen-dark));
|
|
1132
1134
|
--container-color-interactive-droptarget-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* draggable drop target background color */
|
|
1133
1135
|
--container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
|
|
1134
1136
|
--container-color-standard-statusborder-bg-caution: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
@@ -1147,7 +1149,7 @@
|
|
|
1147
1149
|
--container-typography-paragraph-s: var(--global-typography-component-moderate-s);
|
|
1148
1150
|
--container-typography-paragraph-m: var(--global-typography-component-moderate-m);
|
|
1149
1151
|
--container-typography-paragraph-l: var(--global-typography-component-moderate-l);
|
|
1150
|
-
--container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
|
|
1152
|
+
--container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
1151
1153
|
--container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1152
1154
|
--container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* Used for accordion hover backgrounds */
|
|
1153
1155
|
--container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
@@ -1246,15 +1248,15 @@
|
|
|
1246
1248
|
--container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
|
|
1247
1249
|
--container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
|
|
1248
1250
|
--container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners) */
|
|
1249
|
-
--container-radius-card-moderate: var(--global-radius-container-
|
|
1250
|
-
--container-radius-card-curved: var(--global-radius-container-
|
|
1251
|
-
--container-radius-card-sweeping: var(--global-radius-container-
|
|
1252
|
-
--container-radius-tile-moderate: var(--global-radius-container-
|
|
1253
|
-
--container-radius-tile-curved: var(--global-radius-container-
|
|
1254
|
-
--container-radius-tile-sweeping: var(--global-radius-container-
|
|
1255
|
-
--container-radius-tileselect-moderate: var(--global-radius-container-
|
|
1256
|
-
--container-radius-tileselect-curved: var(--global-radius-container-
|
|
1257
|
-
--container-radius-tileselect-sweeping: var(--global-radius-container-
|
|
1251
|
+
--container-radius-card-moderate: var(--global-radius-container-m); /* Card (less rounded) */
|
|
1252
|
+
--container-radius-card-curved: var(--global-radius-container-l); /* Card (more rounded) */
|
|
1253
|
+
--container-radius-card-sweeping: var(--global-radius-container-xl); /* Card largest rounded type */
|
|
1254
|
+
--container-radius-tile-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
|
|
1255
|
+
--container-radius-tile-curved: var(--global-radius-container-l); /* Tile (more rounded) */
|
|
1256
|
+
--container-radius-tile-sweeping: var(--global-radius-container-xl); /* Tile largest roundedness */
|
|
1257
|
+
--container-radius-tileselect-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
|
|
1258
|
+
--container-radius-tileselect-curved: var(--global-radius-container-l); /* Tile (more rounded) */
|
|
1259
|
+
--container-radius-tileselect-sweeping: var(--global-radius-container-xl);
|
|
1258
1260
|
--container-space-none: var(--global-space-none);
|
|
1259
1261
|
--container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
|
|
1260
1262
|
--container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
|
|
@@ -1455,12 +1457,16 @@
|
|
|
1455
1457
|
--form-color-switch-border-active: transparent;
|
|
1456
1458
|
--form-color-switch-border-activedisabled: transparent;
|
|
1457
1459
|
--form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
|
|
1458
|
-
--form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container), */
|
|
1459
1460
|
--form-radius-radio: var(--global-radius-circle); /* Radio button */
|
|
1460
1461
|
--form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
|
|
1461
1462
|
--form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
|
|
1462
1463
|
--form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
|
|
1464
|
+
--form-color-calendar-bg-duration: light-dark(var(--modes-color-interactive-inactive-frozen-default-alt-light), var(--modes-color-interactive-inactive-frozen-default-alt-dark));
|
|
1463
1465
|
--form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
|
|
1466
|
+
--form-color-typical-border-enabled: light-dark(var(--modes-color-interactive-data-entry-frozen-with-default-light), var(--modes-color-interactive-data-entry-frozen-with-default-dark));
|
|
1467
|
+
--form-color-switch-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-default-light), var(--modes-color-interactive-monochrome-frozen-default-dark));
|
|
1468
|
+
--form-color-switch-border-enabled: light-dark(var(--modes-color-interactive-data-entry-frozen-with-default-light), var(--modes-color-interactive-data-entry-frozen-with-default-dark));
|
|
1469
|
+
--form-color-switch-fg-enabled: light-dark(var(--modes-color-interactive-data-entry-frozen-with-default-light), var(--modes-color-interactive-data-entry-frozen-with-default-dark));
|
|
1464
1470
|
--form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
1465
1471
|
--form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
|
|
1466
1472
|
--form-color-validation-bar-warning: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* warning bar to left of inputs */
|
|
@@ -1470,12 +1476,12 @@
|
|
|
1470
1476
|
--form-typography-label-s: var(--global-typography-component-firm-s);
|
|
1471
1477
|
--form-typography-label-m: var(--global-typography-component-firm-m);
|
|
1472
1478
|
--form-typography-label-l: var(--global-typography-component-firm-l);
|
|
1479
|
+
--form-typography-default-xs: var(--global-typography-component-moderate-xs);
|
|
1473
1480
|
--form-typography-default-s: var(--global-typography-component-moderate-s);
|
|
1474
1481
|
--form-typography-default-m: var(--global-typography-component-moderate-m);
|
|
1475
1482
|
--form-typography-default-l: var(--global-typography-component-moderate-l);
|
|
1476
|
-
--form-color-calendar-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1483
|
+
--form-color-calendar-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-light), var(--modes-color-interactive-monochrome-frozen-active-dark));
|
|
1477
1484
|
--form-color-calendar-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
|
|
1478
|
-
--form-color-calendar-border-duration: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1479
1485
|
--form-color-calendar-text-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1480
1486
|
--form-color-dropdown-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1481
1487
|
--form-color-typical-bg-default: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
|
|
@@ -1485,7 +1491,6 @@
|
|
|
1485
1491
|
--form-color-typical-icon-hover: light-dark(var(--modes-color-interactive-data-entry-with-hover-light), var(--modes-color-interactive-data-entry-with-hover-dark));
|
|
1486
1492
|
--form-color-typical-text-hover: light-dark(var(--modes-color-interactive-data-entry-with-hover-light), var(--modes-color-interactive-data-entry-with-hover-dark)); /* text hover state when dragging a file over file input */
|
|
1487
1493
|
--form-color-typical-text-read-only: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
|
|
1488
|
-
--form-color-switch-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1489
1494
|
--form-color-switch-bg-enabled: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark)); /* for switch */
|
|
1490
1495
|
--form-space-none: var(--global-space-none);
|
|
1491
1496
|
--form-space-calendar-x-m: var(--global-space-macro-m);
|
|
@@ -1658,18 +1663,18 @@
|
|
|
1658
1663
|
--form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
|
|
1659
1664
|
--form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
|
|
1660
1665
|
--form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
|
|
1661
|
-
--form-color-calendar-
|
|
1666
|
+
--form-color-calendar-border-duration: var(--form-color-calendar-bg-active);
|
|
1662
1667
|
--form-color-calendar-text-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
1663
1668
|
--form-color-calendar-text-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark)); /* Days of the week subheaders */
|
|
1664
1669
|
--form-color-calendar-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1665
1670
|
--form-color-calendar-text-duration: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
|
|
1666
1671
|
--form-color-calendar-text-enabled: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
|
|
1667
1672
|
--form-color-calendar-text-alt-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
|
|
1668
|
-
--form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
|
|
1669
1673
|
--form-color-dropdown-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
1670
1674
|
--form-color-dropdown-label-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
1671
1675
|
--form-color-dropdown-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1672
1676
|
--form-color-dropdown-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
|
|
1677
|
+
--form-color-dropdown-label-subtext: light-dark(var(--modes-color-interactive-monochrome-default-alt2-light), var(--modes-color-interactive-monochrome-default-alt2-dark)); /* Option subtext. */
|
|
1673
1678
|
--form-color-labelset-label-default: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
|
|
1674
1679
|
--form-color-labelset-label-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark)); /* used for '(optional)' text and hint text. */
|
|
1675
1680
|
--form-color-labelset-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
@@ -1689,19 +1694,18 @@
|
|
|
1689
1694
|
--form-color-typical-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
1690
1695
|
--form-color-typical-text-enabled: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark)); /* Dropdown text (subtle dropdown). */
|
|
1691
1696
|
--form-color-switch-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark)); /* for switch */
|
|
1692
|
-
--form-color-switch-border-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-alt-light), var(--modes-color-interactive-monochrome-subtle-default-alt-dark));
|
|
1693
1697
|
--form-color-switch-fg-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
1694
1698
|
--form-color-switch-fg-activedisabled: light-dark(var(--modes-color-interactive-inactive-content-alt-light), var(--modes-color-interactive-inactive-content-alt-dark));
|
|
1695
|
-
--form-color-switch-fg-enabled: light-dark(var(--modes-color-interactive-monochrome-subtle-default-alt-light), var(--modes-color-interactive-monochrome-subtle-default-alt-dark));
|
|
1696
1699
|
--form-color-switch-label-active: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
|
|
1697
1700
|
--form-color-switch-label-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
|
|
1698
1701
|
--form-color-switch-icon-enabled: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark));
|
|
1699
|
-
--form-radius-checkbox: var(--global-radius-interactive-
|
|
1702
|
+
--form-radius-checkbox: var(--global-radius-interactive-xs); /* S and M checkbox */
|
|
1700
1703
|
--form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
|
|
1701
|
-
--form-radius-
|
|
1702
|
-
--form-radius-
|
|
1703
|
-
--form-radius-
|
|
1704
|
-
--form-radius-
|
|
1704
|
+
--form-radius-colorpicker: var(--global-radius-interactive-l); /* Color picker (swatch container) */
|
|
1705
|
+
--form-radius-fileupload: var(--global-radius-interactive-s); /* File input (file uploads) */
|
|
1706
|
+
--form-radius-fileselector: var(--global-radius-interactive-s); /* File preview (file selector asset) */
|
|
1707
|
+
--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 */
|
|
1708
|
+
--form-radius-validationbar: var(--global-radius-interactive-xxs); /* Validation bar */
|
|
1705
1709
|
--form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
|
|
1706
1710
|
--form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
|
|
1707
1711
|
--form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
|
|
@@ -1733,8 +1737,8 @@
|
|
|
1733
1737
|
--form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
|
|
1734
1738
|
--form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
|
|
1735
1739
|
--form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
|
|
1740
|
+
--form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
|
|
1736
1741
|
--form-color-typical-border-alt: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1737
|
-
--form-color-typical-border-enabled: light-dark(var(--modes-color-interactive-data-entry-with-default-light), var(--modes-color-interactive-data-entry-with-default-dark));
|
|
1738
1742
|
--form-color-typical-border-disabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1739
1743
|
--form-color-typical-border-read-only: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
1740
1744
|
--form-color-switch-bg-activedisabled: light-dark(var(--modes-color-interactive-inactive-default-light), var(--modes-color-interactive-inactive-default-dark));
|
|
@@ -1758,7 +1762,7 @@
|
|
|
1758
1762
|
--link-boxshadow-skiplink: var(--global-boxshadow-container-near);
|
|
1759
1763
|
--link-color-destructive-label-hover: light-dark(var(--modes-color-interactive-danger-hover-alt2-light), var(--modes-color-interactive-danger-hover-alt2-dark));
|
|
1760
1764
|
--link-color-destructive-inverse-label-hover: light-dark(var(--modes-color-interactive-danger-inverse-hover-alt2-light), var(--modes-color-interactive-danger-inverse-hover-alt2-dark));
|
|
1761
|
-
--link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-default-
|
|
1765
|
+
--link-color-typical-label-default: light-dark(var(--modes-color-interactive-primary-frozen-default-alt-light), var(--modes-color-interactive-primary-frozen-default-alt-dark));
|
|
1762
1766
|
--link-color-typical-inverse-label-default: light-dark(var(--modes-color-interactive-primary-inverse-default-alt2-light), var(--modes-color-interactive-primary-inverse-default-alt2-dark));
|
|
1763
1767
|
--link-color-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
1764
1768
|
--link-color-subtle-inverse-label-default: light-dark(var(--modes-color-interactive-monochrome-inverse-default-light), var(--modes-color-interactive-monochrome-inverse-default-dark));
|
|
@@ -1770,7 +1774,7 @@
|
|
|
1770
1774
|
--link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
|
|
1771
1775
|
--link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
|
|
1772
1776
|
--link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
|
|
1773
|
-
--link-color-typical-label-hover: light-dark(var(--modes-color-interactive-primary-hover-
|
|
1777
|
+
--link-color-typical-label-hover: light-dark(var(--modes-color-interactive-primary-frozen-hover-alt-light), var(--modes-color-interactive-primary-frozen-hover-alt-dark));
|
|
1774
1778
|
--link-color-typical-inverse-label-hover: light-dark(var(--modes-color-interactive-primary-inverse-hover-alt2-light), var(--modes-color-interactive-primary-inverse-hover-alt2-dark));
|
|
1775
1779
|
|
|
1776
1780
|
/* logo component tokens */
|
|
@@ -1789,6 +1793,7 @@
|
|
|
1789
1793
|
--nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
|
|
1790
1794
|
--nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
|
|
1791
1795
|
--nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
1796
|
+
--nav-color-item-bg-hover: light-dark(var(--modes-color-interactive-primary-frozen-nav-hover-light), var(--modes-color-interactive-primary-frozen-nav-hover-dark));
|
|
1792
1797
|
--nav-color-leftnav-container-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* bg of horizontal nav variant that launches the left nav */
|
|
1793
1798
|
--nav-color-leftnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
|
|
1794
1799
|
--nav-color-leftnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
@@ -1809,9 +1814,7 @@
|
|
|
1809
1814
|
--nav-typography-default-l: var(--global-typography-component-moderate-l);
|
|
1810
1815
|
--nav-color-item-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1811
1816
|
--nav-color-item-bg-activealt: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
|
|
1812
|
-
--nav-color-item-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark));
|
|
1813
1817
|
--nav-color-item-label-activealt: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1814
|
-
--nav-color-item-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1815
1818
|
--nav-color-menu-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* menu (level 1) nav bg */
|
|
1816
1819
|
--nav-color-menu-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* level 2 nav bg */
|
|
1817
1820
|
--nav-color-menu-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* level 3 nav bg */
|
|
@@ -1838,7 +1841,7 @@
|
|
|
1838
1841
|
--nav-color-topnav-item-label-enabled: light-dark(var(--modes-color-interactive-nav-with-default-light), var(--modes-color-interactive-nav-with-default-dark));
|
|
1839
1842
|
--nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
|
|
1840
1843
|
--nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape), */
|
|
1841
|
-
--nav-radius-menumodal: var(--global-radius-interactive-
|
|
1844
|
+
--nav-radius-menumodal: var(--global-radius-interactive-m); /* Menu on mobile */
|
|
1842
1845
|
--nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
|
1843
1846
|
--nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
|
1844
1847
|
--nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
|
|
@@ -1931,6 +1934,7 @@
|
|
|
1931
1934
|
--nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
|
|
1932
1935
|
--nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
|
|
1933
1936
|
--nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
|
|
1937
|
+
--nav-color-item-label-hover: light-dark(var(--modes-color-interactive-primary-frozen-nav-label-hover-light), var(--modes-color-interactive-primary-frozen-nav-label-hover-dark));
|
|
1934
1938
|
|
|
1935
1939
|
/* page component tokens */
|
|
1936
1940
|
--page-color-bg-default: light-dark(var(--modes-color-generic-backdrop-nought-light), var(--modes-color-generic-backdrop-nought-dark));
|
|
@@ -1988,11 +1992,7 @@
|
|
|
1988
1992
|
--popover-typography-default-m: var(--global-typography-component-moderate-m);
|
|
1989
1993
|
--popover-typography-default-l: var(--global-typography-component-moderate-l);
|
|
1990
1994
|
--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) */
|
|
1991
|
-
--popover-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
1992
|
-
--popover-color-bg-activealt: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* REF'D IN FORM. */
|
|
1993
|
-
--popover-color-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-alt-light), var(--modes-color-interactive-monochrome-hover-alt-dark)); /* REF'D IN FORM. */
|
|
1994
|
-
--popover-color-label-activealt: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1995
|
-
--popover-color-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
1995
|
+
--popover-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-light), var(--modes-color-interactive-monochrome-frozen-active-dark));
|
|
1996
1996
|
--popover-color-submenu-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* popover small screen submenu container bg */
|
|
1997
1997
|
--popover-size-icon-m: var(--global-size-icon-m);
|
|
1998
1998
|
--popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
|
|
@@ -2021,9 +2021,13 @@
|
|
|
2021
2021
|
--popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
|
2022
2022
|
--popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
|
2023
2023
|
--popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
|
|
2024
|
+
--popover-color-bg-activealt: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
2025
|
+
--popover-color-bg-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
2024
2026
|
--popover-color-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
2027
|
+
--popover-color-label-activealt: light-dark(var(--modes-color-interactive-monochrome-frozen-with-hover-light), var(--modes-color-interactive-monochrome-frozen-with-hover-dark));
|
|
2025
2028
|
--popover-color-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
|
|
2026
|
-
--popover-color-label-
|
|
2029
|
+
--popover-color-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2030
|
+
--popover-color-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2027
2031
|
--popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
|
|
2028
2032
|
--popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
|
|
2029
2033
|
--popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */
|
|
@@ -2101,12 +2105,14 @@
|
|
|
2101
2105
|
--progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
|
|
2102
2106
|
--progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
|
|
2103
2107
|
--progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
|
|
2108
|
+
--progress-color-bg-default: light-dark(var(--modes-color-interactive-progress-frozen-bg-alt-light), var(--modes-color-interactive-progress-frozen-bg-alt-dark));
|
|
2104
2109
|
--progress-color-fg-ai: light-dark(var(--modes-color-interactive-ai-default-light), var(--modes-color-interactive-ai-default-dark)); /* For progress ring in ai buttons */
|
|
2105
2110
|
--progress-color-fg-alt: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2106
2111
|
--progress-color-fg-caution: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
2107
2112
|
--progress-color-fg-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2108
2113
|
--progress-color-fg-info: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
2109
2114
|
--progress-color-datavis-fg-default: light-dark(var(--modes-color-status-custom-teal-default-light), var(--modes-color-status-custom-teal-default-dark));
|
|
2115
|
+
--progress-color-loader-bg-default: light-dark(var(--modes-color-interactive-progress-frozen-bg-light), var(--modes-color-interactive-progress-frozen-bg-dark));
|
|
2110
2116
|
--progress-color-loader-fg-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2111
2117
|
--progress-color-loader-fg-complete: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2112
2118
|
--progress-color-stepflow-bg-complete: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
@@ -2118,13 +2124,12 @@
|
|
|
2118
2124
|
--progress-typography-default-s: var(--global-typography-component-moderate-s);
|
|
2119
2125
|
--progress-typography-default-m: var(--global-typography-component-moderate-m);
|
|
2120
2126
|
--progress-typography-default-l: var(--global-typography-component-moderate-l);
|
|
2121
|
-
--progress-color-
|
|
2127
|
+
--progress-color-border-default: light-dark(var(--modes-color-generic-fg-frozen-soft-light), var(--modes-color-generic-fg-frozen-soft-dark));
|
|
2122
2128
|
--progress-color-fg-alt2: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark));
|
|
2123
|
-
--progress-color-fg-default: light-dark(var(--modes-color-
|
|
2129
|
+
--progress-color-fg-default: light-dark(var(--modes-color-generic-fg-frozen-soft-light), var(--modes-color-generic-fg-frozen-soft-dark));
|
|
2124
2130
|
--progress-color-label-alt: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark));
|
|
2125
2131
|
--progress-color-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
|
|
2126
|
-
--progress-color-loader-
|
|
2127
|
-
--progress-color-loader-fg-default: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark)); /* used for loader standard loader spinner */
|
|
2132
|
+
--progress-color-loader-fg-default: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark)); /* used for loader standard loader spinner */
|
|
2128
2133
|
--progress-color-loader-inverse-bg-default: light-dark(var(--modes-color-interactive-progress-bg-alt-light), var(--modes-color-interactive-progress-bg-alt-dark)); /* used for inverse loader bgs */
|
|
2129
2134
|
--progress-color-stepflow-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
2130
2135
|
--progress-color-stepflow-bg-default: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
|
|
@@ -2151,7 +2156,6 @@
|
|
|
2151
2156
|
--progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
|
|
2152
2157
|
--progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
|
|
2153
2158
|
--progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
|
|
2154
|
-
--progress-color-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
|
|
2155
2159
|
--progress-color-loader-inverse-fg-default: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark)); /* used on inverse loading spinner */
|
|
2156
2160
|
--progress-color-stepflow-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
|
|
2157
2161
|
--progress-color-stepindicator-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
|
|
@@ -2219,34 +2223,29 @@
|
|
|
2219
2223
|
--progress-space-stepindicator-horizontal-text-x-m: var(--global-space-micro-l); /* horizontal variant left and right padding on text container */
|
|
2220
2224
|
|
|
2221
2225
|
/* status component tokens */
|
|
2226
|
+
--status-color-message-global-info-bg-default: light-dark(var(--modes-color-status-info-frozenglobal-default-light), var(--modes-color-status-info-frozenglobal-default-dark)); /* Global message bg */
|
|
2227
|
+
--status-color-message-global-warning-bg-default: light-dark(var(--modes-color-status-caution-frozenglobal-default-light), var(--modes-color-status-caution-frozenglobal-default-dark)); /* Global message bg */
|
|
2222
2228
|
--status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
|
|
2223
2229
|
--status-color-none: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark)); /* transparent override used for hiding colors when needed. */
|
|
2224
2230
|
--status-color-message-contextual-bg: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
|
|
2225
2231
|
--status-color-message-contextual-icon: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* decorative icon on standard contextual messages */
|
|
2226
2232
|
--status-color-message-contextual-icon-alt: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark)); /* icon on neutral status dialogs */
|
|
2227
|
-
--status-color-message-contextual-ai-bg-alt: light-dark(var(--modes-color-status-neutral-default-alt-light), var(--modes-color-status-neutral-default-alt-dark));
|
|
2228
2233
|
--status-color-message-contextual-callout-bg-alt: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Subtle message bg */
|
|
2229
2234
|
--status-color-message-contextual-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2230
|
-
--status-color-message-contextual-error-bg-alt: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* Subtle message bg */
|
|
2231
2235
|
--status-color-message-contextual-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2232
2236
|
--status-color-message-contextual-error-icon: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Icon on tinted bgs */
|
|
2233
2237
|
--status-color-message-contextual-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
2234
|
-
--status-color-message-contextual-info-bg-alt: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* Subtle message bg */
|
|
2235
2238
|
--status-color-message-contextual-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
2236
2239
|
--status-color-message-contextual-info-icon: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark)); /* Icon on tinted bgs */
|
|
2237
2240
|
--status-color-message-contextual-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2238
|
-
--status-color-message-contextual-success-bg-alt: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* Subtle message bg */
|
|
2239
2241
|
--status-color-message-contextual-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2240
2242
|
--status-color-message-contextual-success-icon: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* Icon on tinted bgs */
|
|
2241
2243
|
--status-color-message-contextual-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
2242
|
-
--status-color-message-contextual-warning-bg-alt: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Subtle message bg */
|
|
2243
2244
|
--status-color-message-contextual-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
2244
2245
|
--status-color-message-contextual-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
|
|
2245
2246
|
--status-color-message-global-callout-bg-default: light-dark(var(--modes-color-status-callout-default-alt-light), var(--modes-color-status-callout-default-alt-dark)); /* Global message bg */
|
|
2246
|
-
--status-color-message-global-info-bg-
|
|
2247
|
-
--status-color-message-global-
|
|
2248
|
-
--status-color-message-global-warning-bg-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
|
|
2249
|
-
--status-color-message-global-warning-icon: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark)); /* Icon on tinted bgs */
|
|
2247
|
+
--status-color-message-global-info-bg-hover: light-dark(var(--modes-color-status-info-frozenglobal-hover-light), var(--modes-color-status-info-frozenglobal-hover-dark)); /* Global message bg */
|
|
2248
|
+
--status-color-message-global-warning-bg-hover: light-dark(var(--modes-color-status-caution-frozenglobal-hover-light), var(--modes-color-status-caution-frozenglobal-hover-dark)); /* Global message bg */
|
|
2250
2249
|
--status-color-pill-custom-blue-bg-default: light-dark(var(--modes-color-status-custom-blue-default-light), var(--modes-color-status-custom-blue-default-dark));
|
|
2251
2250
|
--status-color-pill-custom-blue-bg-alt-default: light-dark(var(--modes-color-status-custom-blue-default-alt-light), var(--modes-color-status-custom-blue-default-alt-dark)); /* outline pill bg */
|
|
2252
2251
|
--status-color-pill-custom-blue-border-default: light-dark(var(--modes-color-status-custom-blue-default-light), var(--modes-color-status-custom-blue-default-dark));
|
|
@@ -2278,7 +2277,6 @@
|
|
|
2278
2277
|
--status-color-pill-custom-slate-bg-alt-default: light-dark(var(--modes-color-status-custom-slate-default-alt-light), var(--modes-color-status-custom-slate-default-alt-dark)); /* outline pill bg */
|
|
2279
2278
|
--status-color-pill-custom-slate-border-default: light-dark(var(--modes-color-status-custom-slate-default-light), var(--modes-color-status-custom-slate-default-dark));
|
|
2280
2279
|
--status-color-pill-error-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2281
|
-
--status-color-pill-error-bg-alt-default: light-dark(var(--modes-color-status-negative-default-alt-light), var(--modes-color-status-negative-default-alt-dark)); /* outline pill bg */
|
|
2282
2280
|
--status-color-pill-error-border-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
|
|
2283
2281
|
--status-color-pill-error-inverse-bg-default: light-dark(var(--modes-color-status-negative-inverse-default-light), var(--modes-color-status-negative-inverse-default-dark));
|
|
2284
2282
|
--status-color-pill-error-inverse-bg-alt-default: light-dark(var(--modes-color-status-negative-inverse-default-alt-light), var(--modes-color-status-negative-inverse-default-alt-dark)); /* outline pill bg */
|
|
@@ -2290,25 +2288,22 @@
|
|
|
2290
2288
|
--status-color-pill-important-inverse-bg-alt-default: light-dark(var(--modes-color-status-important-inverse-default-alt-light), var(--modes-color-status-important-inverse-default-alt-dark)); /* outline pill bg */
|
|
2291
2289
|
--status-color-pill-important-inverse-border-default: light-dark(var(--modes-color-status-important-inverse-default-light), var(--modes-color-status-important-inverse-default-dark));
|
|
2292
2290
|
--status-color-pill-info-bg-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
2293
|
-
--status-color-pill-info-bg-alt-default: light-dark(var(--modes-color-status-info-default-alt-light), var(--modes-color-status-info-default-alt-dark)); /* outline pill bg */
|
|
2294
2291
|
--status-color-pill-info-border-default: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
|
|
2295
2292
|
--status-color-pill-info-inverse-bg-default: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
|
|
2296
2293
|
--status-color-pill-info-inverse-bg-alt-default: light-dark(var(--modes-color-status-info-inverse-default-alt-light), var(--modes-color-status-info-inverse-default-alt-dark)); /* outline pill bg */
|
|
2297
2294
|
--status-color-pill-info-inverse-border-default: light-dark(var(--modes-color-status-info-inverse-default-light), var(--modes-color-status-info-inverse-default-dark));
|
|
2298
|
-
--status-color-pill-neutral-bg-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
|
|
2299
|
-
--status-color-pill-neutral-bg-
|
|
2300
|
-
--status-color-pill-neutral-border-default: light-dark(var(--modes-color-status-neutral-default-light), var(--modes-color-status-neutral-default-dark));
|
|
2295
|
+
--status-color-pill-neutral-bg-default: light-dark(var(--modes-color-status-neutral-frozen-default-light), var(--modes-color-status-neutral-frozen-default-dark));
|
|
2296
|
+
--status-color-pill-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-frozen-hover-light), var(--modes-color-status-neutral-frozen-hover-dark));
|
|
2297
|
+
--status-color-pill-neutral-border-default: light-dark(var(--modes-color-status-neutral-frozen-default-light), var(--modes-color-status-neutral-frozen-default-dark));
|
|
2301
2298
|
--status-color-pill-neutral-inverse-bg-default: light-dark(var(--modes-color-status-neutral-inverse-default-light), var(--modes-color-status-neutral-inverse-default-dark));
|
|
2302
2299
|
--status-color-pill-neutral-inverse-bg-alt-default: light-dark(var(--modes-color-status-neutral-inverse-default-alt-light), var(--modes-color-status-neutral-inverse-default-alt-dark)); /* outline pill bg */
|
|
2303
2300
|
--status-color-pill-neutral-inverse-border-default: light-dark(var(--modes-color-status-neutral-inverse-default-light), var(--modes-color-status-neutral-inverse-default-dark));
|
|
2304
2301
|
--status-color-pill-success-bg-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2305
|
-
--status-color-pill-success-bg-alt-default: light-dark(var(--modes-color-status-positive-default-alt-light), var(--modes-color-status-positive-default-alt-dark)); /* outline pill bg */
|
|
2306
2302
|
--status-color-pill-success-border-default: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
|
|
2307
2303
|
--status-color-pill-success-inverse-bg-default: light-dark(var(--modes-color-status-positive-inverse-default-light), var(--modes-color-status-positive-inverse-default-dark));
|
|
2308
2304
|
--status-color-pill-success-inverse-bg-alt-default: light-dark(var(--modes-color-status-positive-inverse-default-alt-light), var(--modes-color-status-positive-inverse-default-alt-dark)); /* outline pill bg */
|
|
2309
2305
|
--status-color-pill-success-inverse-border-default: light-dark(var(--modes-color-status-positive-inverse-default-light), var(--modes-color-status-positive-inverse-default-dark));
|
|
2310
2306
|
--status-color-pill-warning-bg-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
2311
|
-
--status-color-pill-warning-bg-alt-default: light-dark(var(--modes-color-status-caution-default-alt-light), var(--modes-color-status-caution-default-alt-dark)); /* Global message bg */
|
|
2312
2307
|
--status-color-pill-warning-border-default: light-dark(var(--modes-color-status-caution-default-light), var(--modes-color-status-caution-default-dark));
|
|
2313
2308
|
--status-color-pill-warning-inverse-bg-default: light-dark(var(--modes-color-status-caution-inverse-default-light), var(--modes-color-status-caution-inverse-default-dark));
|
|
2314
2309
|
--status-color-pill-warning-inverse-bg-alt-default: light-dark(var(--modes-color-status-caution-inverse-default-alt-light), var(--modes-color-status-caution-inverse-default-alt-dark)); /* Global message bg */
|
|
@@ -2324,11 +2319,14 @@
|
|
|
2324
2319
|
--status-typography-heading-l: var(--global-typography-component-firm-l);
|
|
2325
2320
|
--status-color-message-contextual-text: light-dark(var(--modes-color-status-content-with-hover-alt-light), var(--modes-color-status-content-with-hover-alt-dark)); /* Message text. */
|
|
2326
2321
|
--status-color-message-contextual-ai-bg-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
|
|
2322
|
+
--status-color-message-contextual-ai-bg-alt: var(--status-color-none); /* Subtle message bg */
|
|
2327
2323
|
--status-color-message-contextual-ai-border-default: light-dark(var(--modes-color-status-ai-default-alt-light), var(--modes-color-status-ai-default-alt-dark));
|
|
2324
|
+
--status-color-message-contextual-error-bg-alt: var(--status-color-none); /* Subtle message bg */
|
|
2325
|
+
--status-color-message-contextual-info-bg-alt: var(--status-color-none); /* Subtle message bg */
|
|
2326
|
+
--status-color-message-contextual-success-bg-alt: var(--status-color-none); /* Subtle message bg */
|
|
2327
|
+
--status-color-message-contextual-warning-bg-alt: var(--status-color-none); /* Subtle message bg */
|
|
2328
2328
|
--status-color-message-global-label-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
2329
2329
|
--status-color-message-global-callout-bg-hover: light-dark(var(--modes-color-status-callout-hover-alt-light), var(--modes-color-status-callout-hover-alt-dark)); /* global message bg hover */
|
|
2330
|
-
--status-color-message-global-info-bg-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
|
|
2331
|
-
--status-color-message-global-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
|
|
2332
2330
|
--status-color-pill-custom-blue-bg-alt-hover: light-dark(var(--modes-color-status-custom-blue-hover-alt-light), var(--modes-color-status-custom-blue-hover-alt-dark));
|
|
2333
2331
|
--status-color-pill-custom-blue-bg-hover: light-dark(var(--modes-color-status-custom-blue-hover-light), var(--modes-color-status-custom-blue-hover-dark));
|
|
2334
2332
|
--status-color-pill-custom-teal-bg-alt-hover: light-dark(var(--modes-color-status-custom-teal-hover-alt-light), var(--modes-color-status-custom-teal-hover-alt-dark));
|
|
@@ -2349,6 +2347,7 @@
|
|
|
2349
2347
|
--status-color-pill-custom-gray-bg-hover: light-dark(var(--modes-color-status-custom-gray-hover-light), var(--modes-color-status-custom-gray-hover-dark));
|
|
2350
2348
|
--status-color-pill-custom-slate-bg-alt-hover: light-dark(var(--modes-color-status-custom-slate-hover-alt-light), var(--modes-color-status-custom-slate-hover-alt-dark));
|
|
2351
2349
|
--status-color-pill-custom-slate-bg-hover: light-dark(var(--modes-color-status-custom-slate-hover-light), var(--modes-color-status-custom-slate-hover-dark));
|
|
2350
|
+
--status-color-pill-error-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
|
2352
2351
|
--status-color-pill-error-bg-alt-hover: light-dark(var(--modes-color-status-negative-hover-alt-light), var(--modes-color-status-negative-hover-alt-dark));
|
|
2353
2352
|
--status-color-pill-error-bg-hover: light-dark(var(--modes-color-status-negative-hover-light), var(--modes-color-status-negative-hover-dark));
|
|
2354
2353
|
--status-color-pill-error-inverse-bg-alt-hover: light-dark(var(--modes-color-status-negative-inverse-hover-alt-light), var(--modes-color-status-negative-inverse-hover-alt-dark));
|
|
@@ -2359,30 +2358,35 @@
|
|
|
2359
2358
|
--status-color-pill-important-bg-hover: light-dark(var(--modes-color-status-important-hover-light), var(--modes-color-status-important-hover-dark));
|
|
2360
2359
|
--status-color-pill-important-inverse-bg-alt-hover: light-dark(var(--modes-color-status-important-inverse-hover-alt-light), var(--modes-color-status-important-inverse-hover-alt-dark));
|
|
2361
2360
|
--status-color-pill-important-inverse-bg-hover: light-dark(var(--modes-color-status-important-inverse-hover-light), var(--modes-color-status-important-inverse-hover-dark));
|
|
2361
|
+
--status-color-pill-info-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
|
2362
2362
|
--status-color-pill-info-bg-alt-hover: light-dark(var(--modes-color-status-info-hover-alt-light), var(--modes-color-status-info-hover-alt-dark));
|
|
2363
2363
|
--status-color-pill-info-bg-hover: light-dark(var(--modes-color-status-info-hover-light), var(--modes-color-status-info-hover-dark));
|
|
2364
2364
|
--status-color-pill-info-inverse-bg-alt-hover: light-dark(var(--modes-color-status-info-inverse-hover-alt-light), var(--modes-color-status-info-inverse-hover-alt-dark));
|
|
2365
2365
|
--status-color-pill-info-inverse-bg-hover: light-dark(var(--modes-color-status-info-inverse-hover-light), var(--modes-color-status-info-inverse-hover-dark));
|
|
2366
|
-
--status-color-pill-neutral-bg-alt-
|
|
2367
|
-
--status-color-pill-neutral-bg-hover: light-dark(var(--modes-color-status-neutral-hover-light), var(--modes-color-status-neutral-hover-dark));
|
|
2366
|
+
--status-color-pill-neutral-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
|
2367
|
+
--status-color-pill-neutral-bg-alt-hover: light-dark(var(--modes-color-status-neutral-frozen-hover-alt-light), var(--modes-color-status-neutral-frozen-hover-alt-dark));
|
|
2368
2368
|
--status-color-pill-neutral-inverse-bg-alt-hover: light-dark(var(--modes-color-status-neutral-inverse-hover-alt-light), var(--modes-color-status-neutral-inverse-hover-alt-dark));
|
|
2369
2369
|
--status-color-pill-neutral-inverse-bg-hover: light-dark(var(--modes-color-status-neutral-inverse-hover-light), var(--modes-color-status-neutral-inverse-hover-dark));
|
|
2370
2370
|
--status-color-pill-readonly-label: light-dark(var(--modes-color-generic-content-firm-light), var(--modes-color-generic-content-firm-dark)); /* Pill (all types, readonly, when nested in disabled parent components) */
|
|
2371
|
+
--status-color-pill-success-bg-alt-default: var(--status-color-none); /* outline pill bg */
|
|
2371
2372
|
--status-color-pill-success-bg-alt-hover: light-dark(var(--modes-color-status-positive-hover-alt-light), var(--modes-color-status-positive-hover-alt-dark));
|
|
2372
2373
|
--status-color-pill-success-bg-hover: light-dark(var(--modes-color-status-positive-hover-light), var(--modes-color-status-positive-hover-dark));
|
|
2373
2374
|
--status-color-pill-success-inverse-bg-alt-hover: light-dark(var(--modes-color-status-positive-inverse-hover-alt-light), var(--modes-color-status-positive-inverse-hover-alt-dark));
|
|
2374
2375
|
--status-color-pill-success-inverse-bg-hover: light-dark(var(--modes-color-status-positive-inverse-hover-light), var(--modes-color-status-positive-inverse-hover-dark));
|
|
2376
|
+
--status-color-pill-warning-bg-alt-default: var(--status-color-none); /* Global message bg */
|
|
2375
2377
|
--status-color-pill-warning-bg-alt-hover: light-dark(var(--modes-color-status-caution-hover-alt-light), var(--modes-color-status-caution-hover-alt-dark));
|
|
2376
2378
|
--status-color-pill-warning-bg-hover: light-dark(var(--modes-color-status-caution-hover-light), var(--modes-color-status-caution-hover-dark));
|
|
2377
2379
|
--status-color-pill-warning-inverse-bg-alt-hover: light-dark(var(--modes-color-status-caution-inverse-hover-alt-light), var(--modes-color-status-caution-inverse-hover-alt-dark));
|
|
2378
2380
|
--status-color-pill-warning-inverse-bg-hover: light-dark(var(--modes-color-status-caution-inverse-hover-light), var(--modes-color-status-caution-inverse-hover-dark));
|
|
2379
|
-
--status-color-rating-bg-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
|
|
2380
|
-
--status-color-rating-bg-default-alt: light-dark(var(--modes-color-status-reviews-default-alt-light), var(--modes-color-status-reviews-default-alt-dark));
|
|
2381
|
-
--status-color-rating-bg-hover: light-dark(var(--modes-color-status-reviews-hover-light), var(--modes-color-status-reviews-hover-dark));
|
|
2382
|
-
--status-color-rating-border-default: light-dark(var(--modes-color-status-reviews-default-light), var(--modes-color-status-reviews-default-dark));
|
|
2381
|
+
--status-color-rating-bg-default: light-dark(var(--modes-color-status-reviews-frozen-default-light), var(--modes-color-status-reviews-frozen-default-dark));
|
|
2382
|
+
--status-color-rating-bg-default-alt: light-dark(var(--modes-color-status-reviews-frozen-default-alt-light), var(--modes-color-status-reviews-frozen-default-alt-dark));
|
|
2383
|
+
--status-color-rating-bg-hover: light-dark(var(--modes-color-status-reviews-frozen-hover-light), var(--modes-color-status-reviews-frozen-hover-dark));
|
|
2384
|
+
--status-color-rating-border-default: light-dark(var(--modes-color-status-reviews-frozen-default-light), var(--modes-color-status-reviews-frozen-default-dark));
|
|
2383
2385
|
--status-color-message-contextual-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
|
|
2384
2386
|
--status-color-message-global-label-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
|
|
2385
2387
|
--status-color-message-global-callout-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark)); /* Icon on tinted bgs */
|
|
2388
|
+
--status-color-message-global-info-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
|
|
2389
|
+
--status-color-message-global-warning-icon: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
|
|
2386
2390
|
--status-color-pill-generic-label-default: light-dark(var(--modes-color-status-content-with-default-light), var(--modes-color-status-content-with-default-dark));
|
|
2387
2391
|
--status-color-pill-generic-label-hover: light-dark(var(--modes-color-status-content-with-hover-light), var(--modes-color-status-content-with-hover-dark));
|
|
2388
2392
|
--status-color-pill-generic-label-alt-default: light-dark(var(--modes-color-status-content-with-default-alt-light), var(--modes-color-status-content-with-default-alt-dark));
|
|
@@ -2397,7 +2401,7 @@
|
|
|
2397
2401
|
--status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
|
|
2398
2402
|
--status-size-icon-m: var(--global-size-icon-m);
|
|
2399
2403
|
--status-radius-message: var(--global-radius-container-m); /* Message */
|
|
2400
|
-
--status-radius-pill: var(--global-radius-container-
|
|
2404
|
+
--status-radius-pill: var(--global-radius-container-xs); /* Pill (outer corners) */
|
|
2401
2405
|
--status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
|
|
2402
2406
|
--status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
|
|
2403
2407
|
--status-space-none: var(--global-space-none);
|
|
@@ -2439,8 +2443,7 @@
|
|
|
2439
2443
|
--tab-typography-label-s: var(--global-typography-component-firm-s);
|
|
2440
2444
|
--tab-typography-label-m: var(--global-typography-component-firm-m);
|
|
2441
2445
|
--tab-typography-label-l: var(--global-typography-component-firm-l);
|
|
2442
|
-
--tab-color-
|
|
2443
|
-
--tab-color-border-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
2446
|
+
--tab-color-border-active: light-dark(var(--modes-color-interactive-primary-frozen-default-light), var(--modes-color-interactive-primary-frozen-default-dark));
|
|
2444
2447
|
--tab-color-icon-hover: light-dark(var(--modes-color-interactive-monochrome-with-hover-light), var(--modes-color-interactive-monochrome-with-hover-dark));
|
|
2445
2448
|
--tab-color-label-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
2446
2449
|
--tab-color-icon-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
@@ -2460,16 +2463,17 @@
|
|
|
2460
2463
|
--tab-space-xg-l: var(--global-space-micro-l); /* Gap between elements in Tab. */
|
|
2461
2464
|
--tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
|
|
2462
2465
|
--tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
|
|
2463
|
-
--tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-with-
|
|
2466
|
+
--tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
|
|
2467
|
+
--tab-color-bg-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark)); /* For anchor nav, not tab. */
|
|
2464
2468
|
--tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
|
|
2465
|
-
--tab-color-border-enabled: light-dark(var(--modes-color-
|
|
2466
|
-
--tab-color-border-hover: light-dark(var(--modes-color-
|
|
2469
|
+
--tab-color-border-enabled: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
2470
|
+
--tab-color-border-hover: light-dark(var(--modes-color-interactive-monochrome-frozen-hover-alt-light), var(--modes-color-interactive-monochrome-frozen-hover-alt-dark));
|
|
2467
2471
|
--tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
|
|
2468
2472
|
--tab-color-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2469
2473
|
--tab-color-validation-label-error: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
|
|
2470
2474
|
--tab-color-validation-label-warning: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
|
|
2471
|
-
--tab-radius-m: var(--global-radius-interactive-
|
|
2472
|
-
--tab-radius-l: var(--global-radius-interactive-
|
|
2475
|
+
--tab-radius-m: var(--global-radius-interactive-s); /* Tab horizontal - top corners. Tab vertical - left corners. */
|
|
2476
|
+
--tab-radius-l: var(--global-radius-interactive-s); /* Tab horizontal - top corners. Tab vertical - left corners. */
|
|
2473
2477
|
--tab-radius-baseline-m: var(--global-radius-interactive-xxs);
|
|
2474
2478
|
--tab-radius-baseline-l: var(--global-radius-interactive-xxs);
|
|
2475
2479
|
--tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
|
|
@@ -2480,7 +2484,11 @@
|
|
|
2480
2484
|
|
|
2481
2485
|
/* table component tokens */
|
|
2482
2486
|
--table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
|
|
2487
|
+
--table-color-header-harsh-bg-default: light-dark(var(--modes-color-interactive-monochrome-frozen-default-light), var(--modes-color-interactive-monochrome-frozen-default-dark));
|
|
2488
|
+
--table-color-row-bg-activated: light-dark(var(--modes-color-interactive-primary-frozen-table-default-light), var(--modes-color-interactive-primary-frozen-table-default-dark));
|
|
2483
2489
|
--table-color-row-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
|
|
2490
|
+
--table-color-row-bg-alt: light-dark(var(--modes-color-generic-bg-frozen-delicate-light), var(--modes-color-generic-bg-frozen-delicate-dark));
|
|
2491
|
+
--table-color-row-bg-hover: light-dark(var(--modes-color-generic-bg-frozen-soft-light), var(--modes-color-generic-bg-frozen-soft-dark));
|
|
2484
2492
|
--table-color-row-label-hover: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
|
|
2485
2493
|
--table-typography-heading-s: var(--global-typography-component-firm-s);
|
|
2486
2494
|
--table-typography-heading-m: var(--global-typography-component-firm-m);
|
|
@@ -2491,12 +2499,11 @@
|
|
|
2491
2499
|
--table-typography-label-s: var(--global-typography-component-firm-s);
|
|
2492
2500
|
--table-typography-label-m: var(--global-typography-component-firm-m);
|
|
2493
2501
|
--table-typography-label-l: var(--global-typography-component-firm-l);
|
|
2494
|
-
--table-color-
|
|
2495
|
-
--table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
|
|
2496
|
-
--table-color-row-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* Zebra stripes */
|
|
2502
|
+
--table-color-header-harsh-bg-alt: light-dark(var(--modes-color-interactive-monochrome-frozen-default-alt-light), var(--modes-color-interactive-monochrome-frozen-default-alt-dark));
|
|
2497
2503
|
--table-color-row-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* Zebra stripes combined with child rows. */
|
|
2498
2504
|
--table-color-row-bg-alt3: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* Child rows. */
|
|
2499
|
-
--table-color-row-
|
|
2505
|
+
--table-color-row-label-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
|
|
2506
|
+
--table-color-row-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-alt-light), var(--modes-color-interactive-monochrome-with-active-alt-dark));
|
|
2500
2507
|
--table-color-row-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
|
|
2501
2508
|
--table-color-footer-bg-default: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
|
|
2502
2509
|
--table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
|
|
@@ -2508,15 +2515,12 @@
|
|
|
2508
2515
|
--table-color-header-subtle-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
|
|
2509
2516
|
--table-color-header-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2510
2517
|
--table-color-header-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2511
|
-
--table-color-header-harsh-bg-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* header alt */
|
|
2512
|
-
--table-color-header-harsh-bg-default: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
|
|
2513
2518
|
--table-color-header-harsh-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
|
|
2514
2519
|
--table-color-header-harsh-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
|
|
2515
2520
|
--table-color-header-harsh-label-default: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
|
|
2516
2521
|
--table-color-header-harsh-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2522
|
+
--table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-frozen-active-alt-light), var(--modes-color-interactive-monochrome-frozen-active-alt-dark));
|
|
2517
2523
|
--table-color-row-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
|
|
2518
|
-
--table-color-row-label-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
2519
|
-
--table-color-row-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
|
|
2520
2524
|
--table-color-footer-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
|
|
2521
2525
|
--table-color-footer-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
|
|
2522
2526
|
--table-radius-container: var(--global-radius-container-m); /* Table (parent container) */
|