@esri/calcite-design-tokens 3.2.0-next.0 → 3.2.0-next.10

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.
@@ -8,9 +8,9 @@ export const calciteColorBackgroundNone: string;
8
8
  export const calciteColorForeground1: string;
9
9
  export const calciteColorForeground2: string;
10
10
  export const calciteColorForeground3: string;
11
- /** deprecated, use --calcite-color-foreground-highlight instead */
11
+ /** deprecated, use --calcite-color-surface-highlight instead */
12
12
  export const calciteColorForegroundCurrent: string;
13
- export const calciteColorForegroundHighlight: string;
13
+ export const calciteColorSurfaceHighlight: string;
14
14
  export const calciteColorTransparent: string;
15
15
  export const calciteColorTransparentHover: string;
16
16
  export const calciteColorTransparentPress: string;
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/es6/dark.js CHANGED
@@ -8,8 +8,8 @@ export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
8
8
  export const calciteColorForeground1 = "#2b2b2b";
9
9
  export const calciteColorForeground2 = "#212121";
10
10
  export const calciteColorForeground3 = "#141414";
11
- export const calciteColorForegroundCurrent = "#2b465f"; // deprecated, use --calcite-color-foreground-highlight instead
12
- export const calciteColorForegroundHighlight = "#2b465f";
11
+ export const calciteColorForegroundCurrent = "#2b465f"; // deprecated, use --calcite-color-surface-highlight instead
12
+ export const calciteColorSurfaceHighlight = "#2b465f";
13
13
  export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
14
14
  export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
15
15
  export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
@@ -48,3 +48,4 @@ export const calciteColorBorder3 = "#404040";
48
48
  export const calciteColorBorderInput = "#757575";
49
49
  export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
50
50
  export const calciteColorBorderWhite = "#f7f7f7";
51
+ export const calciteColorFocus = "#009af2";
@@ -9,9 +9,9 @@ export const calciteColorBackgroundNone: string;
9
9
  export const calciteColorForeground1: { light: string; dark: string };
10
10
  export const calciteColorForeground2: { light: string; dark: string };
11
11
  export const calciteColorForeground3: { light: string; dark: string };
12
- /** deprecated, use --calcite-color-foreground-highlight instead */
12
+ /** deprecated, use --calcite-color-surface-highlight instead */
13
13
  export const calciteColorForegroundCurrent: { light: string; dark: string };
14
- export const calciteColorForegroundHighlight: { light: string; dark: string };
14
+ export const calciteColorSurfaceHighlight: { light: string; dark: string };
15
15
  export const calciteColorTransparent: { light: string; dark: string };
16
16
  export const calciteColorTransparentHover: { light: string; dark: string };
17
17
  export const calciteColorTransparentPress: { light: string; dark: string };
@@ -56,6 +56,7 @@ export const calciteColorBorder3: { light: string; dark: string };
56
56
  export const calciteColorBorderInput: { light: string; dark: string };
57
57
  export const calciteColorBorderGhost: { light: string; dark: string };
58
58
  export const calciteColorBorderWhite: { light: string; dark: string };
59
+ export const calciteColorFocus: { light: string; dark: string };
59
60
  export const calciteBorderWidthNone: string;
60
61
  export const calciteBorderWidthSm: string;
61
62
  export const calciteBorderWidthMd: string;
@@ -12,8 +12,8 @@ export const calciteColorForeground3 = { light: "#ebebeb", dark: "#141414" };
12
12
  export const calciteColorForegroundCurrent = {
13
13
  light: "#d6efff",
14
14
  dark: "#2b465f",
15
- }; // deprecated, use --calcite-color-foreground-highlight instead
16
- export const calciteColorForegroundHighlight = {
15
+ }; // deprecated, use --calcite-color-surface-highlight instead
16
+ export const calciteColorSurfaceHighlight = {
17
17
  light: "#d6efff",
18
18
  dark: "#2b465f",
19
19
  };
@@ -106,6 +106,7 @@ export const calciteColorBorderGhost = {
106
106
  dark: "rgba(117, 117, 117, 0.3)",
107
107
  };
108
108
  export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
109
+ export const calciteColorFocus = { light: "#007ac2", dark: "#009af2" };
109
110
  export const calciteBorderWidthNone = "0";
110
111
  export const calciteBorderWidthSm = "1px";
111
112
  export const calciteBorderWidthMd = "2px";
@@ -8,9 +8,9 @@ export const calciteColorBackgroundNone: string;
8
8
  export const calciteColorForeground1: string;
9
9
  export const calciteColorForeground2: string;
10
10
  export const calciteColorForeground3: string;
