Skip to content

Commit 5f02a9b

Browse files
mrholekmrholek
committed
feat: add new helpers and utilities
1 parent a542ada commit 5f02a9b

File tree

4 files changed

+198
-23
lines changed

4 files changed

+198
-23
lines changed

‎scss/_helpers.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import "helpers/clearfix";
22
@import "helpers/color-bg";
33
@import "helpers/colored-links";
4+
@import "helpers/focus-ring";
5+
@import "helpers/icon-link";
46
@import "helpers/ratio";
57
@import "helpers/position";
68
@import "helpers/stacks";

‎scss/_utilities.scss

Lines changed: 166 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,20 @@ $utilities: map-merge(
2323
rtl: true
2424
),
2525
// scss-docs-end utils-float
26+
// Object Fit utilities
27+
// scss-docs-start utils-object-fit
28+
"object-fit": (
29+
responsive: true,
30+
property: object-fit,
31+
values: (
32+
contain: contain,
33+
cover: cover,
34+
fill: fill,
35+
scale: scale-down,
36+
none: none,
37+
)
38+
),
39+
// scss-docs-end utils-object-fit
2640
// Opacity utilities
2741
// scss-docs-start utils-opacity
2842
"opacity": (
@@ -41,14 +55,22 @@ $utilities: map-merge(
4155
property: overflow,
4256
values: auto hidden visible scroll,
4357
),
58+
"overflow-x": (
59+
property: overflow-x,
60+
values: auto hidden visible scroll,
61+
),
62+
"overflow-y": (
63+
property: overflow-y,
64+
values: auto hidden visible scroll,
65+
),
4466
// scss-docs-end utils-overflow
4567
// scss-docs-start utils-display
4668
"display": (
4769
responsive: true,
4870
print: true,
4971
property: display,
5072
class: d,
51-
values: inline inline-block block grid table table-row table-cell flex inline-flex none
73+
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
5274
),
5375
// scss-docs-end utils-display
5476
// scss-docs-start utils-shadow
@@ -63,6 +85,14 @@ $utilities: map-merge(
6385
)
6486
),
6587
// scss-docs-end utils-shadow
88+
// scss-docs-start utils-focus-ring
89+
"focus-ring": (
90+
css-var: true,
91+
css-variable-name: focus-ring-color,
92+
class: focus-ring,
93+
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
94+
),
95+
// scss-docs-end utils-focus-ring
6696
// scss-docs-start utils-position
6797
"position": (
6898
property: position,
@@ -171,8 +201,7 @@ $utilities: map-merge(
171201
rtl: true
172202
),
173203
"border-width": (
174-
css-var: true,
175-
css-variable-name: border-width,
204+
property: border-width,
176205
class: border,
177206
values: $border-widths
178207
),
@@ -370,7 +399,7 @@ $utilities: map-merge(
370399
responsive: true,
371400
property: margin,
372401
class: m,
373-
values: map-merge($spacers, (auto: auto)),
402+
values: map-merge($spacers, (auto: auto))
374403
),
375404
"margin-x": (
376405
responsive: true,
@@ -507,6 +536,18 @@ $utilities: map-merge(
507536
class: gap,
508537
values: $spacers
509538
),
539+
"row-gap": (
540+
responsive: true,
541+
property: row-gap,
542+
class: row-gap,
543+
values: $spacers
544+
),
545+
"column-gap": (
546+
responsive: true,
547+
property: column-gap,
548+
class: column-gap,
549+
values: $spacers
550+
),
510551
// scss-docs-end utils-spacing
511552
// Text
512553
// scss-docs-start utils-text
@@ -530,8 +571,8 @@ $utilities: map-merge(
530571
property: font-weight,
531572
class: fw,
532573
values: (
533-
light: $font-weight-light,
534574
lighter: $font-weight-lighter,
575+
light: $font-weight-light,
535576
normal: $font-weight-normal,
536577
medium: $font-weight-medium,
537578
semibold: $font-weight-semibold,
@@ -588,25 +629,28 @@ $utilities: map-merge(
588629
"color": (
589630
property: color,
590631
class: text,
632+
dark-mode: true,
591633
local-vars: (
592634
"text-opacity": 1
593635
),
594636
values: map-merge(
595637
$utilities-text-colors,
596638
(
597-
"muted": $text-muted,
639+
"muted": var(--#{$prefix}secondary-color), // deprecated
598640
"black-50": rgba($black, .5), // deprecated
599641
"white-50": rgba($white, .5), // deprecated
642+
"body-secondary": var(--#{$prefix}secondary-color),
643+
"body-tertiary": var(--#{$prefix}tertiary-color),
644+
"body-emphasis": var(--#{$prefix}emphasis-color),
600645
"reset": inherit,
601-
"high-emphasis-inverse": $text-high-emphasis-inverse,
602-
"medium-emphasis-inverse": $text-medium-emphasis-inverse,
603-
"disabled-inverse": $text-disabled-inverse,
604-
"high-emphasis": $text-high-emphasis,
605-
"medium-emphasis": $text-medium-emphasis,
606-
"disabled": $text-disabled
646+
"high-emphasis-inverse": var(--#{$prefix}high-emphasis-inverse), // deprecated
647+
"medium-emphasis-inverse": var(--#{$prefix}medium-emphasis-inverse), // deprecated
648+
"disabled-inverse": var(--#{$prefix}disabled-inverse), // deprecated
649+
"high-emphasis": var(--#{$prefix}high-emphasis), // deprecated
650+
"medium-emphasis": var(--#{$prefix}medium-emphasis), // deprecated
651+
"disabled": var(--#{$prefix}disabled)
607652
)
608-
),
609-
vars: true
653+
)
610654
),
611655
"text-opacity": (
612656
css-var: true,
@@ -619,20 +663,72 @@ $utilities: map-merge(
619663
)
620664
),
621665
// scss-docs-end utils-color
666+
// scss-docs-start utils-links
667+
"link-opacity": (
668+
css-var: true,
669+
class: link-opacity,
670+
state: hover,
671+
values: (
672+
10: .1,
673+
25: .25,
674+
50: .5,
675+
75: .75,
676+
100: 1
677+
)
678+
),
679+
"link-offset": (
680+
property: text-underline-offset,
681+
class: link-offset,
682+
state: hover,
683+
values: (
684+
1: .125em,
685+
2: .25em,
686+
3: .375em,
687+
)
688+
),
689+
"link-underline": (
690+
property: text-decoration-color,
691+
class: link-underline,
692+
local-vars: (
693+
"link-underline-opacity": 1
694+
),
695+
values: map-merge(
696+
$utilities-links-underline,
697+
(
698+
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
699+
)
700+
)
701+
),
702+
"link-underline-opacity": (
703+
css-var: true,
704+
class: link-underline-opacity,
705+
state: hover,
706+
values: (
707+
0: 0,
708+
10: .1,
709+
25: .25,
710+
50: .5,
711+
75: .75,
712+
100: 1
713+
),
714+
),
715+
// scss-docs-end utils-links
622716
// scss-docs-start utils-bg-color
623717
"background-color": (
624718
property: background-color,
625719
class: bg,
720+
dark-mode: true,
626721
local-vars: (
627722
"bg-opacity": 1
628723
),
629724
values: map-merge(
630725
$utilities-bg-colors,
631726
(
632-
"transparent": transparent
727+
"transparent": transparent,
728+
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
729+
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
633730
)
634-
),
635-
vars: true
731+
)
636732
),
637733
"bg-opacity": (
638734
css-var: true,
@@ -673,31 +769,71 @@ $utilities: map-merge(
673769
2: var(--#{$prefix}border-radius),
674770
3: var(--#{$prefix}border-radius-lg),
675771
4: var(--#{$prefix}border-radius-xl),
676-
5: var(--#{$prefix}border-radius-2xl),
772+
5: var(--#{$prefix}border-radius-xxl),
677773
circle: 50%,
678774
pill: var(--#{$prefix}border-radius-pill)
679775
)
680776
),
681777
"rounded-top": (
682778
property: border-top-left-radius border-top-right-radius,
683779
class: rounded-top,
684-
values: (null: var(--#{$prefix}border-radius))
780+
values: (
781+
null: var(--#{$prefix}border-radius),
782+
0: 0,
783+
1: var(--#{$prefix}border-radius-sm),
784+
2: var(--#{$prefix}border-radius),
785+
3: var(--#{$prefix}border-radius-lg),
786+
4: var(--#{$prefix}border-radius-xl),
787+
5: var(--#{$prefix}border-radius-xxl),
788+
circle: 50%,
789+
pill: var(--#{$prefix}border-radius-pill)
790+
)
685791
),
686792
"rounded-end": (
687793
property: border-top-right-radius border-bottom-right-radius,
688794
class: rounded-end,
689-
values: (null: var(--#{$prefix}border-radius)),
795+
values: (
796+
null: var(--#{$prefix}border-radius),
797+
0: 0,
798+
1: var(--#{$prefix}border-radius-sm),
799+
2: var(--#{$prefix}border-radius),
800+
3: var(--#{$prefix}border-radius-lg),
801+
4: var(--#{$prefix}border-radius-xl),
802+
5: var(--#{$prefix}border-radius-xxl),
803+
circle: 50%,
804+
pill: var(--#{$prefix}border-radius-pill)
805+
),
690806
rtl: true
691807
),
692808
"rounded-bottom": (
693809
property: border-bottom-right-radius border-bottom-left-radius,
694810
class: rounded-bottom,
695-
values: (null: var(--#{$prefix}border-radius))
811+
values: (
812+
null: var(--#{$prefix}border-radius),
813+
0: 0,
814+
1: var(--#{$prefix}border-radius-sm),
815+
2: var(--#{$prefix}border-radius),
816+
3: var(--#{$prefix}border-radius-lg),
817+
4: var(--#{$prefix}border-radius-xl),
818+
5: var(--#{$prefix}border-radius-xxl),
819+
circle: 50%,
820+
pill: var(--#{$prefix}border-radius-pill)
821+
)
696822
),
697823
"rounded-start": (
698824
property: border-bottom-left-radius border-top-left-radius,
699825
class: rounded-start,
700-
values: (null: var(--#{$prefix}border-radius)),
826+
values: (
827+
null: var(--#{$prefix}border-radius),
828+
0: 0,
829+
1: var(--#{$prefix}border-radius-sm),
830+
2: var(--#{$prefix}border-radius),
831+
3: var(--#{$prefix}border-radius-lg),
832+
4: var(--#{$prefix}border-radius-xl),
833+
5: var(--#{$prefix}border-radius-xxl),
834+
circle: 50%,
835+
pill: var(--#{$prefix}border-radius-pill)
836+
),
701837
rtl: true
702838
),
703839
// scss-docs-end utils-border-radius
@@ -709,8 +845,15 @@ $utilities: map-merge(
709845
visible: visible,
710846
invisible: hidden,
711847
)
712-
)
848+
),
713849
// scss-docs-end utils-visibility
850+
// scss-docs-start utils-zindex
851+
"z-index": (
852+
property: z-index,
853+
class: z,
854+
values: $zindex-levels,
855+
)
856+
// scss-docs-end utils-zindex
714857
),
715858
$utilities
716859
);

‎scss/helpers/_focus-ring.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.focus-ring:focus {
2+
outline: 0;
3+
// By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
4+
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
5+
}

‎scss/helpers/_icon-link.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.icon-link {
2+
display: inline-flex;
3+
gap: $icon-link-gap;
4+
align-items: center;
5+
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
6+
text-underline-offset: $icon-link-underline-offset;
7+
backface-visibility: hidden;
8+
9+
> .bi {
10+
flex-shrink: 0;
11+
width: $icon-link-icon-size;
12+
height: $icon-link-icon-size;
13+
fill: currentcolor;
14+
@include transition($icon-link-icon-transition);
15+
}
16+
}
17+
18+
.icon-link-hover {
19+
&:hover,
20+
&:focus-visible {
21+
> .bi {
22+
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
23+
}
24+
}
25+
}

0 commit comments

Comments
 (0)