@teseor/css 2.2.0 → 2.2.2

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 (15) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +8 -164
  3. package/package.json +1 -1
  4. package/src/components/actions/button-group/api.json +5 -0
  5. package/src/components/actions/button-group/index.scss +3 -1
  6. package/src/components/actions/close-button/index.scss +1 -1
  7. package/src/components/disclosure/accordion/index.scss +3 -3
  8. package/src/components/forms/number-input/index.scss +2 -2
  9. package/src/components/forms/password-input/index.scss +2 -2
  10. package/src/components/forms/search-input/index.scss +3 -3
  11. package/src/components/forms/toggle/index.scss +2 -1
  12. package/src/components/overlays/dialog/api.json +5 -0
  13. package/src/components/overlays/dialog/index.scss +4 -2
  14. package/src/components/typography/link/index.scss +2 -1
  15. package/src/config/layers.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teseor/css",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "description": "CSS library - reset, primitives, components, utilities",
5
5
  "license": "MIT",
6
6
  "author": "letanure",
package/src/components/actions/button-group/api.json CHANGED
@@ -12,6 +12,11 @@
12
12
  "name": "--ui-button-group-radius",
13
13
  "default": "var(--ui-radius-md)",
14
14
  "description": "Corner radius"
15
+ },
16
+ {
17
+ "name": "--ui-button-group-border-width",
18
+ "default": "var(--ui-border-width-sm)",
19
+ "description": "Border thickness"
15
20
  }
16
21
  ]
17
22
  }
package/src/components/actions/button-group/index.scss CHANGED
@@ -9,6 +9,8 @@
9
9
  .button-group {
10
10
  // @desc Corner radius
11
11
  --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(#{t.$unit} / 2)));
12
+ // @desc Border thickness
13
+ --_border-width: var(--ui-button-group-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
12
14
  }
13
15
  }
14
16
 
@@ -75,7 +77,7 @@
75
77
  }
76
78
 
77
79
  .button-group--attached > .button:last-child {
78
- border-inline-end-width: 1px;
80
+ border-inline-end-width: var(--_border-width);
79
81
  }
80
82
 
81
83
  .button-group--attached > .button + .button {
package/src/components/actions/close-button/index.scss CHANGED
@@ -114,7 +114,7 @@
114
114
 
115
115
  fill: none;
116
116
  stroke: currentcolor;
117
- stroke-width: 2;
117
+ stroke-width: #{t.$icon-stroke};
118
118
  stroke-linecap: round;
119
119
  stroke-linejoin: round;
120
120
  }
package/src/components/disclosure/accordion/index.scss CHANGED
@@ -37,7 +37,7 @@
37
37
 
38
38
  // Add dividers between items
39
39
  .accordion > .disclosure + .disclosure {
40
- border-block-start: 1px solid var(--_border-color);
40
+ border-block-start: var(--_border-width) solid var(--_border-color);
41
41
  }
42
42
 
43
43
  // Round first and last items
@@ -77,11 +77,11 @@
77
77
  }
78
78
 
79
79
  .accordion--separated > .disclosure {
80
- border: 1px solid var(--_border-color);
80
+ border: var(--_border-width) solid var(--_border-color);
81
81
  border-radius: var(--_radius);
82
82
  }
83
83
 
84
84
  .accordion--separated > .disclosure + .disclosure {
85
- border-block-start: 1px solid var(--_border-color);
85
+ border-block-start: var(--_border-width) solid var(--_border-color);
86
86
  }
87
87
  }
package/src/components/forms/number-input/index.scss CHANGED
@@ -142,7 +142,7 @@
142
142
  }
143
143
 
144
144
  &:focus-visible {
145
- outline: 2px solid var(--_color-focus);
145
+ outline: var(--_border-width-md) solid var(--_color-focus);
146
146
  outline-offset: #{t.$focus-ring-offset};
147
147
  }
148
148
 
@@ -156,7 +156,7 @@
156
156
 
157
157
  fill: none;
158
158
  stroke: currentcolor;
159
- stroke-width: 2;
159
+ stroke-width: #{t.$icon-stroke};
160
160
  stroke-linecap: round;
161
161
  stroke-linejoin: round;
162
162
  }
package/src/components/forms/password-input/index.scss CHANGED
@@ -151,7 +151,7 @@
151
151
  }
152
152
 
153
153
  &:focus-visible {
154
- outline: 2px solid var(--_color-focus);
154
+ outline: var(--_border-width-md) solid var(--_color-focus);
155
155
  outline-offset: #{t.$focus-ring-offset};
156
156
  }
157
157
 
@@ -161,7 +161,7 @@
161
161
 
162
162
  fill: none;
163
163
  stroke: currentcolor;
164
- stroke-width: 2;
164
+ stroke-width: #{t.$icon-stroke};
165
165
  stroke-linecap: round;
166
166
  stroke-linejoin: round;
167
167
  }
package/src/components/forms/search-input/index.scss CHANGED
@@ -119,7 +119,7 @@
119
119
 
120
120
  fill: none;
121
121
  stroke: currentcolor;
122
- stroke-width: 2;
122
+ stroke-width: #{t.$icon-stroke};
123
123
  stroke-linecap: round;
124
124
  stroke-linejoin: round;
125
125
  }
@@ -185,7 +185,7 @@
185
185
  }
186
186
 
187
187
  &:focus-visible {
188
- outline: 2px solid var(--_color-focus);
188
+ outline: var(--_border-width-md) solid var(--_color-focus);
189
189
  outline-offset: #{t.$focus-ring-offset};
190
190
  }
191
191
 
@@ -195,7 +195,7 @@
195
195
 
196
196
  fill: none;
197
197
  stroke: currentcolor;
198
- stroke-width: 2;
198
+ stroke-width: #{t.$icon-stroke};
199
199
  stroke-linecap: round;
200
200
  stroke-linejoin: round;
201
201
  }
package/src/components/forms/toggle/index.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
9
9
  --_ease-default: var(--ui-ease-default, #{t.$ease-default});
10
10
  --_color-focus: var(--ui-color-focus, var(--ui-color-primary, #{t.$color-primary}));
11
+ --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
11
12
  --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
12
13
  // @desc Track width
13
14
  --_track-width: var(--ui-toggle-track-width, calc(#{t.$unit} * 5));
@@ -112,7 +113,7 @@
112
113
 
113
114
  // Focus state
114
115
  .toggle__input:focus-visible ~ .toggle__track {
115
- outline: 2px solid var(--_color-focus);
116
+ outline: var(--_border-width-md) solid var(--_color-focus);
116
117
  outline-offset: calc(#{t.$unit} / 4);
117
118
  }
118
119
 
package/src/components/overlays/dialog/api.json CHANGED
@@ -34,6 +34,11 @@
34
34
  "name": "--ui-dialog-border-color",
35
35
  "default": "var(--ui-color-border)",
36
36
  "description": "Border color"
37
+ },
38
+ {
39
+ "name": "--ui-dialog-border-width",
40
+ "default": "var(--ui-border-width-sm)",
41
+ "description": "Border thickness"
37
42
  }
38
43
  ]
39
44
  }
package/src/components/overlays/dialog/index.scss CHANGED
@@ -17,6 +17,8 @@
17
17
  --_footer-padding: var(--ui-dialog-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
18
18
  // @desc Border color
19
19
  --_border-color: var(--ui-dialog-border-color, var(--ui-color-border, #{t.$color-border}));
20
+ // @desc Border thickness
21
+ --_border-width: var(--ui-dialog-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
20
22
  }
21
23
  }
22
24
 
@@ -35,7 +37,7 @@
35
37
 
36
38
  padding: var(--_header-padding);
37
39
 
38
- border-block-end: 1px solid var(--_border-color);
40
+ border-block-end: var(--_border-width) solid var(--_border-color);
39
41
  }
40
42
 
41
43
  .dialog__title {
@@ -68,7 +70,7 @@
68
70
 
69
71
  padding: var(--_footer-padding);
70
72
 
71
- border-block-start: 1px solid var(--_border-color);
73
+ border-block-start: var(--_border-width) solid var(--_border-color);
72
74
  }
73
75
 
74
76
  // Variant without borders
package/src/components/typography/link/index.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
9
9
  --_ease-default: var(--ui-ease-default, #{t.$ease-default});
10
10
  --_color-focus: var(--ui-color-focus, var(--ui-color-primary, #{t.$color-primary}));
11
+ --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
11
12
  --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
12
13
  // @desc Text color
13
14
  --_color: var(--ui-link-color, var(--ui-color-primary, #{t.$color-primary}));
@@ -52,7 +53,7 @@
52
53
 
53
54
  &:focus-visible {
54
55
  border-radius: calc(#{t.$unit} / 4);
55
- outline: 2px solid var(--_color-focus);
56
+ outline: var(--_border-width-md) solid var(--_color-focus);
56
57
  outline-offset: calc(#{t.$unit} / 4);
57
58
  }
58
59
 
package/src/config/layers.scss CHANGED
@@ -1 +1 @@
1
- @layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.styles, components.tokens, utilities, themes;
1
+ @layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.tokens, components.styles, utilities, themes;