@hashicorp/design-system-tokens 0.5.0 → 0.5.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.
Files changed (7) hide show
  1. package/devdot/css/helpers/color.css +48 -0
  2. package/devdot/css/tokens.css +10 -10
  3. package/docs/devdot/tokens.json +18 -18
  4. package/docs/products/tokens.json +18 -18
  5. package/package.json +1 -1
  6. package/products/css/helpers/color.css +47 -0
  7. package/products/css/tokens.css +10 -10
package/devdot/css/helpers/color.css ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 04 Mar 2022 17:16:48 GMT
4
+ */
5
+
6
+ .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
7
+ .hds-border-faint { border: 1px solid var(--token-color-border-faint); }
8
+ .hds-border-strong { border: 1px solid var(--token-color-border-strong); }
9
+ .hds-border-action { border: 1px solid var(--token-color-border-action); }
10
+ .hds-border-highlight { border: 1px solid var(--token-color-border-highlight); }
11
+ .hds-border-success { border: 1px solid var(--token-color-border-success); }
12
+ .hds-border-warning { border: 1px solid var(--token-color-border-warning); }
13
+ .hds-border-critical { border: 1px solid var(--token-color-border-critical); }
14
+ .hds-foreground-strong { color: var(--token-color-foreground-strong); }
15
+ .hds-foreground-primary { color: var(--token-color-foreground-primary); }
16
+ .hds-foreground-faint { color: var(--token-color-foreground-faint); }
17
+ .hds-foreground-high-contrast { color: var(--token-color-foreground-high-contrast); }
18
+ .hds-foreground-disabled { color: var(--token-color-foreground-disabled); }
19
+ .hds-foreground-action { color: var(--token-color-foreground-action); }
20
+ .hds-foreground-action-hover { color: var(--token-color-foreground-action-hover); }
21
+ .hds-foreground-action-active { color: var(--token-color-foreground-action-active); }
22
+ .hds-foreground-highlight { color: var(--token-color-foreground-highlight); }
23
+ .hds-foreground-highlight-on-surface { color: var(--token-color-foreground-highlight-on-surface); }
24
+ .hds-foreground-highlight-high-contrast { color: var(--token-color-foreground-highlight-high-contrast); }
25
+ .hds-foreground-success { color: var(--token-color-foreground-success); }
26
+ .hds-foreground-success-on-surface { color: var(--token-color-foreground-success-on-surface); }
27
+ .hds-foreground-success-high-contrast { color: var(--token-color-foreground-success-high-contrast); }
28
+ .hds-foreground-warning { color: var(--token-color-foreground-warning); }
29
+ .hds-foreground-warning-on-surface { color: var(--token-color-foreground-warning-on-surface); }
30
+ .hds-foreground-warning-high-contrast { color: var(--token-color-foreground-warning-high-contrast); }
31
+ .hds-foreground-critical { color: var(--token-color-foreground-critical); }
32
+ .hds-foreground-critical-on-surface { color: var(--token-color-foreground-critical-on-surface); }
33
+ .hds-foreground-critical-high-contrast { color: var(--token-color-foreground-critical-high-contrast); }
34
+ .hds-foreground-action-visited { color: var(--token-color-foreground-action-visited); }
35
+ .hds-page-primary { background-color: var(--token-color-page-primary); }
36
+ .hds-page-faint { background-color: var(--token-color-page-faint); }
37
+ .hds-surface-primary { background-color: var(--token-color-surface-primary); }
38
+ .hds-surface-faint { background-color: var(--token-color-surface-faint); }
39
+ .hds-surface-strong { background-color: var(--token-color-surface-strong); }
40
+ .hds-surface-interactive { background-color: var(--token-color-surface-interactive); }
41
+ .hds-surface-interactive-hover { background-color: var(--token-color-surface-interactive-hover); }
42
+ .hds-surface-interactive-active { background-color: var(--token-color-surface-interactive-active); }
43
+ .hds-surface-interactive-disabled { background-color: var(--token-color-surface-interactive-disabled); }
44
+ .hds-surface-action { background-color: var(--token-color-surface-action); }
45
+ .hds-surface-highlight { background-color: var(--token-color-surface-highlight); }
46
+ .hds-surface-success { background-color: var(--token-color-surface-success); }
47
+ .hds-surface-warning { background-color: var(--token-color-surface-warning); }
48
+ .hds-surface-critical { background-color: var(--token-color-surface-critical); }
package/devdot/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 04 Mar 2022 17:12:28 GMT
3
+ * Generated on Mon, 07 Mar 2022 11:14:41 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -52,7 +52,7 @@
52
52
  --token-color-action-background-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
