@inversestudio/design-tokens 1.0.13 → 1.0.15

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 (22) hide show
  1. package/dist/css/tokens.css +2 -0
  2. package/dist/css/tokens.dark.css +2 -0
  3. package/dist/css/tokens.light.css +2 -0
  4. package/dist/esm/tokens.dark.js +5 -3
  5. package/dist/esm/tokens.js +5 -3
  6. package/dist/esm/tokens.light.js +5 -3
  7. package/dist/js/tokens.dark.js +5 -3
  8. package/dist/js/tokens.js +5 -3
  9. package/dist/js/tokens.light.js +5 -3
  10. package/dist/json/tokens.dark.json +5 -3
  11. package/dist/json/tokens.dark.nested.json +6 -4
  12. package/dist/json/tokens.json +5 -3
  13. package/dist/json/tokens.light.json +5 -3
  14. package/dist/json/tokens.light.nested.json +6 -4
  15. package/dist/json/tokens.nested.json +6 -4
  16. package/dist/scss/_tokens.dark.scss +4 -0
  17. package/dist/scss/_tokens.light.scss +4 -0
  18. package/dist/scss/_tokens.scss +4 -0
  19. package/dist/types/tokens.d.ts +7 -1
  20. package/dist/types/tokens.dark.d.ts +7 -1
  21. package/dist/types/tokens.light.d.ts +7 -1
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -84,6 +84,7 @@
84
84
  --ids-dimension-element-1x: 16px;
85
85
  --ids-dimension-element-1-5x: 24px;
86
86
  --ids-dimension-element-2x: 32px;
87
+ --ids-dimension-element-2-5x: 40px;
87
88
  --ids-dimension-element-3x: 48px;
88
89
  --ids-dimension-element-3-5x: 56px;
89
90
  --ids-dimension-element-4-5x: 72px;
@@ -96,6 +97,7 @@
96
97
  --ids-borderradius-0-25x: 4px;
97
98
  --ids-borderradius-0-5x: 8px;
98
99
  --ids-borderradius-full: 1600px;
100
+ --ids-borderradius-1x: 16px;
99
101
  --ids-border-action-primary: 2px solid #00000000;
100
102
  --ids-border-action-secondary: 2px solid #2d2f35;
101
103
  --ids-border-action-disabled: 2px solid #adaeb3;
package/dist/css/tokens.dark.css CHANGED
@@ -84,6 +84,7 @@
84
84
  --ids-dimension-element-1x: 16px;
85
85
  --ids-dimension-element-1-5x: 24px;
86
86
  --ids-dimension-element-2x: 32px;
87
+ --ids-dimension-element-2-5x: 40px;
87
88
  --ids-dimension-element-3x: 48px;
88
89
  --ids-dimension-element-3-5x: 56px;
89
90
  --ids-dimension-element-4-5x: 72px;
@@ -96,6 +97,7 @@
96
97
  --ids-borderradius-0-25x: 4px;
97
98
  --ids-borderradius-0-5x: 8px;
98
99
  --ids-borderradius-full: 1600px;
100
+ --ids-borderradius-1x: 16px;
99
101
  --ids-border-action-primary: 2px solid #00000000;
100
102
  --ids-border-action-secondary: 2px solid #2d2f35;
101
103
  --ids-border-action-disabled: 2px solid #adaeb3;
package/dist/css/tokens.light.css CHANGED
@@ -84,6 +84,7 @@
84
84
  --ids-dimension-element-1x: 16px;
85
85
  --ids-dimension-element-1-5x: 24px;
86
86
  --ids-dimension-element-2x: 32px;
87
+ --ids-dimension-element-2-5x: 40px;
87
88
  --ids-dimension-element-3x: 48px;
88
89
  --ids-dimension-element-3-5x: 56px;
89
90
  --ids-dimension-element-4-5x: 72px;
@@ -96,6 +97,7 @@
96
97
  --ids-borderradius-0-25x: 4px;
97
98
  --ids-borderradius-0-5x: 8px;
