@esri/calcite-design-tokens 4.0.0-next.15 → 4.0.0-next.17

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 (20) hide show
  1. package/LICENSE.md +1 -1
  2. package/README.md +1 -1
  3. package/dist/css/dark.css +22 -22
  4. package/dist/css/index.css +110 -110
  5. package/dist/css/light.css +22 -22
  6. package/dist/docs/core.json +1 -1
  7. package/dist/docs/dark.json +427 -433
  8. package/dist/docs/global.json +427 -433
  9. package/dist/docs/light.json +427 -433
  10. package/dist/docs/semantic.json +1 -1
  11. package/dist/es6/dark.d.ts +22 -22
  12. package/dist/es6/dark.js +22 -22
  13. package/dist/es6/global.d.ts +28 -28
  14. package/dist/es6/global.js +44 -44
  15. package/dist/es6/light.d.ts +22 -22
  16. package/dist/es6/light.js +22 -22
  17. package/dist/scss/dark.scss +22 -22
  18. package/dist/scss/index.scss +44 -44
  19. package/dist/scss/light.scss +22 -22
  20. package/package.json +2 -2
package/dist/docs/semantic.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1767205241422,
2
+ "timestamp": 1768999069966,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{semantic.border.width.none}",
package/dist/es6/dark.d.ts CHANGED
@@ -19,17 +19,25 @@ export const calciteColorForeground2: string;
19
19
  export const calciteColorForeground3: string;
20
20
  /** deprecated, use --calcite-color-surface-highlight instead */
21
21
  export const calciteColorForegroundCurrent: string;
22
- export const calciteColorTransparent: string;
23
- export const calciteColorTransparentHover: string;
24
- export const calciteColorTransparentPress: string;
25
- export const calciteColorTransparentInverseHover: string;
26
- export const calciteColorTransparentInversePress: string;
27
- export const calciteColorTransparentScrim: string;
28
- export const calciteColorTransparentTint: string;
22
+ export const calciteColorText1: string;
23
+ export const calciteColorText2: string;
24
+ export const calciteColorText3: string;
25
+ export const calciteColorTextInverse: string;
26
+ export const calciteColorTextLink: string;
27
+ export const calciteColorTextHighlight: string;
28
+ export const calciteColorBorder1: string;
29
+ export const calciteColorBorder2: string;
30
+ export const calciteColorBorder3: string;
31
+ export const calciteColorBorderInput: string;
32
+ export const calciteColorBorderGhost: string;
33
+ export const calciteColorBorderWhite: string;
29
34
  export const calciteColorBrand: string;
30
35
  export const calciteColorBrandHover: string;
31
36
  export const calciteColorBrandPress: string;
32
37
  export const calciteColorBrandUnderline: string;
38
+ export const calciteColorInverse: string;
39
+ export const calciteColorInverseHover: string;
40
+ export const calciteColorInversePress: string;
33
41
  export const calciteColorStatusInfo: string;
34
42
  export const calciteColorStatusInfoHover: string;
35
43
  export const calciteColorStatusInfoPress: string;
@@ -42,19 +50,11 @@ export const calciteColorStatusWarningPress: string;
42
50
  export const calciteColorStatusDanger: string;
43
51
  export const calciteColorStatusDangerHover: string;
44
52
  export const calciteColorStatusDangerPress: string;
45
- export const calciteColorInverse: string;
46
- export const calciteColorInverseHover: string;
47
- export const calciteColorInversePress: string;
48
- export const calciteColorText1: string;
49
- export const calciteColorText2: string;
50
- export const calciteColorText3: string;
51
- export const calciteColorTextHighlight: string;
52
- export const calciteColorTextInverse: string;
53
- export const calciteColorTextLink: string;
54
- export const calciteColorBorder1: string;
55
- export const calciteColorBorder2: string;
56
- export const calciteColorBorder3: string;
57
- export const calciteColorBorderInput: string;
58
- export const calciteColorBorderGhost: string;
59
- export const calciteColorBorderWhite: string;
53
+ export const calciteColorTransparent: string;
54
+ export const calciteColorTransparentHover: string;
55
+ export const calciteColorTransparentPress: string;
56
+ export const calciteColorTransparentScrim: string;
57
+ export const calciteColorTransparentTint: string;
58
+ export const calciteColorTransparentInverseHover: string;
59
+ export const calciteColorTransparentInversePress: string;
60
60
  export const calciteColorFocus: string;