53
53
  --token-color-action-background-hover: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
54
54
  --token-color-action-background-active: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
55
- --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-background-action' */
55
+ --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-surface-action' */
56
56
  --token-color-action-border-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
57
57
  --token-color-action-border-on-primary: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
58
58
  --token-color-action-border-on-hover: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -63,7 +63,7 @@
63
63
  --token-color-highlight-background-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
64
64
  --token-color-highlight-background-hover: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
65
65
  --token-color-highlight-background-active: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
66
- --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-background-highlight' */
66
+ --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-surface-highlight' */
67
67
  --token-color-highlight-border-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
68
68
  --token-color-highlight-border-on-primary: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
69
69
  --token-color-highlight-border-on-hover: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -74,7 +74,7 @@
74
74
  --token-color-success-background-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
75
75
  --token-color-success-background-hover: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
76
76
  --token-color-success-background-active: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
77
- --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-background-success' */
77
+ --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-surface-success' */
78
78
  --token-color-success-border-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
79
79
  --token-color-success-border-on-primary: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
80
80
  --token-color-success-border-on-hover: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -85,7 +85,7 @@
85
85
  --token-color-warning-background-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
86
86
  --token-color-warning-background-hover: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
87
87
  --token-color-warning-background-active: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
88
- --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-background-warning' */
88
+ --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-surface-warning' */
89
89
  --token-color-warning-border-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
90
90
  --token-color-warning-border-on-primary: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
91
91
  --token-color-warning-border-on-hover: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -96,7 +96,7 @@
96
96
  --token-color-critical-background-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
97
97
  --token-color-critical-background-hover: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
98
98
  --token-color-critical-background-active: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
99
- --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-background-critical' */
99
+ --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-surface-critical' */
100
100
  --token-color-critical-border-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
101
101
  --token-color-critical-border-on-primary: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
102
102
  --token-color-critical-border-on-hover: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -134,11 +134,11 @@
134
134
  --token-color-foreground-critical-on-surface: #c00005;
135
135
  --token-color-foreground-critical-high-contrast: #51130a;
136
136
  --token-color-foreground-action-visited: #a737ff; /* This extra color is unique for the DevDot platform (the 'visited' state of a link is not differentiated in the products applications). */
137
- --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-primary' */
138
- --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-secondary' */
137
+ --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-strong' */
138
+ --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-primary' */
139
139
  --token-color-neutral-foreground-faint: #656a76; /* deprecated: replace with 'token-color-foreground-faint' */
140
- --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-background-primary' */
141
- --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-background-secondary' */
140
+ --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
141
+ --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-surface-faint' */
142
142
  --token-color-neutral-background-base: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
143
143
  --token-color-neutral-border-primary: #656a7633; /* deprecated: replace with 'token-color-border-primary' */
144
144
  --token-color-neutral-border-faint: #656a761a; /* deprecated: replace with 'token-color-border-faint' */
package/docs/devdot/tokens.json CHANGED
@@ -1041,12 +1041,12 @@
1041
1041
  "value": "#f2f8ff",
1042
1042
  "type": "color",
1043
1043
  "deprecated": true,
1044
- "comment": "deprecated: replace with 'color-background-action'",
1044
+ "comment": "deprecated: replace with 'color-surface-action'",
1045
1045
  "original": {
1046
1046
  "value": "{color.palette.blue-50.value}",
1047
1047
  "type": "color",
1048
1048
  "deprecated": true,
1049
- "comment": "deprecated: replace with 'color-background-action'"
1049
+ "comment": "deprecated: replace with 'color-surface-action'"
1050
1050
  },
1051
1051
  "name": "token-color-action-background-faint",
