@esri/calcite-design-tokens 4.0.0-next.11 → 4.0.0-next.13

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 (19) hide show
  1. package/dist/css/dark.css +9 -5
  2. package/dist/css/index.css +50 -25
  3. package/dist/css/light.css +9 -5
  4. package/dist/docs/core.json +1 -1
  5. package/dist/docs/dark.json +180 -33
  6. package/dist/docs/global.json +180 -33
  7. package/dist/docs/light.json +180 -33
  8. package/dist/docs/semantic.json +1 -1
  9. package/dist/es6/dark.d.ts +9 -1
  10. package/dist/es6/dark.js +9 -5
  11. package/dist/es6/global.d.ts +9 -1
  12. package/dist/es6/global.js +12 -8
  13. package/dist/es6/light.d.ts +9 -1
  14. package/dist/es6/light.js +9 -5
  15. package/dist/scss/dark.scss +9 -5
  16. package/dist/scss/index.scss +20 -10
  17. package/dist/scss/light.scss +9 -5
  18. package/package.json +2 -2
  19. package/dist/css/component.css +0 -11
package/dist/es6/global.js CHANGED
@@ -4,19 +4,23 @@
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- export const calciteColorBackground = { light: "#f7f7f7", dark: "#212121" };
7
+ export const calciteColorSurface1 = { light: "#f7f7f7", dark: "#212121" };
8
+ export const calciteColorSurface2 = { light: "#ffffff", dark: "#2b2b2b" };
9
+ export const calciteColorSurface3 = { light: "#f2f2f2", dark: "#363636" };
10
+ export const calciteColorSurface4 = { light: "#ebebeb", dark: "#404040" };
11
+ export const calciteColorSurfaceHighlight = {
12
+ light: "#d6efff",
13
+ dark: "#2b465f",
14
+ };
15
+ export const calciteColorBackground = { light: "#f7f7f7", dark: "#212121" }; // Deprecated, use `--calcite-color-surface-1` instead
8
16
  export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
9
- export const calciteColorForeground1 = { light: "#ffffff", dark: "#2b2b2b" };
10
- export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#363636" };
11
- export const calciteColorForeground3 = { light: "#ebebeb", dark: "#404040" };
17
+ export const calciteColorForeground1 = { light: "#ffffff", dark: "#2b2b2b" }; // Deprecated, use `--calcite-color-surface-2` instead
18
+ export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#363636" }; // Deprecated, use `--calcite-color-surface-3` instead
19
+ export const calciteColorForeground3 = { light: "#ebebeb", dark: "#404040" }; // Deprecated, use `--calcite-color-surface-4` instead
12
20
  export const calciteColorForegroundCurrent = {
13
21
  light: "#d6efff",
14
22
  dark: "#2b465f",
15
23
  }; // deprecated, use --calcite-color-surface-highlight instead
16
- export const calciteColorSurfaceHighlight = {
17
- light: "#d6efff",
18
- dark: "#2b465f",
19
- };
20
24
  export const calciteColorTransparent = {
21
25
  light: "rgba(0, 0, 0, 0)",
22
26
  dark: "rgba(255, 255, 255, 0)",
package/dist/es6/light.d.ts CHANGED
@@ -3,14 +3,22 @@
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
+ export const calciteColorSurface1: string;
7
+ export const calciteColorSurface2: string;
8
+ export const calciteColorSurface3: string;
9
+ export const calciteColorSurface4: string;
10
+ export const calciteColorSurfaceHighlight: string;
11
+ /** Deprecated, use `--calcite-color-surface-1` instead */
6
12
  export const calciteColorBackground: string;
7
13
  export const calciteColorBackgroundNone: string;
14
+ /** Deprecated, use `--calcite-color-surface-2` instead */
8
15
  export const calciteColorForeground1: string;
16
+ /** Deprecated, use `--calcite-color-surface-3` instead */
9
17
  export const calciteColorForeground2: string;
18
+ /** Deprecated, use `--calcite-color-surface-4` instead */
10
19
  export const calciteColorForeground3: string;
11
20
  /** deprecated, use --calcite-color-surface-highlight instead */
12
21
  export const calciteColorForegroundCurrent: string;
13
- export const calciteColorSurfaceHighlight: string;
14
22
  export const calciteColorTransparent: string;
15
23
  export const calciteColorTransparentHover: string;
16
24
  export const calciteColorTransparentPress: string;
package/dist/es6/light.js CHANGED
@@ -3,13 +3,17 @@
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
- export const calciteColorBackground = "#f7f7f7";
6
+ export const calciteColorSurface1 = "#f7f7f7";
7
+ export const calciteColorSurface2 = "#ffffff";
8
+ export const calciteColorSurface3 = "#f2f2f2";
9
+ export const calciteColorSurface4 = "#ebebeb";
10
+ export const calciteColorSurfaceHighlight = "#d6efff";
11
+ export const calciteColorBackground = "#f7f7f7"; // Deprecated, use `--calcite-color-surface-1` instead
7
12
  export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
8
- export const calciteColorForeground1 = "#ffffff";
9
- export const calciteColorForeground2 = "#f2f2f2";
10
- export const calciteColorForeground3 = "#ebebeb";
13
+ export const calciteColorForeground1 = "#ffffff"; // Deprecated, use `--calcite-color-surface-2` instead
14
+ export const calciteColorForeground2 = "#f2f2f2"; // Deprecated, use `--calcite-color-surface-3` instead
15
+ export const calciteColorForeground3 = "#ebebeb"; // Deprecated, use `--calcite-color-surface-4` instead
11
16
  export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-surface-highlight instead
12
- export const calciteColorSurfaceHighlight = "#d6efff";
13
17
  export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
14
18
  export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
15
19
  export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
package/dist/scss/dark.scss CHANGED
@@ -2,13 +2,17 @@
2
2
  // Calcite Design System
3
3
  // Do not edit directly, this file was auto-generated.
4
4
 
5
- $calcite-color-background: #212121;
5
+ $calcite-color-surface-1: #212121;
6
+ $calcite-color-surface-2: #2b2b2b;
7
+ $calcite-color-surface-3: #363636;
8
+ $calcite-color-surface-4: #404040;
9
+ $calcite-color-surface-highlight: #2b465f;
10
+ $calcite-color-background: #212121; // Deprecated, use `--calcite-color-surface-1` instead
6
11
  $calcite-color-background-none: rgba(255, 255, 255, 0);
7
- $calcite-color-foreground-1: #2b2b2b;
8
- $calcite-color-foreground-2: #363636;
9
- $calcite-color-foreground-3: #404040;
12
+ $calcite-color-foreground-1: #2b2b2b; // Deprecated, use `--calcite-color-surface-2` instead
13
+ $calcite-color-foreground-2: #363636; // Deprecated, use `--calcite-color-surface-3` instead
14
+ $calcite-color-foreground-3: #404040; // Deprecated, use `--calcite-color-surface-4` instead
10
15
  $calcite-color-foreground-current: #2b465f; // deprecated, use --calcite-color-surface-highlight instead
11
- $calcite-color-surface-highlight: #2b465f;
12
16
  $calcite-color-transparent: rgba(255, 255, 255, 0);
13
17
  $calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
14
18
  $calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
package/dist/scss/index.scss CHANGED
@@ -45,13 +45,18 @@
45
45
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
46
46
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
47
47
  --calcite-color-transparent: rgba(0, 0, 0, 0);
48
- --calcite-color-surface-highlight: #d6efff;
49
48
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
50
- --calcite-color-foreground-3: #ebebeb;
51
- --calcite-color-foreground-2: #f2f2f2;
52
- --calcite-color-foreground-1: #ffffff;
49
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
50
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
51
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
53
52
  --calcite-color-background-none: rgba(255, 255, 255, 0);
54
- --calcite-color-background: #f7f7f7;
53
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
54
+ --calcite-color-surface-highlight: #d6efff;
55
+ --calcite-color-surface-4: #ebebeb;
56
+ --calcite-color-surface-3: #f2f2f2;
57
+ --calcite-color-surface-2: #ffffff;
58
+ --calcite-color-surface-1: #f7f7f7;
59
+ --calcite-color-focus: var(--calcite-color-brand);
55
60
  }
