Skip to content

Commit

Permalink
✨ feat(button.scss): Revamp entire button + coloring system to use he…
Browse files Browse the repository at this point in the history 
…x values. This is needed to support background/border/text colors with opacity
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Dec 28, 2021
1 parent 1176332 commit de0beca
Show file tree
Hide file tree
Showing 11 changed files with 976 additions and 782 deletions.
803 changes: 447 additions & 356 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.

803 changes: 447 additions & 356 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.

60 changes: 32 additions & 28 deletions src/base/default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,41 @@
--cirrus-fg: #{$cirrus-fg};
--cirrus-bg: #{$cirrus-bg};

--cirrus-primary: #{$cirrus-primary};
--cirrus-primary: #{hex-to-rgb($cirrus-primary)};
--cirrus-primary-rgb: #{hex-to-rgb($cirrus-primary)};
--cirrus-primary-light: #{$cirrus-primary-light};
--cirrus-accent-hover: #{$cirrus-accent-hover};
--cirrus-accent-border: #{$cirrus-accent-border};
--cirrus-light: #{$cirrus-light};
--cirrus-light-gray: #{$cirrus-light-gray};
--cirrus-gray: #{$cirrus-gray};
--cirrus-dark-gray: #{$cirrus-dark-gray};
--cirrus-dark: #{$cirrus-dark};
--cirrus-link: #{$cirrus-link};
--cirrus-link-dark: #{$cirrus-link-dark};
--cirrus-info: #{$cirrus-info};
--cirrus-success: #{$cirrus-success};
--cirrus-primary-light: #{hex-to-rgb($cirrus-primary-light)};
--cirrus-accent-hover: #{hex-to-rgb($cirrus-accent-hover)};
--cirrus-accent-border: #{hex-to-rgb($cirrus-accent-border)};
--cirrus-light: #{hex-to-rgb($cirrus-light)};
--cirrus-light-gray: #{hex-to-rgb($cirrus-light-gray)};
--cirrus-gray: #{hex-to-rgb($cirrus-gray)};
--cirrus-dark-gray: #{hex-to-rgb($cirrus-dark-gray)};
--cirrus-dark: #{hex-to-rgb($cirrus-dark)};
--cirrus-link: #{hex-to-rgb($cirrus-link)};
--cirrus-link-dark: #{hex-to-rgb($cirrus-link-dark)};
--cirrus-info: #{hex-to-rgb($cirrus-info)};
--cirrus-success: #{hex-to-rgb($cirrus-success)};
--cirrus-success-rgb: #{hex-to-rgb($cirrus-success)};
--cirrus-warning: #{$cirrus-warning};
--cirrus-danger: #{$cirrus-danger};
--cirrus-black: #{$cirrus-black};
--cirrus-white: #{$cirrus-white};

--cirrus-light-hover: #{darken($cirrus-light, 10%)};
--cirrus-dark-hover: #{lighten($cirrus-dark, 10%)};
--cirrus-info-hover: #{darken($cirrus-info, 5%)};
--cirrus-link-hover: #{$cirrus-link-hover};
--cirrus-success-hover: #{darken($cirrus-success, 5%)};
--cirrus-warning-hover: #{darken($cirrus-warning, 5%)};
--cirrus-danger-hover: #{darken($cirrus-danger, 15%)};
--cirrus-warning: #{hex-to-rgb($cirrus-warning)};
--cirrus-danger: #{hex-to-rgb($cirrus-danger)};
--cirrus-black: #{hex-to-rgb($cirrus-black)};
--cirrus-white: #{hex-to-rgb($cirrus-white)};

--cirrus-light-hover: #{hex-to-rgb(darken($cirrus-light, 10%))};
--cirrus-dark-hover: #{hex-to-rgb(lighten($cirrus-dark, 10%))};
--cirrus-info-hover: #{hex-to-rgb(darken($cirrus-info, 5%))};
--cirrus-link-hover: #{hex-to-rgb($cirrus-link-hover)};
--cirrus-success-hover: #{hex-to-rgb(darken($cirrus-success, 5%))};
--cirrus-warning-hover: #{hex-to-rgb(darken($cirrus-warning, 5%))};
--cirrus-danger-hover: #{hex-to-rgb(darken($cirrus-danger, 15%))};

--cirrus-select-bg: #{$cirrus-select-bg};

--cirrus-code-bg: var(--cirrus-primary-light);
--cirrus-code-bg: rgba(var(--cirrus-primary-light), 1);
--cirrus-code-fg: #{$cirrus-code-fg};

--cirrus-form-group-bg: var(--cirrus-light-gray);
--cirrus-form-group-fg: var(--cirrus-dark-gray);
--cirrus-form-group-bg: rgba(var(--cirrus-light-gray), 1);
--cirrus-form-group-fg: rgba(var(--cirrus-dark-gray), 1);

--toast-primary-bg: #{$toast-primary-bg};

Expand All @@ -58,6 +58,10 @@

--cirrus-focus-size: #{$focus-size};
--cirrus-focus-color: #{$focus-color};

// Global var defaults
--bg-opacity: 1;
--color-opacity: 1;
}

* {
Expand Down
12 changes: 6 additions & 6 deletions src/base/modifiers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@

@each $palette in $v1Palettes {
.bg-#{$palette} {
background-color: var(--cirrus-#{$palette}) !important;
background-color: rgba(var(--cirrus-#{$palette}), var(--color-opacity)) !important;
}

.text-#{$palette} {
border-color: var(--cirrus-#{$palette}) !important;
color: var(--cirrus-#{$palette}) !important;
border-color: rgba(var(--cirrus-#{$palette}), var(--color-opacity)) !important;
color: rgba(var(--cirrus-#{$palette}), var(--color-opacity)) !important;
}
}

Expand All @@ -60,12 +60,12 @@
@each $name, $palette in $v2Palettes {
@each $level, $color in $palette {
.bg-#{$name}-#{$level} {
background-color: #{$color} !important;
background-color: rgba(#{hex-to-rgb($color)}, var(--bg-opacity)) !important;
}

.text-#{$name}-#{$level} {
border-color: #{$color} !important;
color: #{$color} !important;
border-color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
color: rgba(#{hex-to-rgb($color)}, var(--color-opacity)) !important;
}
}
}
45 changes: 23 additions & 22 deletions src/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ $generate-utility: should-generate-classes($BUTTON);
cursor: pointer;
text-align: center;
transition: all var(--animation-duration);
background-color: var(--btn-color);
border-color: var(--btn-border-color);
color: var(--btn-fg);
background-color: rgba(var(--btn-color), var(--bg-opacity));
border-color: rgba(var(--btn-border-color), var(--color-opacity));
color: rgba(var(--btn-fg), var(--color-opacity));
font-size: $font-size-xs;
font-weight: inherit; // Reset button if used in <a> tag
letter-spacing: 0.03rem;
Expand All @@ -43,15 +43,15 @@ $generate-utility: should-generate-classes($BUTTON);
user-select: none;
margin-bottom: 1rem;
outline: none;
--btn-color: #{map-get($grays, '000')};
--btn-fg: #{map-get($grays, '700')};
--btn-border-color: #{map-get($grays, '200')};
--btn-color: #{hex-to-rgb(map-get($grays, '000'))};
--btn-fg: #{hex-to-rgb(map-get($grays, '700'))};
--btn-border-color: #{hex-to-rgb(map-get($grays, '200'))};

/* Base States */
&:hover {
transition: all var(--animation-duration);
--btn-color: #{map-get($grays, '100')};
color: var(--btn-fg);
--btn-color: #{hex-to-rgb(map-get($grays, '100'))};
color: rgba(var(--btn-fg), var(--color-opacity));
}

&:active {
Expand All @@ -75,7 +75,7 @@ $generate-utility: should-generate-classes($BUTTON);
--btn-color: transparent;

&:hover {
--btn-color: #{map-get($grays, '200')};
--btn-color: #{hex-to-rgb(map-get($grays, '200'))};
}
}

Expand Down Expand Up @@ -140,7 +140,8 @@ $generate-utility: should-generate-classes($BUTTON);
box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5);
}
&:hover {
--btn-color: rgba(0, 0, 0, 0.1);
--bg-opacity: 0.1;
--btn-color: 0, 0, 0;
}
&.outline {
--btn-fg: var(--cirrus-dark);
Expand Down Expand Up @@ -177,15 +178,15 @@ $generate-utility: should-generate-classes($BUTTON);
}

&.btn-black {
--btn-color: #000;
--btn-color: 0, 0, 0;
--btn-fg: var(--cirrus-light);
--btn-border-color: #000;
--btn-border-color: 0, 0, 0;

&:focus {
box-shadow: 0 0 0 0.2rem transparentize($cirrus-dark, 0.5);
}
&:hover {
--btn-color: #000;
--btn-color: 0, 0, 0;
}
}

Expand Down Expand Up @@ -328,30 +329,30 @@ $generate-utility: should-generate-classes($BUTTON);

[class^='btn-']:not(.btn-container):not(.btn-close),
[class*=' btn-']:not(.btn-container):not(.btn-close) {
background-color: var(--btn-color);
border: 1px solid var(--btn-border-color);
color: var(--btn-fg);
background-color: rgba(var(--btn-color), var(--bg-opacity));
border: 1px solid rgba(var(--btn-border-color), var(--color-opacity));
color: rgba(var(--btn-fg), var(--color-opacity));
transition: all var(--animation-duration);

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

/* Outline Variants */
&.outline {
background-color: transparent;
color: var(--btn-color);
color: rgba(var(--btn-color), var(--color-opacity));

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

&.btn-transparent {
color: #{map-get($grays, '700')} !important;
color: #{hex-to-rgb(map-get($grays, '700'))} !important;
}
}
}
Expand Down
26 changes: 15 additions & 11 deletions src/internal/_config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
// Deep merged with the default config. This means that this will override existing keys and append new key value pairs.
$config: (

// Please define all these using hex
colors: (),
) !default;

// ==================================================
Expand All @@ -32,6 +34,8 @@ $default-config: (
flags.$TEXT: true,
flags.$MARGIN-PADDING: true,
flags.$OPACITY: true,
flags.$BACKGROUND-OPACITY: false,
flags.$COLOR-OPACITY: false,
flags.$WIDTHS: true,
flags.$HEIGHTS: true,
flags.$ZINDEX: false,
Expand Down Expand Up @@ -484,17 +488,17 @@ $default-config: (
screen: 100vh,
),
opacity: (
'0': 0,
'10': 0.1,
'20': 0.2,
'30': 0.3,
'40': 0.4,
'50': 0.5,
'60': 0.6,
'70': 0.7,
'80': 0.8,
'90': 0.9,
'100': 1,
0: 0,
10: 0.1,
20: 0.2,
30: 0.3,
40: 0.4,
50: 0.5,
60: 0.6,
70: 0.7,
80: 0.8,
90: 0.9,
100: 1,
),
round: (
'none': 0px,
Expand Down
2 changes: 2 additions & 0 deletions src/internal/_flags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ $OVERFLOW: 'OVERFLOW';
$POSITION: 'POSITION';
$TEXT: 'TEXT';
$OPACITY: 'OPACITY';
$BACKGROUND-OPACITY: 'BACKGROUND-OPACITY';
$COLOR-OPACITY: 'COLOR-OPACITY';
$ZINDEX: 'ZINDEX';
$ABSOLUTE: 'ABSOLUTE';
$FLEX-GAP: 'FLEX-GAP';
Expand Down
2 changes: 1 addition & 1 deletion src/internal/_functions.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use 'sass:string';
@use 'sass:list';
@use 'sass:map';
@use '../../node_modules/sass-true/sass/config/throw';
@use '../../node_modules/sass-true/sass/true' as *;

Expand Down Expand Up @@ -70,4 +71,3 @@ $DELIMETER: '-';
);
}
}

1 change: 1 addition & 0 deletions src/internal/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'functions';
/* v1 Color scheme for Cirrus */

$cirrus-black: #000000;
Expand Down

0 comments on commit de0beca

Please sign in to comment.