1052
1052
  "attributes": {
@@ -1316,12 +1316,12 @@
1316
1316
  "value": "#f9f2ff",
1317
1317
  "type": "color",
1318
1318
  "deprecated": true,
1319
- "comment": "deprecated: replace with 'color-background-highlight'",
1319
+ "comment": "deprecated: replace with 'color-surface-highlight'",
1320
1320
  "original": {
1321
1321
  "value": "{color.palette.purple-50.value}",
1322
1322
  "type": "color",
1323
1323
  "deprecated": true,
1324
- "comment": "deprecated: replace with 'color-background-highlight'"
1324
+ "comment": "deprecated: replace with 'color-surface-highlight'"
1325
1325
  },
1326
1326
  "name": "token-color-highlight-background-faint",
1327
1327
  "attributes": {
@@ -1591,12 +1591,12 @@
1591
1591
  "value": "#f2fbf6",
1592
1592
  "type": "color",
1593
1593
  "deprecated": true,
1594
- "comment": "deprecated: replace with 'color-background-success'",
1594
+ "comment": "deprecated: replace with 'color-surface-success'",
1595
1595
  "original": {
1596
1596
  "value": "{color.palette.green-50.value}",
1597
1597
  "type": "color",
1598
1598
  "deprecated": true,
1599
- "comment": "deprecated: replace with 'color-background-success'"
1599
+ "comment": "deprecated: replace with 'color-surface-success'"
1600
1600
  },
1601
1601
  "name": "token-color-success-background-faint",
1602
1602
  "attributes": {
@@ -1866,12 +1866,12 @@
1866
1866
  "value": "#fff9e8",
1867
1867
  "type": "color",
1868
1868
  "deprecated": true,
1869
- "comment": "deprecated: replace with 'color-background-warning'",
1869
+ "comment": "deprecated: replace with 'color-surface-warning'",
1870
1870
  "original": {
1871
1871
  "value": "{color.palette.amber-50.value}",
1872
1872
  "type": "color",
1873
1873
  "deprecated": true,
1874
- "comment": "deprecated: replace with 'color-background-warning'"
1874
+ "comment": "deprecated: replace with 'color-surface-warning'"
1875
1875
  },
1876
1876
  "name": "token-color-warning-background-faint",
1877
1877
  "attributes": {
@@ -2141,12 +2141,12 @@
2141
2141
  "value": "#fff5f5",
2142
2142
  "type": "color",
2143
2143
  "deprecated": true,
2144
- "comment": "deprecated: replace with 'color-background-critical'",
2144
+ "comment": "deprecated: replace with 'color-surface-critical'",
2145
2145
  "original": {
2146
2146
  "value": "{color.palette.red-50.value}",
2147
2147
  "type": "color",
2148
2148
  "deprecated": true,
2149
- "comment": "deprecated: replace with 'color-background-critical'"
2149
+ "comment": "deprecated: replace with 'color-surface-critical'"
2150
2150
  },
2151
2151
  "name": "token-color-critical-background-faint",
2152
2152
  "attributes": {
@@ -2973,12 +2973,12 @@
2973
2973
  "value": "#0c0c0e",
2974
2974
  "type": "color",
2975
2975
  "deprecated": true,
2976
- "comment": "deprecated: replace with 'token-color-foreground-primary'",
2976
+ "comment": "deprecated: replace with 'token-color-foreground-strong'",
2977
2977
  "original": {
2978
2978
  "value": "{color.palette.neutral-700.value}",
2979
2979
  "type": "color",
2980
2980
  "deprecated": true,
2981
- "comment": "deprecated: replace with 'token-color-foreground-primary'"
2981
+ "comment": "deprecated: replace with 'token-color-foreground-strong'"
2982
2982
  },
2983
2983
  "name": "token-color-neutral-foreground-primary",
2984
2984
  "attributes": {
@@ -2998,12 +2998,12 @@
2998
2998
  "value": "#3b3d45",
2999
2999
  "type": "color",
3000
3000
  "deprecated": true,
3001
- "comment": "deprecated: replace with 'token-color-foreground-secondary'",
3001
+ "comment": "deprecated: replace with 'token-color-foreground-primary'",
3002
3002
  "original": {
3003
3003
  "value": "{color.palette.neutral-600.value}",
3004
3004
  "type": "color",
3005
3005
  "deprecated": true,
3006
- "comment": "deprecated: replace with 'token-color-foreground-secondary'"
3006
+ "comment": "deprecated: replace with 'token-color-foreground-primary'"
3007
3007
  },
3008
3008
  "name": "token-color-neutral-foreground-secondary",
3009
3009
  "attributes": {
@@ -3048,12 +3048,12 @@
3048
3048
  "value": "#ffffff",
3049
3049
  "type": "color",
3050
3050
  "deprecated": true,
3051
- "comment": "deprecated: replace with 'token-color-background-primary'",
3051
+ "comment": "deprecated: replace with 'token-color-surface-primary'",
3052
3052
  "original": {
3053
3053
  "value": "{color.palette.neutral-0.value}",
3054
3054
  "type": "color",
3055
3055
  "deprecated": true,
3056
- "comment": "deprecated: replace with 'token-color-background-primary'"
3056
+ "comment": "deprecated: replace with 'token-color-surface-primary'"
3057
3057
  },
3058
3058
  "name": "token-color-neutral-background-primary",
3059
3059
  "attributes": {
@@ -3073,12 +3073,12 @@
3073
3073
  "value": "#fafafa",
3074
3074
  "type": "color",
3075
3075
  "deprecated": true,
3076
- "comment": "deprecated: replace with 'token-color-background-secondary'",
3076
+ "comment": "deprecated: replace with 'token-color-surface-faint'",
3077
3077
  "original": {
3078
3078
  "value": "{color.palette.neutral-50.value}",
3079
3079
  "type": "color",
3080
3080
  "deprecated": true,
3081
- "comment": "deprecated: replace with 'token-color-background-secondary'"
3081
+ "comment": "deprecated: replace with 'token-color-surface-faint'"
3082
3082
  },
3083
3083
  "name": "token-color-neutral-background-secondary",
3084
3084
  "attributes": {
package/docs/products/tokens.json CHANGED
@@ -1041,12 +1041,12 @@
1041
1041
  "value": "#f2f8ff",
1042
1042
  "type": "color",
1043
1043
  "deprecated": true,
1044
- "comment": "deprecated: replace with 'color-background-action'",
1044
+ "comment": "deprecated: replace with 'color-surface-action'",
1045
1045
  "original": {
1046
1046
  "value": "{color.palette.blue-50.value}",
1047
1047
  "type": "color",
1048
1048
  "deprecated": true,
1049
- "comment": "deprecated: replace with 'color-background-action'"
1049
+ "comment": "deprecated: replace with 'color-surface-action'"
1050
1050
  },
1051
1051
  "name": "token-color-action-background-faint",
1052
1052
  "attributes": {
@@ -1316,12 +1316,12 @@
1316
1316
  "value": "#f9f2ff",
1317
1317
  "type": "color",
1318
1318
  "deprecated": true,
1319
- "comment": "deprecated: replace with 'color-background-highlight'",
1319
+ "comment": "deprecated: replace with 'color-surface-highlight'",
1320
1320
  "original": {
1321
1321
  "value": "{color.palette.purple-50.value}",
1322
1322
  "type": "color",
1323
1323
  "deprecated": true,
1324
- "comment": "deprecated: replace with 'color-background-highlight'"
1324
+ "comment": "deprecated: replace with 'color-surface-highlight'"
1325
1325
  },
1326
1326
  "name": "token-color-highlight-background-faint",
1327
1327
  "attributes": {
@@ -1591,12 +1591,12 @@
1591
1591
  "value": "#f2fbf6",
1592
1592
  "type": "color",
1593
1593
  "deprecated": true,
1594
- "comment": "deprecated: replace with 'color-background-success'",
1594
+ "comment": "deprecated: replace with 'color-surface-success'",
1595
1595
  "original": {
1596
1596
  "value": "{color.palette.green-50.value}",
1597
1597
  "type": "color",
1598
1598
  "deprecated": true,
1599
- "comment": "deprecated: replace with 'color-background-success'"
1599
+ "comment": "deprecated: replace with 'color-surface-success'"
1600
1600
  },
1601
1601
  "name": "token-color-success-background-faint",
1602
1602
  "attributes": {
@@ -1866,12 +1866,12 @@
1866
1866
  "value": "#fff9e8",
1867
1867
  "type": "color",
1868
1868
  "deprecated": true,
1869
- "comment": "deprecated: replace with 'color-background-warning'",
1869
+ "comment": "deprecated: replace with 'color-surface-warning'",
1870
1870
  "original": {
1871
1871
  "value": "{color.palette.amber-50.value}",
1872
1872
  "type": "color",
1873
1873
  "deprecated": true,
1874
- "comment": "deprecated: replace with 'color-background-warning'"
1874
+ "comment": "deprecated: replace with 'color-surface-warning'"
1875
1875
  },
1876
1876
  "name": "token-color-warning-background-faint",
1877
1877
  "attributes": {
@@ -2141,12 +2141,12 @@
2141
2141
  "value": "#fff5f5",
2142
2142
  "type": "color",
2143
2143
  "deprecated": true,
2144
- "comment": "deprecated: replace with 'color-background-critical'",
2144
+ "comment": "deprecated: replace with 'color-surface-critical'",
2145
2145
  "original": {
2146
2146
  "value": "{color.palette.red-50.value}",
2147
2147
  "type": "color",
2148
2148
  "deprecated": true,
2149
- "comment": "deprecated: replace with 'color-background-critical'"
2149
+ "comment": "deprecated: replace with 'color-surface-critical'"
2150
2150
  },
2151
2151
  "name": "token-color-critical-background-faint",
2152
2152
  "attributes": {
@@ -2950,12 +2950,12 @@
2950
2950
  "value": "#0c0c0e",
2951
2951
  "type": "color",
2952
2952
  "deprecated": true,
2953
- "comment": "deprecated: replace with 'token-color-foreground-primary'",
2953
+ "comment": "deprecated: replace with 'token-color-foreground-strong'",
2954
2954
  "original": {
2955
2955
  "value": "{color.palette.neutral-700.value}",
2956
2956
  "type": "color",
2957
2957
  "deprecated": true,
2958
- "comment": "deprecated: replace with 'token-color-foreground-primary'"
2958
+ "comment": "deprecated: replace with 'token-color-foreground-strong'"
2959
2959
  },
2960
2960
  "name": "token-color-neutral-foreground-primary",
2961
2961
  "attributes": {
@@ -2975,12 +2975,12 @@
2975
2975
  "value": "#3b3d45",
2976
2976
  "type": "color",
2977
2977
  "deprecated": true,
2978
- "comment": "deprecated: replace with 'token-color-foreground-secondary'",
2978
+ "comment": "deprecated: replace with 'token-color-foreground-primary'",
2979
2979
  "original": {
2980
2980
  "value": "{color.palette.neutral-600.value}",
2981
2981
  "type": "color",
2982
2982
  "deprecated": true,
2983
- "comment": "deprecated: replace with 'token-color-foreground-secondary'"
2983
+ "comment": "deprecated: replace with 'token-color-foreground-primary'"
2984
2984
  },
2985
2985
  "name": "token-color-neutral-foreground-secondary",
2986
2986
  "attributes": {
@@ -3025,12 +3025,12 @@
3025
3025
  "value": "#ffffff",
3026
3026
  "type": "color",
3027
3027
  "deprecated": true,
3028
- "comment": "deprecated: replace with 'token-color-background-primary'",
3028
+ "comment": "deprecated: replace with 'token-color-surface-primary'",
3029
3029
  "original": {
3030
3030
  "value": "{color.palette.neutral-0.value}",
3031
3031
  "type": "color",
3032
3032
  "deprecated": true,
3033
- "comment": "deprecated: replace with 'token-color-background-primary'"
3033
+ "comment": "deprecated: replace with 'token-color-surface-primary'"
3034
3034
  },
3035
3035
  "name": "token-color-neutral-background-primary",
3036
3036
  "attributes": {
@@ -3050,12 +3050,12 @@
3050
3050
  "value": "#fafafa",
3051
3051
  "type": "color",
3052
3052
  "deprecated": true,
3053
- "comment": "deprecated: replace with 'token-color-background-secondary'",
3053
+ "comment": "deprecated: replace with 'token-color-surface-faint'",
3054
3054
  "original": {
3055
3055
  "value": "{color.palette.neutral-50.value}",
3056
3056
  "type": "color",
3057
3057
  "deprecated": true,
3058
- "comment": "deprecated: replace with 'token-color-background-secondary'"
3058
+ "comment": "deprecated: replace with 'token-color-surface-faint'"
3059
3059
  },
3060
3060
  "name": "token-color-neutral-background-secondary",
3061
3061
  "attributes": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-tokens",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "description": "HashiCorp Design Tokens",
5
5
  "keywords": [
6
6
  "hashicorp",
package/products/css/helpers/color.css ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 04 Mar 2022 17:16:48 GMT
4
+ */
5
+
6
+ .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
7
+ .hds-border-faint { border: 1px solid var(--token-color-border-faint); }
8
+ .hds-border-strong { border: 1px solid var(--token-color-border-strong); }
9
+ .hds-border-action { border: 1px solid var(--token-color-border-action); }
10
+ .hds-border-highlight { border: 1px solid var(--token-color-border-highlight); }
11
+ .hds-border-success { border: 1px solid var(--token-color-border-success); }
12
+ .hds-border-warning { border: 1px solid var(--token-color-border-warning); }
13
+ .hds-border-critical { border: 1px solid var(--token-color-border-critical); }
14
+ .hds-foreground-strong { color: var(--token-color-foreground-strong); }
15
+ .hds-foreground-primary { color: var(--token-color-foreground-primary); }
16
+ .hds-foreground-faint { color: var(--token-color-foreground-faint); }
17
+ .hds-foreground-high-contrast { color: var(--token-color-foreground-high-contrast); }
18
+ .hds-foreground-disabled { color: var(--token-color-foreground-disabled); }
19
+ .hds-foreground-action { color: var(--token-color-foreground-action); }
20
+ .hds-foreground-action-hover { color: var(--token-color-foreground-action-hover); }
21
+ .hds-foreground-action-active { color: var(--token-color-foreground-action-active); }
22
+ .hds-foreground-highlight { color: var(--token-color-foreground-highlight); }
23
+ .hds-foreground-highlight-on-surface { color: var(--token-color-foreground-highlight-on-surface); }
24
+ .hds-foreground-highlight-high-contrast { color: var(--token-color-foreground-highlight-high-contrast); }
25
+ .hds-foreground-success { color: var(--token-color-foreground-success); }
26
+ .hds-foreground-success-on-surface { color: var(--token-color-foreground-success-on-surface); }
27
+ .hds-foreground-success-high-contrast { color: var(--token-color-foreground-success-high-contrast); }
28
+ .hds-foreground-warning { color: var(--token-color-foreground-warning); }
29
+ .hds-foreground-warning-on-surface { color: var(--token-color-foreground-warning-on-surface); }
30
+ .hds-foreground-warning-high-contrast { color: var(--token-color-foreground-warning-high-contrast); }
31
+ .hds-foreground-critical { color: var(--token-color-foreground-critical); }
32
+ .hds-foreground-critical-on-surface { color: var(--token-color-foreground-critical-on-surface); }
33
+ .hds-foreground-critical-high-contrast { color: var(--token-color-foreground-critical-high-contrast); }
34
+ .hds-page-primary { background-color: var(--token-color-page-primary); }
35
+ .hds-page-faint { background-color: var(--token-color-page-faint); }
36
+ .hds-surface-primary { background-color: var(--token-color-surface-primary); }
37
+ .hds-surface-faint { background-color: var(--token-color-surface-faint); }
38
+ .hds-surface-strong { background-color: var(--token-color-surface-strong); }
39
+ .hds-surface-interactive { background-color: var(--token-color-surface-interactive); }
40
+ .hds-surface-interactive-hover { background-color: var(--token-color-surface-interactive-hover); }
41
+ .hds-surface-interactive-active { background-color: var(--token-color-surface-interactive-active); }
42
+ .hds-surface-interactive-disabled { background-color: var(--token-color-surface-interactive-disabled); }
43
+ .hds-surface-action { background-color: var(--token-color-surface-action); }
44
+ .hds-surface-highlight { background-color: var(--token-color-surface-highlight); }
45
+ .hds-surface-success { background-color: var(--token-color-surface-success); }
46
+ .hds-surface-warning { background-color: var(--token-color-surface-warning); }
47
+ .hds-surface-critical { background-color: var(--token-color-surface-critical); }
package/products/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 04 Mar 2022 17:12:27 GMT
3
+ * Generated on Mon, 07 Mar 2022 11:14:41 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -52,7 +52,7 @@
52
52
  --token-color-action-background-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
53
53
  --token-color-action-background-hover: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
54
54
  --token-color-action-background-active: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
55
- --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-background-action' */
55
+ --token-color-action-background-faint: #f2f8ff; /* deprecated: replace with 'color-surface-action' */
56
56
  --token-color-action-border-primary: #1060ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
57
57
  --token-color-action-border-on-primary: #0c56e9; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
58
58
  --token-color-action-border-on-hover: #0046d1; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -63,7 +63,7 @@
63
63
  --token-color-highlight-background-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
64
64
  --token-color-highlight-background-hover: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
65
65
  --token-color-highlight-background-active: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
66
- --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-background-highlight' */
66
+ --token-color-highlight-background-faint: #f9f2ff; /* deprecated: replace with 'color-surface-highlight' */
67
67
  --token-color-highlight-border-primary: #a737ff; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
68
68
  --token-color-highlight-border-on-primary: #911ced; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
69
69
  --token-color-highlight-border-on-hover: #7b00db; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -74,7 +74,7 @@
74
74
  --token-color-success-background-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
75
75
  --token-color-success-background-hover: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
76
76
  --token-color-success-background-active: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
77
- --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-background-success' */
77
+ --token-color-success-background-faint: #f2fbf6; /* deprecated: replace with 'color-surface-success' */
78
78
  --token-color-success-border-primary: #008a22; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
79
79
  --token-color-success-border-on-primary: #00781e; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
80
80
  --token-color-success-border-on-hover: #006619; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -85,7 +85,7 @@
85
85
  --token-color-warning-background-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
86
86
  --token-color-warning-background-hover: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
87
87
  --token-color-warning-background-active: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
88
- --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-background-warning' */
88
+ --token-color-warning-background-faint: #fff9e8; /* deprecated: replace with 'color-surface-warning' */
89
89
  --token-color-warning-border-primary: #bb5a00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
90
90
  --token-color-warning-border-on-primary: #9e4b00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
91
91
  --token-color-warning-border-on-hover: #803d00; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -96,7 +96,7 @@
96
96
  --token-color-critical-background-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
97
97
  --token-color-critical-background-hover: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
98
98
  --token-color-critical-background-active: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
99
- --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-background-critical' */
99
+ --token-color-critical-background-faint: #fff5f5; /* deprecated: replace with 'color-surface-critical' */
100
100
  --token-color-critical-border-primary: #e52228; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
101
101
  --token-color-critical-border-on-primary: #c00005; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
102
102
  --token-color-critical-border-on-hover: #940004; /* deprecated: please speak with the HDS team to decide which color to use as alternative */
@@ -133,11 +133,11 @@
133
133
  --token-color-foreground-critical: #e52228;
134
134
  --token-color-foreground-critical-on-surface: #c00005;
135
135
  --token-color-foreground-critical-high-contrast: #51130a;
136
- --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-primary' */
137
- --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-secondary' */
136
+ --token-color-neutral-foreground-primary: #0c0c0e; /* deprecated: replace with 'token-color-foreground-strong' */
137
+ --token-color-neutral-foreground-secondary: #3b3d45; /* deprecated: replace with 'token-color-foreground-primary' */
138
138
  --token-color-neutral-foreground-faint: #656a76; /* deprecated: replace with 'token-color-foreground-faint' */
139
- --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-background-primary' */
140
- --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-background-secondary' */
139
+ --token-color-neutral-background-primary: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
140
+ --token-color-neutral-background-secondary: #fafafa; /* deprecated: replace with 'token-color-surface-faint' */
141
141
  --token-color-neutral-background-base: #ffffff; /* deprecated: replace with 'token-color-surface-primary' */
142
142
  --token-color-neutral-border-primary: #656a7633; /* deprecated: replace with 'token-color-border-primary' */
143
143
  --token-color-neutral-border-faint: #656a761a; /* deprecated: replace with 'token-color-border-faint' */