98
99
  --ids-borderradius-full: 1600px;
100
+ --ids-borderradius-1x: 16px;
99
101
  --ids-border-action-primary: 2px solid #00000000;
100
102
  --ids-border-action-secondary: 2px solid #2d2f35;
101
103
  --ids-border-action-disabled: 2px solid #adaeb3;
package/dist/esm/tokens.dark.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/esm/tokens.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/esm/tokens.light.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/js/tokens.dark.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/js/tokens.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/js/tokens.light.js CHANGED
@@ -72,6 +72,7 @@ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). U
72
72
  export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
73
  export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
74
  export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement25x = "40px"; // SEMANTIC - Medium element (40px). Use for: default buttons/inputs.
75
76
  export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
77
  export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
78
  export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
@@ -82,23 +83,24 @@ export const idsTypographyLabel075x = {
82
83
  fontFamily: "Tomato Grotesk",
83
84
  fontSize: "12px",
84
85
  lineHeight: "16px",
85
- fontWeight: "600",
86
+ fontWeight: 600,
86
87
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
88
  export const idsTypographyLabel1x = {
88
89
  fontFamily: "Tomato Grotesk",
89
90
  fontSize: "16px",
90
91
  lineHeight: "16px",
91
- fontWeight: "600",
92
+ fontWeight: 600,
92
93
  }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
93
94
  export const idsTypographyTitle1125x = {
94
95
  fontFamily: "Tomato Grotesk",
95
- fontWeight: "600",
96
+ fontWeight: 600,
96
97
  fontSize: "18px",
97
98
  lineHeight: "20px",
98
99
  };
99
100
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
100
101
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
101
102
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
103
+ export const idsBorderradius1x = "16px";
102
104
  export const idsBorderActionPrimary = {
103
105
  color: "#00000000",
104
106
  width: "2px",
package/dist/json/tokens.dark.json CHANGED
@@ -69,6 +69,7 @@
69
69
  "idsDimensionElement1x": "16px",
70
70
  "idsDimensionElement15x": "24px",
71
71
  "idsDimensionElement2x": "32px",
72
+ "idsDimensionElement25x": "40px",
72
73
  "idsDimensionElement3x": "48px",
73
74
  "idsDimensionElement35x": "56px",
74
75
  "idsDimensionElement45x": "72px",
@@ -79,23 +80,24 @@
79
80
  "fontFamily": "Tomato Grotesk",
80
81
  "fontSize": "12px",
81
82
  "lineHeight": "16px",
82
- "fontWeight": "600"
83
+ "fontWeight": 600
83
84
  },
84
85
  "idsTypographyLabel1x": {
85
86
  "fontFamily": "Tomato Grotesk",
86
87
  "fontSize": "16px",
87
88
  "lineHeight": "16px",
88
- "fontWeight": "600"
89
+ "fontWeight": 600
89
90
  },
90
91
  "idsTypographyTitle1125x": {
91
92
  "fontFamily": "Tomato Grotesk",
92
- "fontWeight": "600",
93
+ "fontWeight": 600,
93
94
  "fontSize": "18px",
94
95
  "lineHeight": "20px"
95
96
  },
96
97
  "idsBorderradius025x": "4px",
97
98
  "idsBorderradius05x": "8px",
98
99
  "idsBorderradiusFull": "1600px",
100
+ "idsBorderradius1x": "16px",
99
101
  "idsBorderActionPrimary": {
100
102
  "color": "#00000000",
101
103
  "width": "2px",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -96,6 +96,7 @@
96
96
  "1x": "16px",
97
97
  "1_5x": "24px",
98
98
  "2x": "32px",
99
+ "2_5x": "40px",
99
100
  "3x": "48px",
100
101
  "3_5x": "56px",
101
102
  "4_5x": "72px"
@@ -112,19 +113,19 @@
112
113
  "fontFamily": "Tomato Grotesk",
113
114
  "fontSize": "12px",
114
115
  "lineHeight": "16px",
115
- "fontWeight": "600"
116
+ "fontWeight": 600
116
117
  },
117
118
  "1x": {
118
119
  "fontFamily": "Tomato Grotesk",
119
120
  "fontSize": "16px",
120
121
  "lineHeight": "16px",
121
- "fontWeight": "600"
122
+ "fontWeight": 600
122
123
  }
123
124
  },
