@sage/design-tokens 18.13.0 → 18.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/container.css +1 -0
- package/css/components/focus.css +2 -0
- package/css/light-all.css +3 -0
- package/js/common/components/container.d.ts +3 -0
- package/js/common/components/container.js +1 -0
- package/js/common/components/focus.d.ts +4 -0
- package/js/common/components/focus.js +2 -0
- package/js/es6/components/container.d.ts +2 -0
- package/js/es6/components/container.js +1 -0
- package/js/es6/components/focus.d.ts +36 -0
- package/js/es6/components/focus.js +2 -0
- package/json/components/container.json +2 -1
- package/json/components/focus.json +3 -1
- package/package.json +1 -1
- package/scss/components/container.scss +1 -0
- package/scss/components/focus.scss +2 -0
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--container-size-layout-maxwidth-m: 1200px;
|
|
24
24
|
--container-size-layout-maxwidth-l: 1520px;
|
|
25
25
|
--container-size-layout-maxwidth-xl: 1840px;
|
|
26
|
+
--container-draggable-ghost: 0.5;
|
|
26
27
|
--container-action-bg-footer-activated: var(--mode-color-status-positive-default);
|
|
27
28
|
--container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
|
|
28
29
|
--container-action-border-activated: var(--mode-color-status-positive-default);
|
package/css/components/focus.css
CHANGED
|
@@ -17,4 +17,6 @@
|
|
|
17
17
|
--focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
|
|
18
18
|
--focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
|
|
19
19
|
--focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
|
|
20
|
+
--focus-shadow-inverse-default: 0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border);
|
|
21
|
+
--focus-shadow-inverse-inset: inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt);
|
|
20
22
|
}
|
package/css/light-all.css
CHANGED
|
@@ -955,6 +955,8 @@
|
|
|
955
955
|
--focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
|
|
956
956
|
--focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
|
|
957
957
|
--focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
|
|
958
|
+
--focus-shadow-inverse-default: 0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border);
|
|
959
|
+
--focus-shadow-inverse-inset: inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt);
|
|
958
960
|
--dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);
|
|
959
961
|
--dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);
|
|
960
962
|
--dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);
|
|
@@ -1122,6 +1124,7 @@
|
|
|
1122
1124
|
--container-size-layout-maxwidth-m: 1200px;
|
|
1123
1125
|
--container-size-layout-maxwidth-l: 1520px;
|
|
1124
1126
|
--container-size-layout-maxwidth-xl: 1840px;
|
|
1127
|
+
--container-draggable-ghost: 0.5;
|
|
1125
1128
|
--container-action-bg-footer-activated: var(--mode-color-status-positive-default);
|
|
1126
1129
|
--container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
|
|
1127
1130
|
--container-action-border-activated: var(--mode-color-status-positive-default);
|
|
@@ -81,3 +81,4 @@ module.exports.containerSizeLayoutMaxwidthS = "720px";
|
|
|
81
81
|
module.exports.containerSizeLayoutMaxwidthM = "1200px";
|
|
82
82
|
module.exports.containerSizeLayoutMaxwidthL = "1520px";
|
|
83
83
|
module.exports.containerSizeLayoutMaxwidthXl = "1840px";
|
|
84
|
+
module.exports.containerDraggableGhost = "0.5";
|
|
@@ -12,3 +12,5 @@ module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-with-
|
|
|
12
12
|
module.exports.focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
|
|
13
13
|
module.exports.focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
|
|
14
14
|
module.exports.focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";
|
|
15
|
+
module.exports.focusShadowInverseDefault = "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)";
|
|
16
|
+
module.exports.focusShadowInverseInset = "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)";
|
|
@@ -125,3 +125,5 @@ export const containerSizeLayoutMaxwidthM: string;
|
|
|
125
125
|
export const containerSizeLayoutMaxwidthL: string;
|
|
126
126
|
/** Used on data-heavy views such as dense tables or data grids. Enables wide data views without forcing horizontal scrolling. May be exceeded where tables or data‑dense views require additional horizontal space. */
|
|
127
127
|
export const containerSizeLayoutMaxwidthXl: string;
|
|
128
|
+
/** ghost state for draggable table row, tile or card */
|
|
129
|
+
export const containerDraggableGhost: string;
|
|
@@ -81,3 +81,4 @@ export const containerSizeLayoutMaxwidthS = "720px";
|
|
|
81
81
|
export const containerSizeLayoutMaxwidthM = "1200px";
|
|
82
82
|
export const containerSizeLayoutMaxwidthL = "1520px";
|
|
83
83
|
export const containerSizeLayoutMaxwidthXl = "1840px";
|
|
84
|
+
export const containerDraggableGhost = "0.5";
|
|
@@ -50,3 +50,39 @@ export const focusShadowInset: [
|
|
|
50
50
|
offsetY: string;
|
|
51
51
|
},
|
|
52
52
|
];
|
|
53
|
+
export const focusShadowInverseDefault: [
|
|
54
|
+
{
|
|
55
|
+
blur: string;
|
|
56
|
+
spread: string;
|
|
57
|
+
color: string;
|
|
58
|
+
type: string;
|
|
59
|
+
offsetX: string;
|
|
60
|
+
offsetY: string;
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
blur: string;
|
|
64
|
+
spread: string;
|
|
65
|
+
color: string;
|
|
66
|
+
type: string;
|
|
67
|
+
offsetX: string;
|
|
68
|
+
offsetY: string;
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
export const focusShadowInverseInset: [
|
|
72
|
+
{
|
|
73
|
+
blur: string;
|
|
74
|
+
spread: string;
|
|
75
|
+
color: string;
|
|
76
|
+
type: string;
|
|
77
|
+
offsetX: string;
|
|
78
|
+
offsetY: string;
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
blur: string;
|
|
82
|
+
spread: string;
|
|
83
|
+
color: string;
|
|
84
|
+
type: string;
|
|
85
|
+
offsetX: string;
|
|
86
|
+
offsetY: string;
|
|
87
|
+
},
|
|
88
|
+
];
|
|
@@ -12,3 +12,5 @@ export const focusInverseBorder = "var(--mode-color-action-focus-inverse-with-de
|
|
|
12
12
|
export const focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
|
|
13
13
|
export const focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
|
|
14
14
|
export const focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";
|
|
15
|
+
export const focusShadowInverseDefault = "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)";
|
|
16
|
+
export const focusShadowInverseInset = "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)";
|
|
@@ -77,5 +77,6 @@
|
|
|
77
77
|
"containerSizeLayoutMaxwidthS": "720px",
|
|
78
78
|
"containerSizeLayoutMaxwidthM": "1200px",
|
|
79
79
|
"containerSizeLayoutMaxwidthL": "1520px",
|
|
80
|
-
"containerSizeLayoutMaxwidthXl": "1840px"
|
|
80
|
+
"containerSizeLayoutMaxwidthXl": "1840px",
|
|
81
|
+
"containerDraggableGhost": "0.5"
|
|
81
82
|
}
|
|
@@ -8,5 +8,7 @@
|
|
|
8
8
|
"focusInverseBorder": "var(--mode-color-action-focus-inverse-with-default)",
|
|
9
9
|
"focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)",
|
|
10
10
|
"focusShadowDefault": "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)",
|
|
11
|
-
"focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)"
|
|
11
|
+
"focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)",
|
|
12
|
+
"focusShadowInverseDefault": "0 0 0 2px var(--focus-inverse-borderalt), 0 0 0 4px var(--focus-inverse-border)",
|
|
13
|
+
"focusShadowInverseInset": "inset 0 0 0 2px var(--focus-inverse-border), inset 0 0 0 4px var(--focus-inverse-borderalt)"
|
|
12
14
|
}
|
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": "18.
|
|
9
|
+
"version": "18.14.0",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
@@ -19,6 +19,7 @@ $container-size-layout-maxwidth-s: 720px;
|
|
|
19
19
|
$container-size-layout-maxwidth-m: 1200px;
|
|
20
20
|
$container-size-layout-maxwidth-l: 1520px;
|
|
21
21
|
$container-size-layout-maxwidth-xl: 1840px;
|
|
22
|
+
$container-draggable-ghost: 0.5;
|
|
22
23
|
$container-action-bg-footer-activated: $mode-color-status-positive-default;
|
|
23
24
|
$container-action-bg-footer-active: $mode-color-action-grayscale-active;
|
|
24
25
|
$container-action-border-activated: $mode-color-status-positive-default;
|
|
@@ -13,3 +13,5 @@ $focus-inverse-border: $mode-color-action-focus-inverse-with-default;
|
|
|
13
13
|
$focus-inverse-label: $mode-color-action-focus-inverse-txt;
|
|
14
14
|
$focus-shadow-default: 0 0 0 2px $focus-borderalt, 0 0 0 4px $focus-border;
|
|
15
15
|
$focus-shadow-inset: inset 0 0 0 2px $focus-border, inset 0 0 0 4px $focus-borderalt;
|
|
16
|
+
$focus-shadow-inverse-default: 0 0 0 2px $focus-inverse-borderalt, 0 0 0 4px $focus-inverse-border;
|
|
17
|
+
$focus-shadow-inverse-inset: inset 0 0 0 2px $focus-inverse-border, inset 0 0 0 4px $focus-inverse-borderalt;
|