package/dist/es6/dark.js CHANGED
@@ -14,17 +14,25 @@ export const calciteColorForeground1 = "#2b2b2b"; // Deprecated, use `--calcite-
14
14
  export const calciteColorForeground2 = "#363636"; // Deprecated, use `--calcite-color-surface-3` instead
15
15
  export const calciteColorForeground3 = "#404040"; // Deprecated, use `--calcite-color-surface-4` instead
16
16
  export const calciteColorForegroundCurrent = "#2b465f"; // deprecated, use --calcite-color-surface-highlight instead
17
- export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
18
- export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
19
- export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
20
- export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
21
- export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
22
- export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
23
- export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
17
+ export const calciteColorText1 = "#ffffff";
18
+ export const calciteColorText2 = "#bfbfbf";
19
+ export const calciteColorText3 = "#9e9e9e";
20
+ export const calciteColorTextInverse = "#141414";
21
+ export const calciteColorTextLink = "#00a0ff";
22
+ export const calciteColorTextHighlight = "#d6efff";
23
+ export const calciteColorBorder1 = "#545454";
24
+ export const calciteColorBorder2 = "#4a4a4a";
25
+ export const calciteColorBorder3 = "#404040";
26
+ export const calciteColorBorderInput = "#757575";
27
+ export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
28
+ export const calciteColorBorderWhite = "#f7f7f7";
24
29
  export const calciteColorBrand = "#009af2";
25
30
  export const calciteColorBrandHover = "#007ac2";
26
31
  export const calciteColorBrandPress = "#00619b";
27
32
  export const calciteColorBrandUnderline = "rgba(0, 160, 255, 0.4)";
33
+ export const calciteColorInverse = "#f7f7f7";
34
+ export const calciteColorInverseHover = "#f2f2f2";
35
+ export const calciteColorInversePress = "#ebebeb";
28
36
  export const calciteColorStatusInfo = "#00a0ff";
29
37
  export const calciteColorStatusInfoHover = "#3db8ff";
30
38
  export const calciteColorStatusInfoPress = "#009af2";
@@ -37,19 +45,11 @@ export const calciteColorStatusWarningPress = "#ff9500";
37
45
  export const calciteColorStatusDanger = "#fe583e";
38
46
  export const calciteColorStatusDangerHover = "#ff0015";
39
47
  export const calciteColorStatusDangerPress = "#d90012";
40
- export const calciteColorInverse = "#f7f7f7";
41
- export const calciteColorInverseHover = "#f2f2f2";
42
- export const calciteColorInversePress = "#ebebeb";
43
- export const calciteColorText1 = "#ffffff";
44
- export const calciteColorText2 = "#bfbfbf";
45
- export const calciteColorText3 = "#9e9e9e";
46
- export const calciteColorTextHighlight = "#d6efff";
47
- export const calciteColorTextInverse = "#141414";
48
- export const calciteColorTextLink = "#00a0ff";
49
- export const calciteColorBorder1 = "#545454";
50
- export const calciteColorBorder2 = "#4a4a4a";
51
- export const calciteColorBorder3 = "#404040";
52
- export const calciteColorBorderInput = "#757575";
53
- export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
54
- export const calciteColorBorderWhite = "#f7f7f7";
48
+ export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
49
+ export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
50
+ export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
51
+ export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
52
+ export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
53
+ export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
54
+ export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
55
55
  export const calciteColorFocus = "#009af2";
package/dist/es6/global.d.ts CHANGED
@@ -20,23 +20,25 @@ export const calciteColorForeground2: { light: string; dark: string };
20
20
  export const calciteColorForeground3: { light: string; dark: string };
21
21
  /** deprecated, use --calcite-color-surface-highlight instead */
22
22
  export const calciteColorForegroundCurrent: { light: string; dark: string };
23
- export const calciteColorTransparent: { light: string; dark: string };
24
- export const calciteColorTransparentHover: { light: string; dark: string };
25
- export const calciteColorTransparentPress: { light: string; dark: string };
26
- export const calciteColorTransparentInverseHover: {
27
- light: string;
28
- dark: string;
29
- };
30
- export const calciteColorTransparentInversePress: {
31
- light: string;
32
- dark: string;
33
- };
34
- export const calciteColorTransparentScrim: { light: string; dark: string };
35
- export const calciteColorTransparentTint: { light: string; dark: string };
23
+ export const calciteColorText1: { light: string; dark: string };
24
+ export const calciteColorText2: { light: string; dark: string };
25
+ export const calciteColorText3: { light: string; dark: string };
26
+ export const calciteColorTextInverse: { light: string; dark: string };
27
+ export const calciteColorTextLink: { light: string; dark: string };
28
+ export const calciteColorTextHighlight: { light: string; dark: string };
29
+ export const calciteColorBorder1: { light: string; dark: string };
30
+ export const calciteColorBorder2: { light: string; dark: string };
31
+ export const calciteColorBorder3: { light: string; dark: string };
32
+ export const calciteColorBorderInput: { light: string; dark: string };
33
+ export const calciteColorBorderGhost: { light: string; dark: string };
34
+ export const calciteColorBorderWhite: { light: string; dark: string };
36
35
  export const calciteColorBrand: { light: string; dark: string };
37
36
  export const calciteColorBrandHover: { light: string; dark: string };
38
37
  export const calciteColorBrandPress: { light: string; dark: string };
39
38
  export const calciteColorBrandUnderline: { light: string; dark: string };
39
+ export const calciteColorInverse: { light: string; dark: string };
40
+ export const calciteColorInverseHover: { light: string; dark: string };
41
+ export const calciteColorInversePress: { light: string; dark: string };
40
42
  export const calciteColorStatusInfo: { light: string; dark: string };
41
43
  export const calciteColorStatusInfoHover: { light: string; dark: string };
42
44
  export const calciteColorStatusInfoPress: { light: string; dark: string };
@@ -49,21 +51,19 @@ export const calciteColorStatusWarningPress: { light: string; dark: string };
49
51
  export const calciteColorStatusDanger: { light: string; dark: string };
50
52
  export const calciteColorStatusDangerHover: { light: string; dark: string };
51
53
  export const calciteColorStatusDangerPress: { light: string; dark: string };
52
- export const calciteColorInverse: { light: string; dark: string };
53
- export const calciteColorInverseHover: { light: string; dark: string };
54
- export const calciteColorInversePress: { light: string; dark: string };
55
- export const calciteColorText1: { light: string; dark: string };
56
- export const calciteColorText2: { light: string; dark: string };
57
- export const calciteColorText3: { light: string; dark: string };
58
- export const calciteColorTextHighlight: { light: string; dark: string };
59
- export const calciteColorTextInverse: { light: string; dark: string };
60
- export const calciteColorTextLink: { light: string; dark: string };
61
- export const calciteColorBorder1: { light: string; dark: string };
62
- export const calciteColorBorder2: { light: string; dark: string };
63
- export const calciteColorBorder3: { light: string; dark: string };
64
- export const calciteColorBorderInput: { light: string; dark: string };
65
- export const calciteColorBorderGhost: { light: string; dark: string };
66
- export const calciteColorBorderWhite: { light: string; dark: string };
54
+ export const calciteColorTransparent: { light: string; dark: string };
55
+ export const calciteColorTransparentHover: { light: string; dark: string };
56
+ export const calciteColorTransparentPress: { light: string; dark: string };
57
+ export const calciteColorTransparentScrim: { light: string; dark: string };
58
+ export const calciteColorTransparentTint: { light: string; dark: string };
59
+ export const calciteColorTransparentInverseHover: {
60
+ light: string;
61
+ dark: string;
62
+ };
63
+ export const calciteColorTransparentInversePress: {
64
+ light: string;
65
+ dark: string;
66
+ };
67
67
  export const calciteColorFocus: { light: string; dark: string };
68
68
  export const calciteBorderWidthNone: string;
69
69
  export const calciteBorderWidthSm: string;
package/dist/es6/global.js CHANGED
@@ -21,34 +21,21 @@ export const calciteColorForegroundCurrent = {
21
21
  light: "#d6efff",
22
22
  dark: "#2b465f",
23
23
  }; // deprecated, use --calcite-color-surface-highlight instead