124
125
  "title": {
125
126
  "1_125x": {
126
127
  "fontFamily": "Tomato Grotesk",
127
- "fontWeight": "600",
128
+ "fontWeight": 600,
128
129
  "fontSize": "18px",
129
130
  "lineHeight": "20px"
130
131
  }
@@ -133,7 +134,8 @@
133
134
  "borderRadius": {
134
135
  "0_25x": "4px",
135
136
  "0_5x": "8px",
136
- "full": "1600px"
137
+ "full": "1600px",
138
+ "1x": "16px"
137
139
  },
138
140
  "border": {
139
141
  "action": {
package/dist/json/tokens.json CHANGED
@@ -69,6 +69,7 @@
69
69
  "idsDimensionElement1x": "16px",
70
70
  "idsDimensionElement15x": "24px",
71
71
  "idsDimensionElement2x": "32px",
72
+ "idsDimensionElement25x": "40px",
72
73
  "idsDimensionElement3x": "48px",
73
74
  "idsDimensionElement35x": "56px",
74
75
  "idsDimensionElement45x": "72px",
@@ -79,23 +80,24 @@
79
80
  "fontFamily": "Tomato Grotesk",
80
81
  "fontSize": "12px",
81
82
  "lineHeight": "16px",
82
- "fontWeight": "600"
83
+ "fontWeight": 600
83
84
  },
84
85
  "idsTypographyLabel1x": {
85
86
  "fontFamily": "Tomato Grotesk",
86
87
  "fontSize": "16px",
87
88
  "lineHeight": "16px",
88
- "fontWeight": "600"
89
+ "fontWeight": 600
89
90
  },
90
91
  "idsTypographyTitle1125x": {
91
92
  "fontFamily": "Tomato Grotesk",
92
- "fontWeight": "600",
93
+ "fontWeight": 600,
93
94
  "fontSize": "18px",
94
95
  "lineHeight": "20px"
95
96
  },
96
97
  "idsBorderradius025x": "4px",
97
98
  "idsBorderradius05x": "8px",
98
99
  "idsBorderradiusFull": "1600px",
100
+ "idsBorderradius1x": "16px",
99
101
  "idsBorderActionPrimary": {
100
102
  "color": "#00000000",
101
103
  "width": "2px",
package/dist/json/tokens.light.json CHANGED
@@ -69,6 +69,7 @@
69
69
  "idsDimensionElement1x": "16px",
70
70
  "idsDimensionElement15x": "24px",
71
71
  "idsDimensionElement2x": "32px",
72
+ "idsDimensionElement25x": "40px",
72
73
  "idsDimensionElement3x": "48px",
73
74
  "idsDimensionElement35x": "56px",
74
75
  "idsDimensionElement45x": "72px",
@@ -79,23 +80,24 @@
79
80
  "fontFamily": "Tomato Grotesk",
80
81
  "fontSize": "12px",
81
82
  "lineHeight": "16px",
82
- "fontWeight": "600"
83
+ "fontWeight": 600
83
84
  },
84
85
  "idsTypographyLabel1x": {
85
86
  "fontFamily": "Tomato Grotesk",
86
87
  "fontSize": "16px",
87
88
  "lineHeight": "16px",
88
- "fontWeight": "600"
89
+ "fontWeight": 600
89
90
  },
90
91
  "idsTypographyTitle1125x": {
91
92
  "fontFamily": "Tomato Grotesk",
92
- "fontWeight": "600",
93
+ "fontWeight": 600,
93
94
  "fontSize": "18px",
94
95
  "lineHeight": "20px"
95
96
  },
96
97
  "idsBorderradius025x": "4px",
97
98
  "idsBorderradius05x": "8px",
98
99
  "idsBorderradiusFull": "1600px",
100
+ "idsBorderradius1x": "16px",
99
101
  "idsBorderActionPrimary": {
100
102
  "color": "#00000000",
101
103
  "width": "2px",
package/dist/json/tokens.light.nested.json CHANGED
@@ -96,6 +96,7 @@
96
96
  "1x": "16px",
97
97
  "1_5x": "24px",
98
98
  "2x": "32px",
99
+ "2_5x": "40px",
99
100
  "3x": "48px",
100
101
  "3_5x": "56px",
101
102
  "4_5x": "72px"
@@ -112,19 +113,19 @@
112
113
  "fontFamily": "Tomato Grotesk",
113
114
  "fontSize": "12px",
114
115
  "lineHeight": "16px",
115
- "fontWeight": "600"
116
+ "fontWeight": 600
116
117
  },
117
118
  "1x": {
118
119
  "fontFamily": "Tomato Grotesk",
119
120
  "fontSize": "16px",
120
121
  "lineHeight": "16px",
121
- "fontWeight": "600"
122
+ "fontWeight": 600
122
123
  }
123
124
  },
124
125
  "title": {
125
126
  "1_125x": {
126
127
  "fontFamily": "Tomato Grotesk",
127
- "fontWeight": "600",
128
+ "fontWeight": 600,
128
129
  "fontSize": "18px",
129
130
  "lineHeight": "20px"
130
131
  }
@@ -133,7 +134,8 @@
133
134
  "borderRadius": {
134
135
  "0_25x": "4px",
135
136
  "0_5x": "8px",
136
- "full": "1600px"
137
+ "full": "1600px",
138
+ "1x": "16px"
137
139
  },
138
140
  "border": {
139
141
  "action": {
package/dist/json/tokens.nested.json CHANGED
@@ -96,6 +96,7 @@
96
96
  "1x": "16px",
97
97
  "1_5x": "24px",
98
98
  "2x": "32px",
99
+ "2_5x": "40px",
99
100
  "3x": "48px",
100
101
  "3_5x": "56px",
101
102
  "4_5x": "72px"
@@ -112,19 +113,19 @@
112
113
  "fontFamily": "Tomato Grotesk",
113
114
  "fontSize": "12px",
114
115
  "lineHeight": "16px",
115
- "fontWeight": "600"
116
+ "fontWeight": 600
116
117
  },
117
118
  "1x": {
118
119
  "fontFamily": "Tomato Grotesk",
119
120
  "fontSize": "16px",
120
121
  "lineHeight": "16px",
121
- "fontWeight": "600"
122
+ "fontWeight": 600
122
123
  }
123
124
  },
124
125
  "title": {
125
126
  "1_125x": {
126
127
  "fontFamily": "Tomato Grotesk",
127
- "fontWeight": "600",
128
+ "fontWeight": 600,
128
129
  "fontSize": "18px",
129
130
  "lineHeight": "20px"
130
131
  }
@@ -133,7 +134,8 @@
133
134
  "borderRadius": {
134
135
  "0_25x": "4px",
135
136
  "0_5x": "8px",
136
- "full": "1600px"
137
+ "full": "1600px",
138
+ "1x": "16px"
137
139
  },
138
140
  "border": {
139
141
  "action": {
package/dist/scss/_tokens.dark.scss CHANGED
@@ -74,6 +74,7 @@ $ids-spacing-2-5x: 40px;
74
74
  $ids-dimension-element-1x: 16px;
75
75
  $ids-dimension-element-1-5x: 24px;
76
76
  $ids-dimension-element-2x: 32px;
77
+ $ids-dimension-element-2-5x: 40px;
77
78
  $ids-dimension-element-3x: 48px;
78
79
  $ids-dimension-element-3-5x: 56px;
79
80
  $ids-dimension-element-4-5x: 72px;
@@ -86,6 +87,7 @@ $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
86
87
  $ids-borderradius-0-25x: 4px;
87
88
  $ids-borderradius-0-5x: 8px;
88
89
  $ids-borderradius-full: 1600px;
90
+ $ids-borderradius-1x: 16px;
89
91
  $ids-border-action-primary: 2px solid #00000000;
90
92
  $ids-border-action-secondary: 2px solid #2d2f35;
91
93
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -218,6 +220,7 @@ $ids-tokens: (
218
220
  'ids-dimension-element-1x': $ids-dimension-element-1x,
219
221
  'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
220
222
  'ids-dimension-element-2x': $ids-dimension-element-2x,
223
+ 'ids-dimension-element-2-5x': $ids-dimension-element-2-5x,
221
224
  'ids-dimension-element-3x': $ids-dimension-element-3x,
222
225
  'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
223
226
  'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
@@ -230,6 +233,7 @@ $ids-tokens: (
230
233
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
231
234
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
232
235
  'ids-borderradius-full': $ids-borderradius-full,
236
+ 'ids-borderradius-1x': $ids-borderradius-1x,
233
237
  'ids-border-action-primary': $ids-border-action-primary,
234
238
  'ids-border-action-secondary': $ids-border-action-secondary,
235
239
  'ids-border-action-disabled': $ids-border-action-disabled,
package/dist/scss/_tokens.light.scss CHANGED
@@ -74,6 +74,7 @@ $ids-spacing-2-5x: 40px;
74
74
  $ids-dimension-element-1x: 16px;
75
75
  $ids-dimension-element-1-5x: 24px;
76
76
  $ids-dimension-element-2x: 32px;
77
+ $ids-dimension-element-2-5x: 40px;
77
78
  $ids-dimension-element-3x: 48px;
78
79
  $ids-dimension-element-3-5x: 56px;
79
80
  $ids-dimension-element-4-5x: 72px;
@@ -86,6 +87,7 @@ $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
86
87
  $ids-borderradius-0-25x: 4px;
87
88
  $ids-borderradius-0-5x: 8px;
88
89
  $ids-borderradius-full: 1600px;
90
+ $ids-borderradius-1x: 16px;
89
91
  $ids-border-action-primary: 2px solid #00000000;
90
92
  $ids-border-action-secondary: 2px solid #2d2f35;
91
93
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -218,6 +220,7 @@ $ids-tokens: (
218
220
  'ids-dimension-element-1x': $ids-dimension-element-1x,
219
221
  'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
220
222
  'ids-dimension-element-2x': $ids-dimension-element-2x,
223
+ 'ids-dimension-element-2-5x': $ids-dimension-element-2-5x,
221
224
  'ids-dimension-element-3x': $ids-dimension-element-3x,
222
225
  'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
223
226
  'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
@@ -230,6 +233,7 @@ $ids-tokens: (
230
233
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
231
234
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
232
235
  'ids-borderradius-full': $ids-borderradius-full,
236
+ 'ids-borderradius-1x': $ids-borderradius-1x,
233
237
  'ids-border-action-primary': $ids-border-action-primary,
234
238
  'ids-border-action-secondary': $ids-border-action-secondary,
235
239
  'ids-border-action-disabled': $ids-border-action-disabled,
package/dist/scss/_tokens.scss CHANGED
@@ -74,6 +74,7 @@ $ids-spacing-2-5x: 40px;
74
74
  $ids-dimension-element-1x: 16px;
75
75
  $ids-dimension-element-1-5x: 24px;
76
76
  $ids-dimension-element-2x: 32px;
77
+ $ids-dimension-element-2-5x: 40px;
77
78
  $ids-dimension-element-3x: 48px;
78
79
  $ids-dimension-element-3-5x: 56px;
79
80
  $ids-dimension-element-4-5x: 72px;
@@ -86,6 +87,7 @@ $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
86
87
  $ids-borderradius-0-25x: 4px;
87
88
  $ids-borderradius-0-5x: 8px;
88
89
  $ids-borderradius-full: 1600px;
90
+ $ids-borderradius-1x: 16px;
89
91
  $ids-border-action-primary: 2px solid #00000000;
90
92
  $ids-border-action-secondary: 2px solid #2d2f35;
91
93
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -218,6 +220,7 @@ $ids-tokens: (
218
220
  'ids-dimension-element-1x': $ids-dimension-element-1x,
219
221
  'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
220
222
  'ids-dimension-element-2x': $ids-dimension-element-2x,
223
+ 'ids-dimension-element-2-5x': $ids-dimension-element-2-5x,
221
224
  'ids-dimension-element-3x': $ids-dimension-element-3x,
222
225
  'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
223
226
  'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
@@ -230,6 +233,7 @@ $ids-tokens: (
230
233
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
231
234
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
232
235
  'ids-borderradius-full': $ids-borderradius-full,
236
+ 'ids-borderradius-1x': $ids-borderradius-1x,
233
237
  'ids-border-action-primary': $ids-border-action-primary,
234
238
  'ids-border-action-secondary': $ids-border-action-secondary,
235
239
  'ids-border-action-disabled': $ids-border-action-disabled,
package/dist/types/tokens.d.ts CHANGED
@@ -102,6 +102,7 @@ export interface IDSTokens {
102
102
  '1x': string;
103
103
  '1_5x': string;
104
104
  '2x': string;
105
+ '2_5x': string;
105
106
  '3x': string;
106
107
  '3_5x': string;
107
108
  '4_5x': string;
@@ -125,6 +126,7 @@ export interface IDSTokens {
125
126
  '0_25x': string;
126
127
  '0_5x': string;
127
128
  full: string;
129
+ '1x': string;
128
130
  };
129
131
  border: {
130
132
  action: {
@@ -326,6 +328,7 @@ export const tokens: IDSTokens = {
326
328
  '1x': '16px',
327
329
  '1_5x': '24px',
328
330
  '2x': '32px',
331
+ '2_5x': '40px',
329
332
  '3x': '48px',
330
333
  '3_5x': '56px',
331
334
  '4_5x': '72px'
@@ -348,7 +351,8 @@ export const tokens: IDSTokens = {
348
351
  borderRadius: {
349
352
  '0_25x': '4px',
350
353
  '0_5x': '8px',
351
- full: '1600px'
354
+ full: '1600px',
355
+ '1x': '16px'
352
356
  },
353
357
  border: {
354
358
  action: {
@@ -523,6 +527,7 @@ export const idsSpacing25x = '40px';
523
527
  export const idsDimensionElement1x = '16px';
524
528
  export const idsDimensionElement15x = '24px';
525
529
  export const idsDimensionElement2x = '32px';
530
+ export const idsDimensionElement25x = '40px';
526
531
  export const idsDimensionElement3x = '48px';
527
532
  export const idsDimensionElement35x = '56px';
528
533
  export const idsDimensionElement45x = '72px';
@@ -535,6 +540,7 @@ export const idsTypographyTitle1125x = '[object Object]';
535
540
  export const idsBorderradius025x = '4px';
536
541
  export const idsBorderradius05x = '8px';
537
542
  export const idsBorderradiusFull = '1600px';
543
+ export const idsBorderradius1x = '16px';
538
544
  export const idsBorderActionPrimary = '[object Object]';
539
545
  export const idsBorderActionSecondary = '[object Object]';
540
546
  export const idsBorderActionDisabled = '[object Object]';
package/dist/types/tokens.dark.d.ts CHANGED
@@ -102,6 +102,7 @@ export interface IDSTokens {
102
102
  '1x': string;
103
103
  '1_5x': string;
104
104
  '2x': string;
105
+ '2_5x': string;
105
106
  '3x': string;
106
107
  '3_5x': string;
107
108
  '4_5x': string;
@@ -125,6 +126,7 @@ export interface IDSTokens {
125
126
  '0_25x': string;
126
127
  '0_5x': string;
127
128
  full: string;
129
+ '1x': string;
128
130
  };
129
131
  border: {
130
132
  action: {
@@ -326,6 +328,7 @@ export const tokens: IDSTokens = {
326
328
  '1x': '16px',
327
329
  '1_5x': '24px',
328
330
  '2x': '32px',
331
+ '2_5x': '40px',
329
332
  '3x': '48px',
330
333
  '3_5x': '56px',
331
334
  '4_5x': '72px'
@@ -348,7 +351,8 @@ export const tokens: IDSTokens = {
348
351
  borderRadius: {
349
352
  '0_25x': '4px',
350
353
  '0_5x': '8px',
351
- full: '1600px'
354
+ full: '1600px',
355
+ '1x': '16px'
352
356
  },
353
357
  border: {
354
358
  action: {
@@ -523,6 +527,7 @@ export const idsSpacing25x = '40px';
523
527
  export const idsDimensionElement1x = '16px';
524
528
  export const idsDimensionElement15x = '24px';
525
529
  export const idsDimensionElement2x = '32px';
530
+ export const idsDimensionElement25x = '40px';
526
531
  export const idsDimensionElement3x = '48px';
527
532
  export const idsDimensionElement35x = '56px';
528
533
  export const idsDimensionElement45x = '72px';
@@ -535,6 +540,7 @@ export const idsTypographyTitle1125x = '[object Object]';
535
540
  export const idsBorderradius025x = '4px';
536
541
  export const idsBorderradius05x = '8px';
537
542
  export const idsBorderradiusFull = '1600px';
543
+ export const idsBorderradius1x = '16px';
538
544
  export const idsBorderActionPrimary = '[object Object]';
539
545
  export const idsBorderActionSecondary = '[object Object]';
540
546
  export const idsBorderActionDisabled = '[object Object]';
package/dist/types/tokens.light.d.ts CHANGED
@@ -102,6 +102,7 @@ export interface IDSTokens {
102
102
  '1x': string;
103
103
  '1_5x': string;
104
104
  '2x': string;
105
+ '2_5x': string;
105
106
  '3x': string;
106
107
  '3_5x': string;
107
108
  '4_5x': string;
@@ -125,6 +126,7 @@ export interface IDSTokens {
125
126
  '0_25x': string;
126
127
  '0_5x': string;
127
128
  full: string;
129
+ '1x': string;
128
130
  };
129
131
  border: {
130
132
  action: {
@@ -326,6 +328,7 @@ export const tokens: IDSTokens = {
326
328
  '1x': '16px',
327
329
  '1_5x': '24px',
328
330
  '2x': '32px',
331
+ '2_5x': '40px',
329
332
  '3x': '48px',
330
333
  '3_5x': '56px',
331
334
  '4_5x': '72px'
@@ -348,7 +351,8 @@ export const tokens: IDSTokens = {
348
351
  borderRadius: {
349
352
  '0_25x': '4px',
350
353
  '0_5x': '8px',
351
- full: '1600px'
354
+ full: '1600px',
355
+ '1x': '16px'
352
356
  },
353
357
  border: {
354
358
  action: {
@@ -523,6 +527,7 @@ export const idsSpacing25x = '40px';
523
527
  export const idsDimensionElement1x = '16px';
524
528
  export const idsDimensionElement15x = '24px';
525
529
  export const idsDimensionElement2x = '32px';
530
+ export const idsDimensionElement25x = '40px';
526
531
  export const idsDimensionElement3x = '48px';
527
532
  export const idsDimensionElement35x = '56px';
528
533
  export const idsDimensionElement45x = '72px';
@@ -535,6 +540,7 @@ export const idsTypographyTitle1125x = '[object Object]';
535
540
  export const idsBorderradius025x = '4px';
536
541
  export const idsBorderradius05x = '8px';
537
542
  export const idsBorderradiusFull = '1600px';
543
+ export const idsBorderradius1x = '16px';
538
544
  export const idsBorderActionPrimary = '[object Object]';
539
545
  export const idsBorderActionSecondary = '[object Object]';
540
546
  export const idsBorderActionDisabled = '[object Object]';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",