Skip to content

Commit

Permalink
✨ feat(button.scss): Integrate native hover color generation for butt…
Browse files Browse the repository at this point in the history 
…ons using bg- modifier classes
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Dec 24, 2023
1 parent 8d47712 commit 7b55b6d
Show file tree
Hide file tree
Showing 8 changed files with 2,303 additions and 1,061 deletions.
1,098 changes: 757 additions & 341 deletions dist/cirrus-all.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus-all.min.css
View file

Large diffs are not rendered by default.

1,098 changes: 757 additions & 341 deletions dist/cirrus-core.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus-core.min.css
View file

Large diffs are not rendered by default.

1,098 changes: 757 additions & 341 deletions dist/cirrus.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/cirrus.min.css
View file

Large diffs are not rendered by default.

37 changes: 21 additions & 16 deletions src/base/modifiers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,23 @@
// Not important, use this as a fallback in case no border is set
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};

// background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) !important;
background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) !important;
}

.#{$variant-prefix}#{$prefix}text-#{$name}#{$suffix-str}#{$variant-suffix} {
--btn-fg: #{hex-to-rgb($color)};
--btn-border-color: #{hex-to-rgb($color)};

// color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
// // Not important, use this as a fallback in case no border is set
// border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
// Not important, use this as a fallback in case no border is set
border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
}

.#{$variant-prefix}#{$prefix}border-#{$name}#{$suffix-str}#{$variant-suffix} {
--btn-border-color: #{hex-to-rgb($color)};
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)} !important;

// border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) !important;
border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) !important;
}
}
}
Expand All @@ -90,27 +90,32 @@
@each $level, $color in $palette {
@if $color != null {
.#{$variant-prefix}#{$prefix}bg-#{$name}-#{$level}#{$suffix-str}#{$variant-suffix} {
--btn-color: #{hex-to-rgb($color)};
// Not important, use this as a fallback in case no border is set
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};

// background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) !important;
&:is(#{$button-selectors}) {
--btn-color: #{hex-to-rgb($color)};
--btn-hover-color: #{hex-to-rgb(to-hover-color($color, 5%))} !important;
// Not important, use this as a fallback in case no border is set
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};
}

&:not(#{$button-selectors}) {
background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) !important;
}
}

.#{$variant-prefix}#{$prefix}text-#{$name}-#{$level}#{$suffix-str}#{$variant-suffix} {
--btn-fg: #{hex-to-rgb($color)};
--btn-border-color: #{hex-to-rgb($color)};

// color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
// // Not important, use this as a fallback in case no border is set
// border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
// Not important, use this as a fallback in case no border is set
border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity));
}

.#{$variant-prefix}#{$prefix}border-#{$name}-#{$level}#{$suffix-str}#{$variant-suffix} {
--btn-border-color: #{hex-to-rgb($color)};
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)} !important;
--btn-border-color: #{hex-to-rgb($color)} !important;
--btn-shadow: 0 0 0 0.2rem #{transparentize($color, 0.5)};

// border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) !important;
border-color: rgba(#{hex-to-rgb($color)}, var(--border-opacity)) !important;
}
}
}
Expand Down
27 changes: 8 additions & 19 deletions src/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,12 @@
--btn-color: #{hex-to-rgb(fill('gray', '000'))};
--btn-fg: #{hex-to-rgb(fill('gray', '700'))};
--btn-border-color: #{hex-to-rgb(fill('gray', '200'))};
--btn-hover-color: #{hex-to-rgb(fill('gray', '100'))};

/* Base States */
&:hover {
background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
transition: all var(--animation-duration);
--btn-color: #{hex-to-rgb(fill('gray', '100'))};
color: rgba(var(--btn-fg), var(--color-opacity));
}

Expand Down Expand Up @@ -140,10 +141,10 @@
--btn-fg: #{hex-to-rgb(fill('dark'))};
--btn-border-color: transparent;
--btn-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
--btn-hover-color: 0, 0, 0;

&:hover {
--bg-opacity: 0.1;
--btn-color: 0, 0, 0;
}
&.outline {
--btn-fg: #{hex-to-rgb(fill('dark'))};
Expand All @@ -155,21 +156,15 @@
--btn-fg: #{hex-to-rgb(fill('dark'))};
--btn-border-color: #{hex-to-rgb(fill('light'))};
--btn-shadow: 0 0 0 0.2rem #{transparentize(fill('light'), 0.5)};

&:hover {
--btn-color: #{hex-to-rgb(darken(fill('light'), 10%))};
}
--btn-hover-color: #{hex-to-rgb(darken(fill('light'), 10%))};
}

&.btn-black {
--btn-color: 0, 0, 0;
--btn-fg: #{hex-to-rgb(fill('light'))};
--btn-border-color: 0, 0, 0;
--btn-shadow: 0 0 0 0.2rem #{transparentize(fill('dark'), 0.5)};

&:hover {
--btn-color: 0, 0, 0;
}
--btn-hover-color: 0, 0, 0;
}

@each $color, $value in $control-themes {
Expand All @@ -178,13 +173,7 @@
--btn-fg: #{hex-to-rgb(map-get($value, fg))};
--btn-border-color: #{hex-to-rgb(map-get($value, bg))};
--btn-shadow: 0 0 0 0.2rem #{transparentize(map-get($value, bg), 0.5)};

&:hover {
--btn-color: #{hex-to-rgb(darken(map-get($value, bg), 10%))};
}
&.outline:hover {
--btn-color: #{hex-to-rgb(map-get($value, bg))};
}
--btn-hover-color: #{hex-to-rgb(darken(map-get($value, bg), 10%))};
}
}

Expand Down Expand Up @@ -231,7 +220,7 @@
transition: all var(--animation-duration);

&:hover {
background-color: rgba(var(--btn-color), var(--bg-opacity));
background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
border-color: rgba(var(--btn-border-color), var(--color-opacity));
transition: all var(--animation-duration);
}
Expand All @@ -242,7 +231,7 @@
color: rgba(var(--btn-color), var(--color-opacity));

&:hover {
background-color: rgba(var(--btn-color), var(--bg-opacity));
background-color: rgba(var(--btn-hover-color), var(--bg-opacity));
color: rgba(var(--btn-fg), var(--color-opacity));
transition: all var(--animation-duration);
}
Expand Down

0 comments on commit 7b55b6d

Please sign in to comment.