@esri/calcite-design-tokens 3.1.0-next.4 → 3.1.0-next.6

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.
@@ -14,8 +14,11 @@
14
14
  --calcite-container-size-gutter: 16px;
15
15
  --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
16
16
  --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
17
- --calcite-corner-radius-sharp: 0;
18
- --calcite-corner-radius-round: 4px;
17
+ --calcite-corner-radius-sharp: 0; /* deprecated, use --calcite-conder-radius-none instead */
18
+ --calcite-corner-radius-none: 0;
19
+ --calcite-corner-radius-xs: 2px;
20
+ --calcite-corner-radius-sm: 4px;
21
+ --calcite-corner-radius-round: 4px; /* deprecated, use --calcite-corner-radius-sm instead */
19
22
  --calcite-corner-radius-pill: 100%;
20
23
  --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /* Primary font with fallbacks */
21
24
  --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /* Font family for code with fallbacks */
@@ -99,7 +99,6 @@
99
99
  }
100
100
  @media (prefers-color-scheme: dark) {
101
101
  .calcite-mode-auto {
102
- --calcite-color-foreground-current: #214155;
103
102
  --calcite-color-border-white: #f7f7f7;
104
103
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
105
104
  --calcite-color-border-input: #757575;
@@ -137,6 +136,7 @@
137
136
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
138
137
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
139
138
  --calcite-color-transparent: rgba(255, 255, 255, 0);
139
+ --calcite-color-foreground-current: #214155;
140
140
  --calcite-color-foreground-3: #141414;
141
141
  --calcite-color-foreground-2: #212121;
142
142
  --calcite-color-foreground-1: #2b2b2b;
@@ -190,7 +190,6 @@
190
190
  --calcite-color-background: #f7f7f7;
191
191
  }
192
192
  .calcite-mode-dark {
193
- --calcite-color-foreground-current: #214155;
194
193
  --calcite-color-border-white: #f7f7f7;
195
194
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
196
195
  --calcite-color-border-input: #757575;
@@ -228,6 +227,7 @@
228
227
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
229
228
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
230
229
  --calcite-color-transparent: rgba(255, 255, 255, 0);
230
+ --calcite-color-foreground-current: #214155;
231
231
  --calcite-color-foreground-3: #141414;
232
232
  --calcite-color-foreground-2: #212121;
233
233
  --calcite-color-foreground-1: #2b2b2b;
@@ -34,8 +34,11 @@
34
34
  --calcite-container-size-gutter: 16px;
35
35
  --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
36
36
  --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
37
- --calcite-corner-radius-sharp: 0;
38
- --calcite-corner-radius-round: 4px;
37
+ --calcite-corner-radius-sharp: 0; /* deprecated, use --calcite-conder-radius-none instead */
38
+ --calcite-corner-radius-none: 0;
39
+ --calcite-corner-radius-xs: 2px;
40
+ --calcite-corner-radius-sm: 4px;
41
+ --calcite-corner-radius-round: 4px; /* deprecated, use --calcite-corner-radius-sm instead */
39
42
  --calcite-corner-radius-pill: 100%;
40
43
  --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /* Primary font with fallbacks */
41
44
  --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /* Font family for code with fallbacks */
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1745440103149,
2
+ "timestamp": 1746138184577,
3
3
  "tokens": [
4
4
  {
5
5
  "value": "#ffffff",
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1745440100748,
2
+ "timestamp": 1746138182007,
3
3
  "tokens": [
4
4
  {
5
5
  "value": "#363636",
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1745440102935,
2
+ "timestamp": 1746138184266,
3
3
  "tokens": [
4
4
  {
5
5
  "value": "{\"light\":\"#f7f7f7\",\"dark\":\"#363636\"}",
@@ -1912,9 +1912,16 @@
1912
1912
  "type": "dimension",
1913
1913
  "attributes": {
1914
1914
  "category": "corner",
1915
- "type": "corner",
1915
+ "type": "dimension",
1916
1916
  "item": "radius",
1917
1917
  "subitem": "sharp",
1918
+ "value": "0",
1919
+ "description": "deprecated, use --calcite-conder-radius-none instead",
1920
+ "filePath": "src/tokens/semantic/corner.json",
1921
+ "isSource": true,
1922
+ "name": "calcite-semantic-corner-radius-sharp",
1923
+ "path": ["semantic", "corner", "radius", "sharp"],
1924
+ "comment": "deprecated, use --calcite-conder-radius-none instead",
1918
1925
  "names": {
1919
1926
  "scss": "$calcite-corner-radius-sharp",
1920
1927
  "css": "var(--calcite-corner-radius-sharp)",
@@ -1928,12 +1935,68 @@
1928
1935
  "type": "dimension"
1929
1936
  }
1930
1937
  },
1938
+ "description": "deprecated, use --calcite-conder-radius-none instead",
1931
1939
  "filePath": "src/tokens/semantic/corner.json",
1932
1940
  "isSource": true,
1933
1941
  "name": "Corner Radius Sharp",
1934
1942
  "path": ["semantic", "corner", "radius", "sharp"],
1943
+ "comment": "deprecated, use --calcite-conder-radius-none instead",
1935
1944
  "key": "{semantic.corner.radius.sharp}"
1936
1945
  },
1946
+ {
1947
+ "value": "0",
1948
+ "type": "dimension",
1949
+ "attributes": {
1950
+ "category": "corner",
1951
+ "type": "corner",
1952
+ "item": "radius",
1953
+ "subitem": "none",
1954
+ "names": {
1955
+ "scss": "$calcite-corner-radius-none",
1956
+ "css": "var(--calcite-corner-radius-none)",
1957
+ "js": "semantic.corner.radius.none",
1958
+ "docs": "semantic.corner.radius.none",
1959
+ "es6": "calciteCornerRadiusNone"
1960
+ },
1961
+ "calcite-schema": {
1962
+ "system": "calcite",
1963
+ "tier": "semantic",
1964
+ "type": "dimension"
1965
+ }
1966
+ },
1967
+ "filePath": "src/tokens/semantic/corner.json",
1968
+ "isSource": true,
1969
+ "name": "Corner Radius None",
1970
+ "path": ["semantic", "corner", "radius", "none"],
1971
+ "key": "{semantic.corner.radius.none}"
1972
+ },
1973
+ {
1974
+ "value": "2px",
1975
+ "type": "dimension",
1976
+ "attributes": {
1977
+ "category": "corner",
1978
+ "type": "corner",
1979
+ "item": "radius",
1980
+ "subitem": "xs",
1981
+ "names": {
1982
+ "scss": "$calcite-corner-radius-xs",
1983
+ "css": "var(--calcite-corner-radius-xs)",
1984
+ "js": "semantic.corner.radius.xs",
1985
+ "docs": "semantic.corner.radius.xs",
1986
+ "es6": "calciteCornerRadiusXs"
1987
+ },
1988
+ "calcite-schema": {
1989
+ "system": "calcite",
1990
+ "tier": "semantic",
1991
+ "type": "dimension"
1992
+ }
1993
+ },
1994
+ "filePath": "src/tokens/semantic/corner.json",
1995
+ "isSource": true,
1996
+ "name": "Corner Radius Xs",
1997
+ "path": ["semantic", "corner", "radius", "xs"],
1998
+ "key": "{semantic.corner.radius.xs}"
1999
+ },
1937
2000
  {
1938
2001
  "value": "4px",
1939
2002
  "type": "dimension",
@@ -1941,7 +2004,41 @@
1941
2004
  "category": "corner",
1942
2005
  "type": "corner",
1943
2006
  "item": "radius",
2007
+ "subitem": "sm",
2008
+ "names": {
2009
+ "scss": "$calcite-corner-radius-sm",
2010
+ "css": "var(--calcite-corner-radius-sm)",
2011
+ "js": "semantic.corner.radius.sm",
2012
+ "docs": "semantic.corner.radius.sm",
2013
+ "es6": "calciteCornerRadiusSm"
2014
+ },
2015
+ "calcite-schema": {
2016
+ "system": "calcite",
2017
+ "tier": "semantic",
2018
+ "type": "dimension"
2019
+ }
2020
+ },
2021
+ "filePath": "src/tokens/semantic/corner.json",
2022
+ "isSource": true,
2023
+ "name": "Corner Radius Sm",
2024
+ "path": ["semantic", "corner", "radius", "sm"],
2025
+ "key": "{semantic.corner.radius.sm}"
2026
+ },
2027
+ {
2028
+ "value": "4px",
2029
+ "type": "dimension",
2030
+ "attributes": {
2031
+ "category": "corner",
2032
+ "type": "dimension",
2033
+ "item": "radius",
1944
2034
  "subitem": "round",
2035
+ "value": "4px",
2036
+ "description": "deprecated, use --calcite-corner-radius-sm instead",
2037
+ "filePath": "src/tokens/semantic/corner.json",
2038
+ "isSource": true,
2039
+ "name": "calcite-semantic-corner-radius-round",
2040
+ "path": ["semantic", "corner", "radius", "round"],
2041
+ "comment": "deprecated, use --calcite-corner-radius-sm instead",
1945
2042
  "names": {
1946
2043
  "scss": "$calcite-corner-radius-round",
1947
2044
  "css": "var(--calcite-corner-radius-round)",
@@ -1955,10 +2052,12 @@
1955
2052
  "type": "dimension"
1956
2053
  }
1957
2054
  },
2055
+ "description": "deprecated, use --calcite-corner-radius-sm instead",
1958
2056
  "filePath": "src/tokens/semantic/corner.json",
1959
2057
  "isSource": true,
1960
2058
  "name": "Corner Radius Round",
1961
2059
  "path": ["semantic", "corner", "radius", "round"],
2060
+ "comment": "deprecated, use --calcite-corner-radius-sm instead",
1962
2061
  "key": "{semantic.corner.radius.round}"
1963
2062
  },
1964
2063
  {
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1745440101656,
2
+ "timestamp": 1746138182952,
3
3
  "tokens": [
4
4
  {
5
5
  "value": "#f7f7f7",
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1745440103091,
2
+ "timestamp": 1746138184476,
3
3
  "tokens": [
4
4
  {
5
5
  "value": "0",
@@ -731,9 +731,16 @@
731
731
  "type": "dimension",
732
732
  "attributes": {
733
733
  "category": "corner",
734
- "type": "corner",
734
+ "type": "dimension",
735
735
  "item": "radius",
736
736
  "subitem": "sharp",
737
+ "value": "0",
738
+ "description": "deprecated, use --calcite-conder-radius-none instead",
739
+ "filePath": "src/tokens/semantic/corner.json",
740
+ "isSource": true,
741
+ "name": "calcite-semantic-corner-radius-sharp",
742
+ "path": ["semantic", "corner", "radius", "sharp"],
743
+ "comment": "deprecated, use --calcite-conder-radius-none instead",
737
744
  "names": {
738
745
  "scss": "$calcite-corner-radius-sharp",
739
746
  "css": "var(--calcite-corner-radius-sharp)",
@@ -747,12 +754,68 @@
747
754
  "type": "dimension"
748
755
  }
749
756
  },
757
+ "description": "deprecated, use --calcite-conder-radius-none instead",
750
758
  "filePath": "src/tokens/semantic/corner.json",
751
759
  "isSource": true,
752
760
  "name": "Corner Radius Sharp",
753
761
  "path": ["semantic", "corner", "radius", "sharp"],
762
+ "comment": "deprecated, use --calcite-conder-radius-none instead",
754
763
  "key": "{semantic.corner.radius.sharp}"
755
764
  },
765
+ {
766
+ "value": "0",
767
+ "type": "dimension",
768
+ "attributes": {
769
+ "category": "corner",
770
+ "type": "corner",
771
+ "item": "radius",
772
+ "subitem": "none",
773
+ "names": {
774
+ "scss": "$calcite-corner-radius-none",
775
+ "css": "var(--calcite-corner-radius-none)",
776
+ "js": "semantic.corner.radius.none",
777
+ "docs": "semantic.corner.radius.none",
778
+ "es6": "calciteCornerRadiusNone"
779
+ },
780
+ "calcite-schema": {
781
+ "system": "calcite",
782
+ "tier": "semantic",
783
+ "type": "dimension"
784
+ }
785
+ },
786
+ "filePath": "src/tokens/semantic/corner.json",
787
+ "isSource": true,
788
+ "name": "Corner Radius None",
789
+ "path": ["semantic", "corner", "radius", "none"],
790
+ "key": "{semantic.corner.radius.none}"
791
+ },
792
+ {
793
+ "value": "2px",
794
+ "type": "dimension",
795
+ "attributes": {
796
+ "category": "corner",
797
+ "type": "corner",
798
+ "item": "radius",
799
+ "subitem": "xs",
800
+ "names": {
801
+ "scss": "$calcite-corner-radius-xs",
802
+ "css": "var(--calcite-corner-radius-xs)",
803
+ "js": "semantic.corner.radius.xs",
804
+ "docs": "semantic.corner.radius.xs",
805
+ "es6": "calciteCornerRadiusXs"
806
+ },
807
+ "calcite-schema": {
808
+ "system": "calcite",
809
+ "tier": "semantic",
810
+ "type": "dimension"
811
+ }
812
+ },
813
+ "filePath": "src/tokens/semantic/corner.json",
814
+ "isSource": true,
815
+ "name": "Corner Radius Xs",
816
+ "path": ["semantic", "corner", "radius", "xs"],
817
+ "key": "{semantic.corner.radius.xs}"
818
+ },
756
819
  {
757
820
  "value": "4px",
758
821
  "type": "dimension",
@@ -760,7 +823,41 @@
760
823
  "category": "corner",
761
824
  "type": "corner",
762
825
  "item": "radius",
826
+ "subitem": "sm",
827
+ "names": {
828
+ "scss": "$calcite-corner-radius-sm",
829
+ "css": "var(--calcite-corner-radius-sm)",
830
+ "js": "semantic.corner.radius.sm",
831
+ "docs": "semantic.corner.radius.sm",
832
+ "es6": "calciteCornerRadiusSm"
833
+ },
834
+ "calcite-schema": {
835
+ "system": "calcite",
836
+ "tier": "semantic",
837
+ "type": "dimension"
838
+ }
839
+ },
840
+ "filePath": "src/tokens/semantic/corner.json",
841
+ "isSource": true,
842
+ "name": "Corner Radius Sm",
843
+ "path": ["semantic", "corner", "radius", "sm"],
844
+ "key": "{semantic.corner.radius.sm}"
845
+ },
846
+ {
847
+ "value": "4px",
848
+ "type": "dimension",
849
+ "attributes": {
850
+ "category": "corner",
851
+ "type": "dimension",
852
+ "item": "radius",
763
853
  "subitem": "round",
854
+ "value": "4px",
855
+ "description": "deprecated, use --calcite-corner-radius-sm instead",
856
+ "filePath": "src/tokens/semantic/corner.json",
857
+ "isSource": true,
858
+ "name": "calcite-semantic-corner-radius-round",
859
+ "path": ["semantic", "corner", "radius", "round"],
860
+ "comment": "deprecated, use --calcite-corner-radius-sm instead",
764
861
  "names": {
765
862
  "scss": "$calcite-corner-radius-round",
766
863
  "css": "var(--calcite-corner-radius-round)",
@@ -774,10 +871,12 @@
774
871
  "type": "dimension"
775
872
  }
776
873
  },
874
+ "description": "deprecated, use --calcite-corner-radius-sm instead",
777
875
  "filePath": "src/tokens/semantic/corner.json",
778
876
  "isSource": true,
779
877
  "name": "Corner Radius Round",
780
878
  "path": ["semantic", "corner", "radius", "round"],
879
+ "comment": "deprecated, use --calcite-corner-radius-sm instead",
781
880
  "key": "{semantic.corner.radius.round}"
782
881
  },
783
882
  {
@@ -105,8 +105,11 @@ export const calciteContainerSizeMargin: string;
105
105
  export const calciteContainerSizeGutter: string; /** for fluid grid widths */
106
106
  export const calciteContainerSizeContentFluid: string; /** only for lg breakpoint fixed grid width */
107
107
  export const calciteContainerSizeContentFixed: string;
108
- export const calciteCornerRadius: string;
108
+ export const calciteCornerRadius: string; /** deprecated, use --calcite-conder-radius-none instead */
109
109
  export const calciteCornerRadiusSharp: string;
110
+ export const calciteCornerRadiusNone: string;
111
+ export const calciteCornerRadiusXs: string;
112
+ export const calciteCornerRadiusSm: string; /** deprecated, use --calcite-corner-radius-sm instead */
110
113
  export const calciteCornerRadiusRound: string;
111
114
  export const calciteCornerRadiusPill: string; /** Primary font with fallbacks */
112
115
  export const calciteFontFamily: string[]; /** Font family for code with fallbacks */
@@ -122,8 +122,11 @@ export const calciteContainerSizeGutter = "16px";
122
122
  export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
123
123
  export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
124
124
  export const calciteCornerRadius = "0";
125
- export const calciteCornerRadiusSharp = "0";
126
- export const calciteCornerRadiusRound = "4px";
125
+ export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-conder-radius-none instead
126
+ export const calciteCornerRadiusNone = "0";
127
+ export const calciteCornerRadiusXs = "2px";
128
+ export const calciteCornerRadiusSm = "4px";
129
+ export const calciteCornerRadiusRound = "4px"; // deprecated, use --calcite-corner-radius-sm instead
127
130
  export const calciteCornerRadiusPill = "100%";
128
131
  export const calciteFontFamily = [
129
132
  "Avenir Next",
@@ -55,8 +55,11 @@ export const calciteContainerSizeMargin: string;
55
55
  export const calciteContainerSizeGutter: string; /** for fluid grid widths */
56
56
  export const calciteContainerSizeContentFluid: string; /** only for lg breakpoint fixed grid width */
57
57
  export const calciteContainerSizeContentFixed: string;
58
- export const calciteCornerRadius: string;
58
+ export const calciteCornerRadius: string; /** deprecated, use --calcite-conder-radius-none instead */
59
59
  export const calciteCornerRadiusSharp: string;
60
+ export const calciteCornerRadiusNone: string;
61
+ export const calciteCornerRadiusXs: string;
62
+ export const calciteCornerRadiusSm: string; /** deprecated, use --calcite-corner-radius-sm instead */
60
63
  export const calciteCornerRadiusRound: string;
61
64
  export const calciteCornerRadiusPill: string; /** Primary font with fallbacks */
62
65
  export const calciteFontFamily: string[]; /** Font family for code with fallbacks */
@@ -24,8 +24,11 @@ export const calciteContainerSizeGutter = "16px";
24
24
  export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
25
25
  export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
26
26
  export const calciteCornerRadius = "0";
27
- export const calciteCornerRadiusSharp = "0";
28
- export const calciteCornerRadiusRound = "4px";
27
+ export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-conder-radius-none instead
28
+ export const calciteCornerRadiusNone = "0";
29
+ export const calciteCornerRadiusXs = "2px";
30
+ export const calciteCornerRadiusSm = "4px";
31
+ export const calciteCornerRadiusRound = "4px"; // deprecated, use --calcite-corner-radius-sm instead
29
32
  export const calciteCornerRadiusPill = "100%";
30
33
  export const calciteFontFamily = [
31
34
  "Avenir Next",
package/dist/js/dark.js CHANGED
@@ -203,7 +203,7 @@ export default {
203
203
  filePath: "src/tokens/semantic/color/dark.json",
204
204
  isSource: true,
205
205
  original: {
206
- value: "#214155",
206
+ value: "{core.color.medium-saturation.blue.m-bb-090}",
207
207
  type: "color",
208
208
  attributes: {
209
209
  category: "color",
@@ -129,6 +129,9 @@ declare const tokens: {
129
129
  radius: {
130
130
  default: DesignToken;
131
131
  sharp: DesignToken;
132
+ none: DesignToken;
133
+ xs: DesignToken;
134
+ sm: DesignToken;
132
135
  round: DesignToken;
133
136
  pill: DesignToken;
134
137
  };
package/dist/js/global.js CHANGED
@@ -2620,9 +2620,16 @@ export default {
2620
2620
  type: "dimension",
2621
2621
  attributes: {
2622
2622
  category: "corner",
2623
- type: "corner",
2623
+ type: "dimension",
2624
2624
  item: "radius",
2625
2625
  subitem: "sharp",
2626
+ value: "0",
2627
+ description: "deprecated, use --calcite-conder-radius-none instead",
2628
+ filePath: "src/tokens/semantic/corner.json",
2629
+ isSource: true,
2630
+ name: "calcite-semantic-corner-radius-sharp",
2631
+ path: ["semantic", "corner", "radius", "sharp"],
2632
+ comment: "deprecated, use --calcite-conder-radius-none instead",
2626
2633
  names: {
2627
2634
  scss: "$calcite-corner-radius-sharp",
2628
2635
  css: "var(--calcite-corner-radius-sharp)",
@@ -2636,6 +2643,7 @@ export default {
2636
2643
  type: "dimension",
2637
2644
  },
2638
2645
  },
2646
+ description: "deprecated, use --calcite-conder-radius-none instead",
2639
2647
  filePath: "src/tokens/semantic/corner.json",
2640
2648
  isSource: true,
2641
2649
  original: {
@@ -2644,19 +2652,130 @@ export default {
2644
2652
  attributes: {
2645
2653
  category: "corner",
2646
2654
  },
2655
+ description: "deprecated, use --calcite-conder-radius-none instead",
2647
2656
  },
2648
2657
  name: "Corner Radius Sharp",
2649
2658
  path: ["semantic", "corner", "radius", "sharp"],
2659
+ comment: "deprecated, use --calcite-conder-radius-none instead",
2650
2660
  key: "{semantic.corner.radius.sharp}",
2651
2661
  },
2652
- round: {
2662
+ none: {
2663
+ value: "0",
2664
+ type: "dimension",
2665
+ attributes: {
2666
+ category: "corner",
2667
+ type: "corner",
2668
+ item: "radius",
2669
+ subitem: "none",
2670
+ names: {
2671
+ scss: "$calcite-corner-radius-none",
2672
+ css: "var(--calcite-corner-radius-none)",
2673
+ js: "semantic.corner.radius.none",
2674
+ docs: "semantic.corner.radius.none",
2675
+ es6: "calciteCornerRadiusNone",
2676
+ },
2677
+ "calcite-schema": {
2678
+ system: "calcite",
2679
+ tier: "semantic",
2680
+ type: "dimension",
2681
+ },
2682
+ },
2683
+ filePath: "src/tokens/semantic/corner.json",
2684
+ isSource: true,
2685
+ original: {
2686
+ value: "{core.size.default.none}",
2687
+ type: "dimension",
2688
+ attributes: {
2689
+ category: "corner",
2690
+ },
2691
+ },
2692
+ name: "Corner Radius None",
2693
+ path: ["semantic", "corner", "radius", "none"],
2694
+ key: "{semantic.corner.radius.none}",
2695
+ },
2696
+ xs: {
2697
+ value: "2px",
2698
+ type: "dimension",
2699
+ attributes: {
2700
+ category: "corner",
2701
+ type: "corner",
2702
+ item: "radius",
2703
+ subitem: "xs",
2704
+ names: {
2705
+ scss: "$calcite-corner-radius-xs",
2706
+ css: "var(--calcite-corner-radius-xs)",
2707
+ js: "semantic.corner.radius.xs",
2708
+ docs: "semantic.corner.radius.xs",
2709
+ es6: "calciteCornerRadiusXs",
2710
+ },
2711
+ "calcite-schema": {
2712
+ system: "calcite",
2713
+ tier: "semantic",
2714
+ type: "dimension",
2715
+ },
2716
+ },
2717
+ filePath: "src/tokens/semantic/corner.json",
2718
+ isSource: true,
2719
+ original: {
2720
+ value: "{core.size.default.2}",
2721
+ type: "dimension",
2722
+ attributes: {
2723
+ category: "corner",
2724
+ },
2725
+ },
2726
+ name: "Corner Radius Xs",
2727
+ path: ["semantic", "corner", "radius", "xs"],
2728
+ key: "{semantic.corner.radius.xs}",
2729
+ },
2730
+ sm: {
2653
2731
  value: "4px",
2654
2732
  type: "dimension",
2655
2733
  attributes: {
2656
2734
  category: "corner",
2657
2735
  type: "corner",
2658
2736
  item: "radius",
2737
+ subitem: "sm",
2738
+ names: {
2739
+ scss: "$calcite-corner-radius-sm",
2740
+ css: "var(--calcite-corner-radius-sm)",
2741
+ js: "semantic.corner.radius.sm",
2742
+ docs: "semantic.corner.radius.sm",
2743
+ es6: "calciteCornerRadiusSm",
2744
+ },
2745
+ "calcite-schema": {
2746
+ system: "calcite",
2747
+ tier: "semantic",
2748
+ type: "dimension",
2749
+ },
2750
+ },
2751
+ filePath: "src/tokens/semantic/corner.json",
2752
+ isSource: true,
2753
+ original: {
2754
+ value: "{core.size.default.4}",
2755
+ type: "dimension",
2756
+ attributes: {
2757
+ category: "corner",
2758
+ },
2759
+ },
2760
+ name: "Corner Radius Sm",
2761
+ path: ["semantic", "corner", "radius", "sm"],
2762
+ key: "{semantic.corner.radius.sm}",
2763
+ },
2764
+ round: {
2765
+ value: "4px",
2766
+ type: "dimension",
2767
+ attributes: {
2768
+ category: "corner",
2769
+ type: "dimension",
2770
+ item: "radius",
2659
2771
  subitem: "round",
2772
+ value: "4px",
2773
+ description: "deprecated, use --calcite-corner-radius-sm instead",
2774
+ filePath: "src/tokens/semantic/corner.json",
2775
+ isSource: true,
2776
+ name: "calcite-semantic-corner-radius-round",
2777
+ path: ["semantic", "corner", "radius", "round"],
2778
+ comment: "deprecated, use --calcite-corner-radius-sm instead",
2660
2779
  names: {
2661
2780
  scss: "$calcite-corner-radius-round",
2662
2781
  css: "var(--calcite-corner-radius-round)",
@@ -2670,6 +2789,7 @@ export default {
2670
2789
  type: "dimension",
2671
2790
  },
2672
2791
  },
2792
+ description: "deprecated, use --calcite-corner-radius-sm instead",
2673
2793
  filePath: "src/tokens/semantic/corner.json",
2674
2794
  isSource: true,
2675
2795
  original: {
@@ -2678,9 +2798,11 @@ export default {
2678
2798
  attributes: {
2679
2799
  category: "corner",
2680
2800
  },
2801
+ description: "deprecated, use --calcite-corner-radius-sm instead",
2681
2802
  },
2682
2803
  name: "Corner Radius Round",
2683
2804
  path: ["semantic", "corner", "radius", "round"],
2805
+ comment: "deprecated, use --calcite-corner-radius-sm instead",
2684
2806
  key: "{semantic.corner.radius.round}",
2685
2807
  },
2686
2808
  pill: {
@@ -53,6 +53,9 @@ declare const tokens: {
53
53
  radius: {
54
54
  default: DesignToken;
55
55
  sharp: DesignToken;
56
+ none: DesignToken;
57
+ xs: DesignToken;
58
+ sm: DesignToken;
56
59
  round: DesignToken;
57
60
  pill: DesignToken;
58
61
  };
@@ -978,9 +978,16 @@ export default {
978
978
  type: "dimension",
979
979
  attributes: {
980
980
  category: "corner",
981
- type: "corner",
981
+ type: "dimension",
982
982
  item: "radius",
983
983
  subitem: "sharp",
984
+ value: "0",
985
+ description: "deprecated, use --calcite-conder-radius-none instead",
986
+ filePath: "src/tokens/semantic/corner.json",
987
+ isSource: true,
988
+ name: "calcite-semantic-corner-radius-sharp",
989
+ path: ["semantic", "corner", "radius", "sharp"],
990
+ comment: "deprecated, use --calcite-conder-radius-none instead",
984
991
  names: {
985
992
  scss: "$calcite-corner-radius-sharp",
986
993
  css: "var(--calcite-corner-radius-sharp)",
@@ -994,6 +1001,7 @@ export default {
994
1001
  type: "dimension",
995
1002
  },
996
1003
  },
1004
+ description: "deprecated, use --calcite-conder-radius-none instead",
997
1005
  filePath: "src/tokens/semantic/corner.json",
998
1006
  isSource: true,
999
1007
  original: {
@@ -1002,19 +1010,130 @@ export default {
1002
1010
  attributes: {
1003
1011
  category: "corner",
1004
1012
  },
1013
+ description: "deprecated, use --calcite-conder-radius-none instead",
1005
1014
  },
1006
1015
  name: "Corner Radius Sharp",
1007
1016
  path: ["semantic", "corner", "radius", "sharp"],
1017
+ comment: "deprecated, use --calcite-conder-radius-none instead",
1008
1018
  key: "{semantic.corner.radius.sharp}",
1009
1019
  },
1010
- round: {
1020
+ none: {
1021
+ value: "0",
1022
+ type: "dimension",
1023
+ attributes: {
1024
+ category: "corner",
1025
+ type: "corner",
1026
+ item: "radius",
1027
+ subitem: "none",
1028
+ names: {
1029
+ scss: "$calcite-corner-radius-none",
1030
+ css: "var(--calcite-corner-radius-none)",
1031
+ js: "semantic.corner.radius.none",
1032
+ docs: "semantic.corner.radius.none",
1033
+ es6: "calciteCornerRadiusNone",
1034
+ },
1035
+ "calcite-schema": {
1036
+ system: "calcite",
1037
+ tier: "semantic",
1038
+ type: "dimension",
1039
+ },
1040
+ },
1041
+ filePath: "src/tokens/semantic/corner.json",
1042
+ isSource: true,
1043
+ original: {
1044
+ value: "{core.size.default.none}",
1045
+ type: "dimension",
1046
+ attributes: {
1047
+ category: "corner",
1048
+ },
1049
+ },
1050
+ name: "Corner Radius None",
1051
+ path: ["semantic", "corner", "radius", "none"],
1052
+ key: "{semantic.corner.radius.none}",
1053
+ },
1054
+ xs: {
1055
+ value: "2px",
1056
+ type: "dimension",
1057
+ attributes: {
1058
+ category: "corner",
1059
+ type: "corner",
1060
+ item: "radius",
1061
+ subitem: "xs",
1062
+ names: {
1063
+ scss: "$calcite-corner-radius-xs",
1064
+ css: "var(--calcite-corner-radius-xs)",
1065
+ js: "semantic.corner.radius.xs",
1066
+ docs: "semantic.corner.radius.xs",
1067
+ es6: "calciteCornerRadiusXs",
1068
+ },
1069
+ "calcite-schema": {
1070
+ system: "calcite",
1071
+ tier: "semantic",
1072
+ type: "dimension",
1073
+ },
1074
+ },
1075
+ filePath: "src/tokens/semantic/corner.json",
1076
+ isSource: true,
1077
+ original: {
1078
+ value: "{core.size.default.2}",
1079
+ type: "dimension",
1080
+ attributes: {
1081
+ category: "corner",
1082
+ },
1083
+ },
1084
+ name: "Corner Radius Xs",
1085
+ path: ["semantic", "corner", "radius", "xs"],
1086
+ key: "{semantic.corner.radius.xs}",
1087
+ },
1088
+ sm: {
1011
1089
  value: "4px",
1012
1090
  type: "dimension",
1013
1091
  attributes: {
1014
1092
  category: "corner",
1015
1093
  type: "corner",
1016
1094
  item: "radius",
1095
+ subitem: "sm",
1096
+ names: {
1097
+ scss: "$calcite-corner-radius-sm",
1098
+ css: "var(--calcite-corner-radius-sm)",
1099
+ js: "semantic.corner.radius.sm",
1100
+ docs: "semantic.corner.radius.sm",
1101
+ es6: "calciteCornerRadiusSm",
1102
+ },
1103
+ "calcite-schema": {
1104
+ system: "calcite",
1105
+ tier: "semantic",
1106
+ type: "dimension",
1107
+ },
1108
+ },
1109
+ filePath: "src/tokens/semantic/corner.json",
1110
+ isSource: true,
1111
+ original: {
1112
+ value: "{core.size.default.4}",
1113
+ type: "dimension",
1114
+ attributes: {
1115
+ category: "corner",
1116
+ },
1117
+ },
1118
+ name: "Corner Radius Sm",
1119
+ path: ["semantic", "corner", "radius", "sm"],
1120
+ key: "{semantic.corner.radius.sm}",
1121
+ },
1122
+ round: {
1123
+ value: "4px",
1124
+ type: "dimension",
1125
+ attributes: {
1126
+ category: "corner",
1127
+ type: "dimension",
1128
+ item: "radius",
1017
1129
  subitem: "round",
1130
+ value: "4px",
1131
+ description: "deprecated, use --calcite-corner-radius-sm instead",
1132
+ filePath: "src/tokens/semantic/corner.json",
1133
+ isSource: true,
1134
+ name: "calcite-semantic-corner-radius-round",
1135
+ path: ["semantic", "corner", "radius", "round"],
1136
+ comment: "deprecated, use --calcite-corner-radius-sm instead",
1018
1137
  names: {
1019
1138
  scss: "$calcite-corner-radius-round",
1020
1139
  css: "var(--calcite-corner-radius-round)",
@@ -1028,6 +1147,7 @@ export default {
1028
1147
  type: "dimension",
1029
1148
  },
1030
1149
  },
1150
+ description: "deprecated, use --calcite-corner-radius-sm instead",
1031
1151
  filePath: "src/tokens/semantic/corner.json",
1032
1152
  isSource: true,
1033
1153
  original: {
@@ -1036,9 +1156,11 @@ export default {
1036
1156
  attributes: {
1037
1157
  category: "corner",
1038
1158
  },
1159
+ description: "deprecated, use --calcite-corner-radius-sm instead",
1039
1160
  },
1040
1161
  name: "Corner Radius Round",
1041
1162
  path: ["semantic", "corner", "radius", "round"],
1163
+ comment: "deprecated, use --calcite-corner-radius-sm instead",
1042
1164
  key: "{semantic.corner.radius.round}",
1043
1165
  },
1044
1166
  pill: {
@@ -12,8 +12,11 @@ $calcite-container-size-margin: 24px;
12
12
  $calcite-container-size-gutter: 16px;
13
13
  $calcite-container-size-content-fluid: 100%; // for fluid grid widths
14
14
  $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
15
- $calcite-corner-radius-sharp: 0;
16
- $calcite-corner-radius-round: 4px;
15
+ $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-conder-radius-none instead
16
+ $calcite-corner-radius-none: 0;
17
+ $calcite-corner-radius-xs: 2px;
18
+ $calcite-corner-radius-sm: 4px;
19
+ $calcite-corner-radius-round: 4px; // deprecated, use --calcite-corner-radius-sm instead
17
20
  $calcite-corner-radius-pill: 100%;
18
21
  $calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; // Primary font with fallbacks
19
22
  $calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; // Font family for code with fallbacks
@@ -52,7 +52,6 @@
52
52
  --calcite-color-background: #f7f7f7;
53
53
  }
54
54
  @mixin calcite-mode-dark {
55
- --calcite-color-foreground-current: #214155;
56
55
  --calcite-color-border-white: #f7f7f7;
57
56
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
58
57
  --calcite-color-border-input: #757575;
@@ -90,6 +89,7 @@
90
89
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
91
90
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
92
91
  --calcite-color-transparent: rgba(255, 255, 255, 0);
92
+ --calcite-color-foreground-current: #214155;
93
93
  --calcite-color-foreground-3: #141414;
94
94
  --calcite-color-foreground-2: #212121;
95
95
  --calcite-color-foreground-1: #2b2b2b;
@@ -32,8 +32,11 @@ $calcite-container-size-margin: 24px;
32
32
  $calcite-container-size-gutter: 16px;
33
33
  $calcite-container-size-content-fluid: 100%; // for fluid grid widths
34
34
  $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
35
- $calcite-corner-radius-sharp: 0;
36
- $calcite-corner-radius-round: 4px;
35
+ $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-conder-radius-none instead
36
+ $calcite-corner-radius-none: 0;
37
+ $calcite-corner-radius-xs: 2px;
38
+ $calcite-corner-radius-sm: 4px;
39
+ $calcite-corner-radius-round: 4px; // deprecated, use --calcite-corner-radius-sm instead
37
40
  $calcite-corner-radius-pill: 100%;
38
41
  $calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; // Primary font with fallbacks
39
42
  $calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; // Font family for code with fallbacks
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "3.1.0-next.4",
3
+ "version": "3.1.0-next.6",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -45,5 +45,5 @@
45
45
  "devDependencies": {
46
46
  "vitest": "2.1.9"
47
47
  },
48
- "gitHead": "f748aa2266e40aa16a83180c89245953fc62a553"
48
+ "gitHead": "aa70ba6158402ccedad58815ba8eea56b4c776aa"
49
49
  }