56
61
  @mixin calcite-mode-dark {
57
62
  --calcite-color-border-white: #f7f7f7;
@@ -92,11 +97,16 @@
92
97
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
93
98
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
94
99
  --calcite-color-transparent: rgba(255, 255, 255, 0);
95
- --calcite-color-surface-highlight: #2b465f;
96
100
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
97
- --calcite-color-foreground-3: #404040;
98
- --calcite-color-foreground-2: #363636;
99
- --calcite-color-foreground-1: #2b2b2b;
101
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
102
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
103
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
100
104
  --calcite-color-background-none: rgba(255, 255, 255, 0);
101
- --calcite-color-background: #212121;
105
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
106
+ --calcite-color-surface-highlight: #2b465f;
107
+ --calcite-color-surface-4: #404040;
108
+ --calcite-color-surface-3: #363636;
109
+ --calcite-color-surface-2: #2b2b2b;
110
+ --calcite-color-surface-1: #212121;
111
+ --calcite-color-focus: var(--calcite-color-brand);
102
112
  }
package/dist/scss/light.scss CHANGED
@@ -2,13 +2,17 @@
2
2
  // Calcite Design System
3
3
  // Do not edit directly, this file was auto-generated.
4
4
 
5
- $calcite-color-background: #f7f7f7;
5
+ $calcite-color-surface-1: #f7f7f7;
6
+ $calcite-color-surface-2: #ffffff;
7
+ $calcite-color-surface-3: #f2f2f2;
8
+ $calcite-color-surface-4: #ebebeb;
9
+ $calcite-color-surface-highlight: #d6efff;
10
+ $calcite-color-background: #f7f7f7; // Deprecated, use `--calcite-color-surface-1` instead
6
11
  $calcite-color-background-none: rgba(255, 255, 255, 0);
7
- $calcite-color-foreground-1: #ffffff;
8
- $calcite-color-foreground-2: #f2f2f2;
9
- $calcite-color-foreground-3: #ebebeb;
12
+ $calcite-color-foreground-1: #ffffff; // Deprecated, use `--calcite-color-surface-2` instead
13
+ $calcite-color-foreground-2: #f2f2f2; // Deprecated, use `--calcite-color-surface-3` instead
14
+ $calcite-color-foreground-3: #ebebeb; // Deprecated, use `--calcite-color-surface-4` instead
10
15
  $calcite-color-foreground-current: #d6efff; // deprecated, use --calcite-color-surface-highlight instead
11
- $calcite-color-surface-highlight: #d6efff;
12
16
  $calcite-color-transparent: rgba(0, 0, 0, 0);
13
17
  $calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
14
18
  $calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "4.0.0-next.11",
3
+ "version": "4.0.0-next.13",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -46,5 +46,5 @@
46
46
  "devDependencies": {
47
47
  "vitest": "4.0.14"
48
48
  },
49
- "gitHead": "8f61da5e9de73b7a17fc6f6fcdb4ab8484133f05"
49
+ "gitHead": "55ed5643162e51ca3c37a8deb0c0ea2aea9d6716"
50
50
  }
package/dist/css/component.css DELETED
@@ -1,11 +0,0 @@
1
- /**
2
- * Calcite Design System
3
- * Do not edit directly, this file was auto-generated.
4
- */
5
-
6
- :host {
7
- --calcite-internal-color-focus: var(
8
- --calcite-color-focus,
9
- var(--calcite-ui-focus-color, var(--calcite-color-brand))
10
- );
11
- }