11
- /** deprecated, use --calcite-color-foreground-highlight instead */
11
+ /** deprecated, use --calcite-color-surface-highlight instead */
12
12
  export const calciteColorForegroundCurrent: string;
13
- export const calciteColorForegroundHighlight: string;
13
+ export const calciteColorSurfaceHighlight: string;
14
14
  export const calciteColorTransparent: string;
15
15
  export const calciteColorTransparentHover: string;
16
16
  export const calciteColorTransparentPress: string;
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/es6/light.js CHANGED
@@ -8,8 +8,8 @@ export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
8
8
  export const calciteColorForeground1 = "#ffffff";
9
9
  export const calciteColorForeground2 = "#f2f2f2";
10
10
  export const calciteColorForeground3 = "#ebebeb";
11
- export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-foreground-highlight instead
12
- export const calciteColorForegroundHighlight = "#d6efff";
11
+ export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-surface-highlight instead
12
+ export const calciteColorSurfaceHighlight = "#d6efff";
13
13
  export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
14
14
  export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
15
15
  export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
@@ -48,3 +48,4 @@ export const calciteColorBorder3 = "#dedede";
48
48
  export const calciteColorBorderInput = "#949494";
49
49
  export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
50
50
  export const calciteColorBorderWhite = "#ffffff";
51
+ export const calciteColorFocus = "#007ac2";
@@ -7,30 +7,6 @@ export const calciteBorderWidthNone: string;
7
7
  export const calciteBorderWidthSm: string;
8
8
  export const calciteBorderWidthMd: string;
9
9
  export const calciteBorderWidthLg: string;
10
- /** Small handheld devices and mini-windows */
11
- export const calciteContainerSizeHeightXxs: { min: string; max: string };
12
- /** Handheld devices */
13
- export const calciteContainerSizeHeightXs: { min: string; max: string };
14
- /** Small tablets */
15
- export const calciteContainerSizeHeightSm: { min: string; max: string };
16
- /** Small laptops */
17
- export const calciteContainerSizeHeightMd: { min: string; max: string };
18
- /** Large laptops and desktop computers */
19
- export const calciteContainerSizeHeightLg: { min: string; max: string };
20
- /** Projectors and televisions */
21
- export const calciteContainerSizeHeightXl: { min: string };
22
- /** Small handheld devices and mini-windows */
23
- export const calciteContainerSizeWidthXxs: { min: string; max: string };
24
- /** Handheld devices */
25
- export const calciteContainerSizeWidthXs: { min: string; max: string };
26
- /** Small tablets */
27
- export const calciteContainerSizeWidthSm: { min: string; max: string };
28
- /** Small laptops */
29
- export const calciteContainerSizeWidthMd: { min: string; max: string };
30
- /** Large laptops and desktop computers */
31
- export const calciteContainerSizeWidthLg: { min: string; max: string };
32
- /** Projectors and televisions */
33
- export const calciteContainerSizeWidthXl: { min: string };
34
10
  export const calciteContainerSizeMargin: string;
35
11
  export const calciteContainerSizeGutter: string;
36
12
  /** for fluid grid widths */
@@ -7,18 +7,6 @@ export const calciteBorderWidthNone = "0";
7
7
  export const calciteBorderWidthSm = "1px";
8
8
  export const calciteBorderWidthMd = "2px";
9
9
  export const calciteBorderWidthLg = "4px";
10
- export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Small handheld devices and mini-windows
11
- export const calciteContainerSizeHeightXs = { min: "155px", max: "328px" }; // Handheld devices
12
- export const calciteContainerSizeHeightSm = { min: "329px", max: "504px" }; // Small tablets
13
- export const calciteContainerSizeHeightMd = { min: "505px", max: "678px" }; // Small laptops
14
- export const calciteContainerSizeHeightLg = { min: "679px", max: "854px" }; // Large laptops and desktop computers
15
- export const calciteContainerSizeHeightXl = { min: "855px" }; // Projectors and televisions
16
- export const calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Small handheld devices and mini-windows
17
- export const calciteContainerSizeWidthXs = { min: "321px", max: "476px" }; // Handheld devices
18
- export const calciteContainerSizeWidthSm = { min: "477px", max: "768px" }; // Small tablets
19
- export const calciteContainerSizeWidthMd = { min: "769px", max: "1152px" }; // Small laptops
20
- export const calciteContainerSizeWidthLg = { min: "1153px", max: "1440px" }; // Large laptops and desktop computers
21
- export const calciteContainerSizeWidthXl = { min: "1441px" }; // Projectors and televisions
22
10
  export const calciteContainerSizeMargin = "24px";
23
11
  export const calciteContainerSizeGutter = "16px";
24
12
  export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths