@oardi/css-utils 0.132.0 → 0.133.0
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.
- package/css-utils-manifest.json +2 -2
- package/css-utils-reference.md +2 -1
- package/package.json +1 -1
- package/scss/components/form.scss +55 -4
- package/scss/text.scss +10 -0
package/css-utils-manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.133.0",
|
|
4
4
|
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
5
|
"lifecycle": {
|
|
6
6
|
"deprecated": [
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"values": ["normal", "tight", "wide", "wider", "widest"]
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"patterns": ["lh-{value}"],
|
|
79
|
+
"patterns": ["lh-{value}", "text-{breakpoint}-{value}"],
|
|
80
80
|
"values": ["lg", "md", "sm", "xl", "xs", "xxl", "xxxl"]
|
|
81
81
|
},
|
|
82
82
|
{
|
package/css-utils-reference.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
> Generated automatically. Do not edit manually.
|
|
4
4
|
|
|
5
5
|
- Package: `@oardi/css-utils`
|
|
6
|
-
- Version: `0.
|
|
6
|
+
- Version: `0.133.0`
|
|
7
7
|
- Source: public SCSS entry point and utility configuration
|
|
8
8
|
|
|
9
9
|
## Usage guidance
|
|
@@ -104,6 +104,7 @@ Values: `normal` | `tight` | `wide` | `wider` | `widest`
|
|
|
104
104
|
Values: `lg` | `md` | `sm` | `xl` | `xs` | `xxl` | `xxxl`
|
|
105
105
|
|
|
106
106
|
- `lh-{value}`
|
|
107
|
+
- `text-{breakpoint}-{value}`
|
|
107
108
|
|
|
108
109
|
Values: `loose` | `none` | `normal` | `relaxed` | `snug` | `tight`
|
|
109
110
|
|
package/package.json
CHANGED
|
@@ -329,13 +329,13 @@
|
|
|
329
329
|
|
|
330
330
|
@layer components {
|
|
331
331
|
@media (forced-colors: active) {
|
|
332
|
-
.form-check .form-check-input
|
|
332
|
+
.form-check .form-check-input {
|
|
333
333
|
forced-color-adjust: none;
|
|
334
334
|
background-color: Canvas;
|
|
335
335
|
border-color: CanvasText;
|
|
336
336
|
|
|
337
337
|
&:checked,
|
|
338
|
-
&:indeterminate {
|
|
338
|
+
&:where([type='checkbox']):indeterminate {
|
|
339
339
|
background-color: Highlight;
|
|
340
340
|
border-color: Highlight;
|
|
341
341
|
}
|
|
@@ -344,7 +344,11 @@
|
|
|
344
344
|
border-color: HighlightText;
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
&:indeterminate::after {
|
|
347
|
+
&:where([type='checkbox']):indeterminate::after {
|
|
348
|
+
background-color: HighlightText;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
&[type='radio']:checked::after {
|
|
348
352
|
background-color: HighlightText;
|
|
349
353
|
}
|
|
350
354
|
|
|
@@ -372,7 +376,11 @@
|
|
|
372
376
|
border-color: GrayText;
|
|
373
377
|
}
|
|
374
378
|
|
|
375
|
-
&:indeterminate::after {
|
|
379
|
+
&:where([type='checkbox']):indeterminate::after {
|
|
380
|
+
background-color: GrayText;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
&[type='radio']:checked::after {
|
|
376
384
|
background-color: GrayText;
|
|
377
385
|
}
|
|
378
386
|
}
|
|
@@ -548,3 +556,46 @@
|
|
|
548
556
|
}
|
|
549
557
|
}
|
|
550
558
|
}
|
|
559
|
+
|
|
560
|
+
@layer components {
|
|
561
|
+
@media (forced-colors: active) {
|
|
562
|
+
.form-switch .form-switch-input {
|
|
563
|
+
forced-color-adjust: none;
|
|
564
|
+
background-color: Canvas;
|
|
565
|
+
border-color: CanvasText;
|
|
566
|
+
|
|
567
|
+
&::after {
|
|
568
|
+
background-color: CanvasText;
|
|
569
|
+
box-shadow: none;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
&:checked {
|
|
573
|
+
background-color: Highlight;
|
|
574
|
+
border-color: Highlight;
|
|
575
|
+
|
|
576
|
+
&::after {
|
|
577
|
+
background-color: HighlightText;
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
&:focus-visible,
|
|
582
|
+
&.is-focus-visible {
|
|
583
|
+
outline-color: Highlight;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
&.is-invalid {
|
|
587
|
+
border-color: LinkText;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
&:disabled,
|
|
591
|
+
&[disabled] {
|
|
592
|
+
background-color: Canvas;
|
|
593
|
+
border-color: GrayText;
|
|
594
|
+
|
|
595
|
+
&::after {
|
|
596
|
+
background-color: GrayText;
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
}
|
package/scss/text.scss
CHANGED
|
@@ -87,6 +87,16 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
|
|
91
|
+
@media (min-width: #{$bp-value}) {
|
|
92
|
+
@each $name, $value in map.get(theme.$theme, fontSizes) {
|
|
93
|
+
.text-#{$bp}-#{$name} {
|
|
94
|
+
font-size: var(--font-size-#{$name});
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
90
100
|
// Deprecated: use .line-height-* utilities instead.
|
|
91
101
|
@each $name, $value in map.get(theme.$theme, lineHeights) {
|
|
92
102
|
.lh-#{$name} {
|