@sage/design-tokens 17.1.0 → 17.1.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/components/popover.css +1 -1
- package/js/common/components/popover.js +1 -1
- package/js/es6/components/popover.js +1 -1
- package/json/components/popover.json +1 -1
- package/package.json +1 -1
- package/scss/components/button.scss +3 -3
- package/scss/components/link.scss +1 -1
- package/scss/components/message.scss +2 -2
- package/scss/components/pill.scss +2 -2
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
-
--popover-size-menu-minwidth-s: var(--container-size-fluid-items-m) / 2;
|
|
10
|
+
--popover-size-menu-minwidth-s: calc(var(--container-size-fluid-items-m) / 2);
|
|
11
11
|
--popover-size-menu-minwidth-m: var(--container-size-fluid-items-xs);
|
|
12
12
|
--popover-size-menu-minwidth-l: var(--container-size-fluid-items-s);
|
|
13
13
|
--popover-size-menu-maxwidth-s: var(--container-size-fluid-items-m);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
module.exports.popoverSizeMenuMinwidthS = "var(--container-size-fluid-items-m
|
|
5
|
+
module.exports.popoverSizeMenuMinwidthS = "calc(var(--container-size-fluid-items-m) / 2)";
|
|
6
6
|
module.exports.popoverSizeMenuMinwidthM = "var(--container-size-fluid-items-xs)";
|
|
7
7
|
module.exports.popoverSizeMenuMinwidthL = "var(--container-size-fluid-items-s)";
|
|
8
8
|
module.exports.popoverSizeMenuMaxwidthS = "var(--container-size-fluid-items-m)";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
export const popoverSizeMenuMinwidthS = "var(--container-size-fluid-items-m
|
|
5
|
+
export const popoverSizeMenuMinwidthS = "calc(var(--container-size-fluid-items-m) / 2)";
|
|
6
6
|
export const popoverSizeMenuMinwidthM = "var(--container-size-fluid-items-xs)";
|
|
7
7
|
export const popoverSizeMenuMinwidthL = "var(--container-size-fluid-items-s)";
|
|
8
8
|
export const popoverSizeMenuMaxwidthS = "var(--container-size-fluid-items-m)";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"popoverSizeMenuMinwidthS": "var(--container-size-fluid-items-m
|
|
2
|
+
"popoverSizeMenuMinwidthS": "calc(var(--container-size-fluid-items-m) / 2)",
|
|
3
3
|
"popoverSizeMenuMinwidthM": "var(--container-size-fluid-items-xs)",
|
|
4
4
|
"popoverSizeMenuMinwidthL": "var(--container-size-fluid-items-s)",
|
|
5
5
|
"popoverSizeMenuMaxwidthS": "var(--container-size-fluid-items-m)",
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
},
|
|
7
7
|
"description": "Design tokens for the Sage Design System.",
|
|
8
8
|
"author": "The Sage Group plc",
|
|
9
|
-
"version": "17.1.
|
|
9
|
+
"version": "17.1.1",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
@@ -46,7 +46,6 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
|
|
|
46
46
|
$button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
|
|
47
47
|
$button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
|
|
48
48
|
$button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
49
|
-
$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
50
49
|
$button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
51
50
|
$button-typical-tertiary-border-active: $mode-color-action-main-active;
|
|
52
51
|
$button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
|
|
@@ -57,12 +56,10 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
|
|
|
57
56
|
$button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
|
|
58
57
|
$button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
|
|
59
58
|
$button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
60
|
-
$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
61
59
|
$button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
62
60
|
$button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
|
|
63
61
|
$button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
|
|
64
62
|
$button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
65
|
-
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
66
63
|
$button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
67
64
|
$button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
|
|
68
65
|
$button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
|
|
@@ -88,6 +85,7 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
|
|
|
88
85
|
$button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
|
|
89
86
|
$button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
90
87
|
$button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
88
|
+
$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
91
89
|
$button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
|
|
92
90
|
$button-typical-tertiary-bg-default: $button-none;
|
|
93
91
|
$button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
|
|
@@ -97,11 +95,13 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
|
|
|
97
95
|
$button-typical-tertiary-inverse-bg-default: $button-none;
|
|
98
96
|
$button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
99
97
|
$button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
98
|
+
$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
100
99
|
$button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
|
|
101
100
|
$button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
|
|
102
101
|
$button-typical-subtle-label-default: $mode-color-action-grayscale-default;
|
|
103
102
|
$button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
|
|
104
103
|
$button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
|
|
104
|
+
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
105
105
|
$button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
|
|
106
106
|
$button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
|
|
107
107
|
$button-typical-toggle-border-default: $mode-color-action-grayscale-default;
|
|
@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
|
|
|
12
12
|
$link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
|
|
13
13
|
$link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
|
|
14
14
|
$link-subtle-label-hover: $mode-color-action-grayscale-active;
|
|
15
|
-
$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
16
15
|
$link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
|
|
17
16
|
$link-subtle-label-default: $mode-color-action-grayscale-default;
|
|
17
|
+
$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
@@ -7,7 +7,9 @@ $message-none: $mode-color-none;
|
|
|
7
7
|
$message-contextual-bg: $mode-color-generic-bg-nought;
|
|
8
8
|
$message-contextual-icon: $mode-color-generic-bg-nought;
|
|
9
9
|
$message-contextual-icon-alt: $mode-color-status-neutral-default;
|
|
10
|
+
$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
|
|
10
11
|
$message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
|
|
12
|
+
$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
|
|
11
13
|
$message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
|
|
12
14
|
$message-contextual-error-bg-default: $mode-color-status-negative-default;
|
|
13
15
|
$message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
|
|
@@ -35,8 +37,6 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
|
|
|
35
37
|
$message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
|
|
36
38
|
$message-global-warning-icon: $mode-color-status-warning-default;
|
|
37
39
|
$message-contextual-txt: $mode-color-status-txt-with-hover-alt;
|
|
38
|
-
$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
|
|
39
|
-
$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
|
|
40
40
|
$message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
|
|
41
41
|
$message-global-label-default: $mode-color-status-txt-with-default-alt;
|
|
42
42
|
$message-global-callout-icon: $mode-color-status-txt-with-default-alt;
|
|
@@ -118,10 +118,10 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
|
|
|
118
118
|
$pill-generic-label-hover: $mode-color-status-txt-with-hover;
|
|
119
119
|
$pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
|
|
120
120
|
$pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
|
|
121
|
+
$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
|
|
122
|
+
$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
|
|
121
123
|
$pill-readonly-bg-default: $mode-color-status-inactive-default;
|
|
122
124
|
$pill-readonly-border-default: $mode-color-status-inactive-default;
|
|
123
125
|
$pill-readonly-label: $mode-color-generic-txt-soft;
|
|
124
126
|
$pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
|
|
125
127
|
$pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
|
|
126
|
-
$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
|
|
127
|
-
$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
|