24
- export const calciteColorTransparent = {
25
- light: "rgba(0, 0, 0, 0)",
26
- dark: "rgba(255, 255, 255, 0)",
27
- };
28
- export const calciteColorTransparentHover = {
29
- light: "rgba(0, 0, 0, 0.04)",
30
- dark: "rgba(255, 255, 255, 0.12)",
31
- };
32
- export const calciteColorTransparentPress = {
33
- light: "rgba(0, 0, 0, 0.08)",
34
- dark: "rgba(255, 255, 255, 0.16)",
35
- };
36
- export const calciteColorTransparentInverseHover = {
37
- light: "rgba(255, 255, 255, 0.12)",
38
- dark: "rgba(0, 0, 0, 0.04)",
39
- };
40
- export const calciteColorTransparentInversePress = {
41
- light: "rgba(255, 255, 255, 0.16)",
42
- dark: "rgba(0, 0, 0, 0.08)",
43
- };
44
- export const calciteColorTransparentScrim = {
45
- light: "rgba(255, 255, 255, 0.85)",
46
- dark: "rgba(0, 0, 0, 0.85)",
47
- };
48
- export const calciteColorTransparentTint = {
49
- light: "rgba(255, 255, 255, 0.8)",
50
- dark: "rgba(43, 43, 43, 0.8)",
24
+ export const calciteColorText1 = { light: "#141414", dark: "#ffffff" };
25
+ export const calciteColorText2 = { light: "#4a4a4a", dark: "#bfbfbf" };
26
+ export const calciteColorText3 = { light: "#6b6b6b", dark: "#9e9e9e" };
27
+ export const calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
28
+ export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
29
+ export const calciteColorTextHighlight = { light: "#004874", dark: "#d6efff" };
30
+ export const calciteColorBorder1 = { light: "#d4d4d4", dark: "#545454" };
31
+ export const calciteColorBorder2 = { light: "#dedede", dark: "#4a4a4a" };
32
+ export const calciteColorBorder3 = { light: "#ebebeb", dark: "#404040" };
33
+ export const calciteColorBorderInput = { light: "#949494", dark: "#757575" };
34
+ export const calciteColorBorderGhost = {
35
+ light: "rgba(0, 0, 0, 0.3)",
36
+ dark: "rgba(117, 117, 117, 0.3)",
51
37
  };
38
+ export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
52
39
  export const calciteColorBrand = { light: "#007ac2", dark: "#009af2" };
53
40
  export const calciteColorBrandHover = { light: "#00619b", dark: "#007ac2" };
54
41
  export const calciteColorBrandPress = { light: "#004874", dark: "#00619b" };
@@ -56,6 +43,9 @@ export const calciteColorBrandUnderline = {
56
43
  light: "rgba(0, 97, 155, 0.4)",
57
44
  dark: "rgba(0, 160, 255, 0.4)",
58
45
  };
46
+ export const calciteColorInverse = { light: "#363636", dark: "#f7f7f7" };
47
+ export const calciteColorInverseHover = { light: "#2b2b2b", dark: "#f2f2f2" };
48
+ export const calciteColorInversePress = { light: "#212121", dark: "#ebebeb" };
59
49
  export const calciteColorStatusInfo = { light: "#00619b", dark: "#00a0ff" };
60
50
  export const calciteColorStatusInfoHover = {
61
51
  light: "#004874",
@@ -92,24 +82,34 @@ export const calciteColorStatusDangerPress = {
92
82
  light: "#7c1d13",
93
83
  dark: "#d90012",
94
84
  };
95
- export const calciteColorInverse = { light: "#363636", dark: "#f7f7f7" };
96
- export const calciteColorInverseHover = { light: "#2b2b2b", dark: "#f2f2f2" };
97
- export const calciteColorInversePress = { light: "#212121", dark: "#ebebeb" };
98
- export const calciteColorText1 = { light: "#141414", dark: "#ffffff" };
99
- export const calciteColorText2 = { light: "#4a4a4a", dark: "#bfbfbf" };
100
- export const calciteColorText3 = { light: "#6b6b6b", dark: "#9e9e9e" };
101
- export const calciteColorTextHighlight = { light: "#004874", dark: "#d6efff" };
102
- export const calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
103
- export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
104
- export const calciteColorBorder1 = { light: "#d4d4d4", dark: "#545454" };
105
- export const calciteColorBorder2 = { light: "#dedede", dark: "#4a4a4a" };
106
- export const calciteColorBorder3 = { light: "#ebebeb", dark: "#404040" };
107
- export const calciteColorBorderInput = { light: "#949494", dark: "#757575" };
108
- export const calciteColorBorderGhost = {
109
- light: "rgba(0, 0, 0, 0.3)",
110
- dark: "rgba(117, 117, 117, 0.3)",
85
+ export const calciteColorTransparent = {
86
+ light: "rgba(0, 0, 0, 0)",
87
+ dark: "rgba(255, 255, 255, 0)",
88
+ };
89
+ export const calciteColorTransparentHover = {
90
+ light: "rgba(0, 0, 0, 0.04)",
91
+ dark: "rgba(255, 255, 255, 0.12)",
92
+ };
93
+ export const calciteColorTransparentPress = {
94
+ light: "rgba(0, 0, 0, 0.08)",
95
+ dark: "rgba(255, 255, 255, 0.16)",
96
+ };
97
+ export const calciteColorTransparentScrim = {
98
+ light: "rgba(255, 255, 255, 0.85)",
99
+ dark: "rgba(0, 0, 0, 0.85)",
100
+ };
101
+ export const calciteColorTransparentTint = {
102
+ light: "rgba(255, 255, 255, 0.8)",
103
+ dark: "rgba(43, 43, 43, 0.8)",
104
+ };
105
+ export const calciteColorTransparentInverseHover = {
106
+ light: "rgba(255, 255, 255, 0.12)",
107
+ dark: "rgba(0, 0, 0, 0.04)",
108
+ };
109
+ export const calciteColorTransparentInversePress = {
110
+ light: "rgba(255, 255, 255, 0.16)",
111
+ dark: "rgba(0, 0, 0, 0.08)",
111
112
  };
112
- export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
113
113
  export const calciteColorFocus = { light: "#007ac2", dark: "#009af2" };
114
114
  export const calciteBorderWidthNone = "0";
115
115
  export const calciteBorderWidthSm = "1px";
package/dist/es6/light.d.ts CHANGED
@@ -19,17 +19,25 @@ export const calciteColorForeground2: string;
19
19
  export const calciteColorForeground3: string;
20
20
  /** deprecated, use --calcite-color-surface-highlight instead */
21
21
  export const calciteColorForegroundCurrent: string;
22
- export const calciteColorTransparent: string;
23
- export const calciteColorTransparentHover: string;
24
- export const calciteColorTransparentPress: string;
25
- export const calciteColorTransparentInverseHover: string;
26
- export const calciteColorTransparentInversePress: string;
27
- export const calciteColorTransparentScrim: string;
28
- export const calciteColorTransparentTint: string;
22
+ export const calciteColorText1: string;
23
+ export const calciteColorText2: string;
24
+ export const calciteColorText3: string;
25
+ export const calciteColorTextInverse: string;
26
+ export const calciteColorTextLink: string;
27
+ export const calciteColorTextHighlight: string;
28
+ export const calciteColorBorder1: string;
29
+ export const calciteColorBorder2: string;
30
+ export const calciteColorBorder3: string;
31
+ export const calciteColorBorderInput: string;
32
+ export const calciteColorBorderGhost: string;
33
+ export const calciteColorBorderWhite: string;
29
34
  export const calciteColorBrand: string;
30
35
  export const calciteColorBrandHover: string;
31
36
  export const calciteColorBrandPress: string;
32
37
  export const calciteColorBrandUnderline: string;
38
+ export const calciteColorInverse: string;
39
+ export const calciteColorInverseHover: string;
40
+ export const calciteColorInversePress: string;
33
41
  export const calciteColorStatusInfo: string;
34
42
  export const calciteColorStatusInfoHover: string;
35
43
  export const calciteColorStatusInfoPress: string;
@@ -42,19 +50,11 @@ export const calciteColorStatusWarningPress: string;
42
50
  export const calciteColorStatusDanger: string;
43
51
  export const calciteColorStatusDangerHover: string;
44
52
  export const calciteColorStatusDangerPress: string;
45
- export const calciteColorInverse: string;
46
- export const calciteColorInverseHover: string;
47
- export const calciteColorInversePress: string;
48
- export const calciteColorText1: string;
49
- export const calciteColorText2: string;
50
- export const calciteColorText3: string;
51
- export const calciteColorTextHighlight: string;
52
- export const calciteColorTextInverse: string;
53
- export const calciteColorTextLink: string;
54
- export const calciteColorBorder1: string;
55
- export const calciteColorBorder2: string;
56
- export const calciteColorBorder3: string;
57
- export const calciteColorBorderInput: string;
58
- export const calciteColorBorderGhost: string;
59
- export const calciteColorBorderWhite: string;
53
+ export const calciteColorTransparent: string;
54
+ export const calciteColorTransparentHover: string;
55
+ export const calciteColorTransparentPress: string;
56
+ export const calciteColorTransparentScrim: string;
57
+ export const calciteColorTransparentTint: string;
58
+ export const calciteColorTransparentInverseHover: string;
59
+ export const calciteColorTransparentInversePress: string;
60
60
  export const calciteColorFocus: string;
package/dist/es6/light.js CHANGED
@@ -14,17 +14,25 @@ export const calciteColorForeground1 = "#ffffff"; // Deprecated, use `--calcite-
14
14
  export const calciteColorForeground2 = "#f2f2f2"; // Deprecated, use `--calcite-color-surface-3` instead
15
15
  export const calciteColorForeground3 = "#ebebeb"; // Deprecated, use `--calcite-color-surface-4` instead
16
16
  export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-surface-highlight instead
17
- export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
18
- export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
19
- export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
20
- export const calciteColorTransparentInverseHover = "rgba(255, 255, 255, 0.12)";
21
- export const calciteColorTransparentInversePress = "rgba(255, 255, 255, 0.16)";
22
- export const calciteColorTransparentScrim = "rgba(255, 255, 255, 0.85)";
23
- export const calciteColorTransparentTint = "rgba(255, 255, 255, 0.8)";
17
+ export const calciteColorText1 = "#141414";
18
+ export const calciteColorText2 = "#4a4a4a";
19
+ export const calciteColorText3 = "#6b6b6b";
20
+ export const calciteColorTextInverse = "#ffffff";
21
+ export const calciteColorTextLink = "#00619b";
22
+ export const calciteColorTextHighlight = "#004874";
23
+ export const calciteColorBorder1 = "#d4d4d4";
24
+ export const calciteColorBorder2 = "#dedede";
25
+ export const calciteColorBorder3 = "#ebebeb";
26
+ export const calciteColorBorderInput = "#949494";
27
+ export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
28
+ export const calciteColorBorderWhite = "#ffffff";
24
29
  export const calciteColorBrand = "#007ac2";
25
30
  export const calciteColorBrandHover = "#00619b";
26
31
  export const calciteColorBrandPress = "#004874";
27
32
  export const calciteColorBrandUnderline = "rgba(0, 97, 155, 0.4)";
33
+ export const calciteColorInverse = "#363636";
34
+ export const calciteColorInverseHover = "#2b2b2b";
35
+ export const calciteColorInversePress = "#212121";
28
36
  export const calciteColorStatusInfo = "#00619b";
29
37
  export const calciteColorStatusInfoHover = "#004874";
30
38
  export const calciteColorStatusInfoPress = "#00304d";
@@ -37,19 +45,11 @@ export const calciteColorStatusWarningPress = "#9a5b10";
37
45
  export const calciteColorStatusDanger = "#d83020";
38
46
  export const calciteColorStatusDangerHover = "#a82b1e";
39
47
  export const calciteColorStatusDangerPress = "#7c1d13";
40
- export const calciteColorInverse = "#363636";
41
- export const calciteColorInverseHover = "#2b2b2b";
42
- export const calciteColorInversePress = "#212121";
43
- export const calciteColorText1 = "#141414";
44
- export const calciteColorText2 = "#4a4a4a";
45
- export const calciteColorText3 = "#6b6b6b";
46
- export const calciteColorTextHighlight = "#004874";
47
- export const calciteColorTextInverse = "#ffffff";
48
- export const calciteColorTextLink = "#00619b";
49
- export const calciteColorBorder1 = "#d4d4d4";
50
- export const calciteColorBorder2 = "#dedede";
51
- export const calciteColorBorder3 = "#ebebeb";
52
- export const calciteColorBorderInput = "#949494";
53
- export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
54
- export const calciteColorBorderWhite = "#ffffff";
48
+ export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
49
+ export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
50
+ export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
51
+ export const calciteColorTransparentScrim = "rgba(255, 255, 255, 0.85)";
52
+ export const calciteColorTransparentTint = "rgba(255, 255, 255, 0.8)";
53
+ export const calciteColorTransparentInverseHover = "rgba(255, 255, 255, 0.12)";
54
+ export const calciteColorTransparentInversePress = "rgba(255, 255, 255, 0.16)";
55
55
  export const calciteColorFocus = "#007ac2";
package/dist/scss/dark.scss CHANGED
@@ -13,17 +13,25 @@ $calcite-color-foreground-1: #2b2b2b; // Deprecated, use `--calcite-color-surfac
13
13
  $calcite-color-foreground-2: #363636; // Deprecated, use `--calcite-color-surface-3` instead
14
14
  $calcite-color-foreground-3: #404040; // Deprecated, use `--calcite-color-surface-4` instead
15
15
  $calcite-color-foreground-current: #2b465f; // deprecated, use --calcite-color-surface-highlight instead
16
- $calcite-color-transparent: rgba(255, 255, 255, 0);
17
- $calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
18
- $calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
19
- $calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
20
- $calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
21
- $calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
22
- $calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
16
+ $calcite-color-text-1: #ffffff;
17
+ $calcite-color-text-2: #bfbfbf;
18
+ $calcite-color-text-3: #9e9e9e;
19
+ $calcite-color-text-inverse: #141414;
20
+ $calcite-color-text-link: #00a0ff;
21
+ $calcite-color-text-highlight: #d6efff;
22
+ $calcite-color-border-1: #545454;
23
+ $calcite-color-border-2: #4a4a4a;
24
+ $calcite-color-border-3: #404040;
25
+ $calcite-color-border-input: #757575;
26
+ $calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
27
+ $calcite-color-border-white: #f7f7f7;
23
28
  $calcite-color-brand: #009af2;
24
29
  $calcite-color-brand-hover: #007ac2;
25
30
  $calcite-color-brand-press: #00619b;
26
31
  $calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
32
+ $calcite-color-inverse: #f7f7f7;
33
+ $calcite-color-inverse-hover: #f2f2f2;
34
+ $calcite-color-inverse-press: #ebebeb;
27
35
  $calcite-color-status-info: #00a0ff;
28
36
  $calcite-color-status-info-hover: #3db8ff;
29
37
  $calcite-color-status-info-press: #009af2;
@@ -36,19 +44,11 @@ $calcite-color-status-warning-press: #ff9500;
36
44
  $calcite-color-status-danger: #fe583e;
37
45
  $calcite-color-status-danger-hover: #ff0015;
38
46
  $calcite-color-status-danger-press: #d90012;
39
- $calcite-color-inverse: #f7f7f7;
40
- $calcite-color-inverse-hover: #f2f2f2;
41
- $calcite-color-inverse-press: #ebebeb;
42
- $calcite-color-text-1: #ffffff;
43
- $calcite-color-text-2: #bfbfbf;
44
- $calcite-color-text-3: #9e9e9e;
45
- $calcite-color-text-highlight: #d6efff;
46
- $calcite-color-text-inverse: #141414;
47
- $calcite-color-text-link: #00a0ff;
48
- $calcite-color-border-1: #545454;
49
- $calcite-color-border-2: #4a4a4a;
50
- $calcite-color-border-3: #404040;
51
- $calcite-color-border-input: #757575;
52
- $calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
53
- $calcite-color-border-white: #f7f7f7;
47
+ $calcite-color-transparent: rgba(255, 255, 255, 0);
48
+ $calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
49
+ $calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
50
+ $calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
51
+ $calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
52
+ $calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
53
+ $calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
54
54
  $calcite-color-focus: $calcite-color-brand;
package/dist/scss/index.scss CHANGED
@@ -7,21 +7,13 @@
7
7
  @use "./breakpoints.scss";
8
8
  @use "./mixins.scss";
9
9
  @mixin calcite-mode-light {
10
- --calcite-color-border-white: #ffffff;
11
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
12
- --calcite-color-border-input: #949494;
13
- --calcite-color-border-3: #ebebeb;
14
- --calcite-color-border-2: #dedede;
15
- --calcite-color-border-1: #d4d4d4;
16
- --calcite-color-text-link: #00619b;
17
- --calcite-color-text-inverse: #ffffff;
18
- --calcite-color-text-highlight: #004874;
19
- --calcite-color-text-3: #6b6b6b;
20
- --calcite-color-text-2: #4a4a4a;
21
- --calcite-color-text-1: #141414;
22
- --calcite-color-inverse-press: #212121;
23
- --calcite-color-inverse-hover: #2b2b2b;
24
- --calcite-color-inverse: #363636;
10
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
11
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
12
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
13
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
14
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
15
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
16
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
25
17
  --calcite-color-status-danger-press: #7c1d13;
26
18
  --calcite-color-status-danger-hover: #a82b1e;
27
19
  --calcite-color-status-danger: #d83020;
@@ -34,17 +26,25 @@
34
26
  --calcite-color-status-info-press: #00304d;
35
27
  --calcite-color-status-info-hover: #004874;
36
28
  --calcite-color-status-info: #00619b;
29
+ --calcite-color-inverse-press: #212121;
30
+ --calcite-color-inverse-hover: #2b2b2b;
31
+ --calcite-color-inverse: #363636;
37
32
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
38
33
  --calcite-color-brand-press: #004874;
39
34
  --calcite-color-brand-hover: #00619b;
40
35
  --calcite-color-brand: #007ac2;
41
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
42
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
43
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
44
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
45
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
46
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
47
- --calcite-color-transparent: rgba(0, 0, 0, 0);
36
+ --calcite-color-border-white: #ffffff;
37
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
38
+ --calcite-color-border-input: #949494;
39
+ --calcite-color-border-3: #ebebeb;
40
+ --calcite-color-border-2: #dedede;
41
+ --calcite-color-border-1: #d4d4d4;
42
+ --calcite-color-text-highlight: #004874;
43
+ --calcite-color-text-link: #00619b;
44
+ --calcite-color-text-inverse: #ffffff;
45
+ --calcite-color-text-3: #6b6b6b;
46
+ --calcite-color-text-2: #4a4a4a;
47
+ --calcite-color-text-1: #141414;
48
48
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
49
49
  --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
50
50
  --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
@@ -59,21 +59,13 @@
59
59
  --calcite-color-focus: var(--calcite-color-brand);
60
60
  }
61
61
  @mixin calcite-mode-dark {
62
- --calcite-color-border-white: #f7f7f7;
63
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
64
- --calcite-color-border-input: #757575;
65
- --calcite-color-border-3: #404040;
66
- --calcite-color-border-2: #4a4a4a;
67
- --calcite-color-border-1: #545454;
68
- --calcite-color-text-link: #00a0ff;
69
- --calcite-color-text-inverse: #141414;
70
- --calcite-color-text-highlight: #d6efff;
71
- --calcite-color-text-3: #9e9e9e;
72
- --calcite-color-text-2: #bfbfbf;
73
- --calcite-color-text-1: #ffffff;
74
- --calcite-color-inverse-press: #ebebeb;
75
- --calcite-color-inverse-hover: #f2f2f2;
76
- --calcite-color-inverse: #f7f7f7;
62
+ --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
63
+ --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
64
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
65
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
66
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
67
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
68
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
77
69
  --calcite-color-status-danger-press: #d90012;
78
70
  --calcite-color-status-danger-hover: #ff0015;
79
71
  --calcite-color-status-danger: #fe583e;
@@ -86,17 +78,25 @@
86
78
  --calcite-color-status-info-press: #009af2;
87
79
  --calcite-color-status-info-hover: #3db8ff;
88
80
  --calcite-color-status-info: #00a0ff;
81
+ --calcite-color-inverse-press: #ebebeb;
82
+ --calcite-color-inverse-hover: #f2f2f2;
83
+ --calcite-color-inverse: #f7f7f7;
89
84
  --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
90
85
  --calcite-color-brand-press: #00619b;
91
86
  --calcite-color-brand-hover: #007ac2;
92
87
  --calcite-color-brand: #009af2;
93
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
94
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
95
- --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
96
- --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
97
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
98
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
99
- --calcite-color-transparent: rgba(255, 255, 255, 0);
88
+ --calcite-color-border-white: #f7f7f7;
89
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
90
+ --calcite-color-border-input: #757575;
91
+ --calcite-color-border-3: #404040;
92
+ --calcite-color-border-2: #4a4a4a;
93
+ --calcite-color-border-1: #545454;
94
+ --calcite-color-text-highlight: #d6efff;
95
+ --calcite-color-text-link: #00a0ff;
96
+ --calcite-color-text-inverse: #141414;
97
+ --calcite-color-text-3: #9e9e9e;
98
+ --calcite-color-text-2: #bfbfbf;
99
+ --calcite-color-text-1: #ffffff;
100
100
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
101
101
  --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
102
102
  --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */