Skip to content

Commit

Permalink
feat: use css vars by default | remove no css vars posibility (#17)
Browse files Browse the repository at this point in the history 
* feat: refactor use vars

* refactor: remove unused helper

* refactor: linting

* remove $css-var
  • Loading branch information
@mlmoravek
mlmoravek authored Apr 7, 2024
1 parent 5d10838 commit 3ae0cfa
Show file tree
Hide file tree
Showing 32 changed files with 1,327 additions and 2,560 deletions.
1 change: 1 addition & 0 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
"stylelint-scss",
],
rules: {
"scss/operator-no-newline-after": [true, { "severity": "warning" }],
"scss/at-extend-no-missing-placeholder": null,
"no-duplicate-selectors": [true, { "severity": "warning" }],
"no-descending-specificity": [true, { "severity": "warning" }],
Expand Down
55 changes: 1 addition & 54 deletions src/assets/scss/components/_autocomplete.scss
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,15 @@
/* @docs */
$autocomplete-item-color: #000000 !default;
$autocomplete-item-disabled-opacity: $base-disabled-opacity !default;
$autocomplete-item-font-size: $base-font-size !default;
$autocomplete-item-hover-background-color: #f5f5f5 !default;
$autocomplete-item-hover-color: #000000 !default;
$autocomplete-item-line-height: $base-line-height !default;
$autocomplete-item-padding: 0.375rem 1rem !default;
/* @docs */

.o-acp {
position: relative;

&__item {
display: block;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;

@include avariable(
"color",
"autocomplete-item-color",
$autocomplete-item-color
);
@include avariable(
"font-size",
"autocomplete-item-font-size",
$autocomplete-item-font-size
);
@include avariable(
"line-height",
"autocomplete-item-line-height",
$autocomplete-item-line-height
);
@include avariable(
"padding",
"autocomplete-item-padding",
$autocomplete-item-padding
);

&-group-title,
&--empty {
pointer-events: none;

@include avariable(
"opacity",
"autocomplete-item-disabled-opacity",
$autocomplete-item-disabled-opacity
);
}

&--hover,
&:hover {
@include avariable(
"background",
"autocomplete-item-hover-background-color",
$autocomplete-item-hover-background-color
);
@include avariable(
"color",
"autocomplete-item-hover-color",
$autocomplete-item-hover-color
);
@extend .o-drop--disabled;
}
}
}
142 changes: 54 additions & 88 deletions src/assets/scss/components/_button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
@use "sass:list";

/* @docs */
$button-background-color: $primary !default;
$button-color: $primary-invert !default;
$button-border-radius: $base-border-radius !default;
$button-background-color: var(--#{$prefix}primary) !default;
$button-color: var(--#{$prefix}primary-invert) !default;
$button-border-radius: var(--#{$prefix}base-border-radius) !default;
$button-border: 1px solid $button-background-color !default;
$button-box-shadow: none !default;
$button-font-weight: 400 !default;
$button-line-height: $base-line-height !default;
$button-line-height: var(--#{$prefix}base-line-height) !default;
$button-margin-icon-to-text: 0.1875em !default;
$button-margin: 0 !default;
$button-height: $control-height !default;
$button-padding: $control-padding-vertical 0.75em !default;
$button-rounded-border-radius: $base-rounded-border-radius !default;
$button-disabled-opacity: $base-disabled-opacity !default;
$button-rounded-border-radius: #{base-rounded-border-radius} !default;
$button-disabled-opacity: #{base-disabled-opacity} !default;
$button-outlined-background-color: transparent !default;
/* @docs */

Expand All @@ -28,8 +28,6 @@ $button-outlined-background-color: transparent !default;
}

.o-btn {
-moz-appearance: none;
-webkit-appearance: none;
position: relative;
display: inline-flex;
cursor: pointer;
Expand All @@ -41,25 +39,23 @@ $button-outlined-background-color: transparent !default;
text-decoration: none;

@include unselectable;
@include avariable(
"background-color",
"button-background-color",
-moz-appearance: none;
-webkit-appearance: none;

background-color: var(
--#{$prefix}button-background-color,
$button-background-color
);
@include avariable("color", "button-color", $button-color);
@include avariable("padding", "button-padding", $button-padding);
@include avariable("border", "button-border", $button-border);
@include avariable(
"border-radius",
"button-border-radius",
$button-border-radius
);
@include avariable("box-shadow", "button-box-shadow", $button-box-shadow);
@include avariable("font-size", "base-font-size", $base-font-size);
@include avariable("font-weight", "button-font-weight", $button-font-weight);
@include avariable("line-height", "button-line-height", $button-line-height);
@include avariable("margin", "button-margin", $button-margin);
@include avariable("height", "button-height", $button-height);
color: var(--#{$prefix}button-color, $button-color);
padding: var(--#{$prefix}button-padding, $button-padding);
border: var(--#{$prefix}button-border, $button-border);
border-radius: var(--#{$prefix}button-border-radius, $button-border-radius);
box-shadow: var(--#{$prefix}button-box-shadow, $button-box-shadow);
font-size: var(--#{$prefix}base-font-size, $base-font-size);
font-weight: var(--#{$prefix}button-font-weight, $button-font-weight);
line-height: var(--#{$prefix}button-line-height, $button-line-height);
margin: var(--#{$prefix}button-margin, $button-margin);
height: var(--#{$prefix}button-height, $button-height);

&__wrapper {
@include side-flex-gap($button-margin-icon-to-text);
Expand All @@ -79,40 +75,34 @@ $button-outlined-background-color: transparent !default;
}

&--rounded {
@include avariable(
"border-radius",
"button-rounded-border-radius",
border-radius: var(
--#{$prefix}button-rounded-border-radius,
$button-rounded-border-radius
);
}

&--disabled {
@include avariable(
"opacity",
"button-disabled-opacity",
$button-disabled-opacity
);
opacity: var(--#{$prefix}button-disabled-opacity, $button-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
}

// size variants
@each $name, $value in $sizes {
&--#{$name} {
@include avariable("font-size", ("button-font-size-" + #{$name}), $value);
font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
}
}

// color variants
@each $name, $pair in $colors {
$color: list.nth($pair, 1);
$color-invert: list.nth($pair, 2);

&--#{$name} {
border-color: transparent;

@include avariable("background-color", ("variant-" + #{$name}), $color);
@include avariable(
"color",
("variant-invert-" + #{$name}),
$color-invert
);
background-color: var(--#{$prefix}variant-#{$name}, $color);
color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);

&:hover {
// background-color: darken($color, 2.5%)
Expand All @@ -123,58 +113,42 @@ $button-outlined-background-color: transparent !default;
}

&--outlined {
@include avariable(
"background-color",
"button-outlined-background-color",
background-color: var(
--#{$prefix}button-outlined-background-color,
$button-outlined-background-color
);
@include avariable(
"border-color",
"button-background-color",
$button-background-color
);
@include avariable(
"color",
"button-background-color",
border-color: var(
--#{$prefix}button-background-color,
$button-background-color
);
color: var(--#{$prefix}button-background-color, $button-background-color);

&:hover {
border-color: transparent;

@include avariable(
"background-color",
"button-background-color",
background-color: var(
--#{$prefix}button-background-color,
$button-background-color
);
@include avariable("color", "button-color", $button-color);
color: var(--#{$prefix}button-color, $button-color);
}

@each $name, $pair in $colors {
$color: list.nth($pair, 1);
$color-invert: list.nth($pair, 2);

&-#{$name} {
@include avariable(
"background-color",
"button-outlined-background-color",
background-color: var(
--#{$prefix}button-outlined-background-color,
$button-outlined-background-color
);
@include avariable("border-color", ("variant-" + #{$name}), $color);
@include avariable("color", ("variant-" + #{$name}), $color);
border-color: var(--#{$prefix}variant-#{$name}, $color);
color: var(--#{$prefix}variant-#{$name}, $color);

&:hover {
border-color: transparent;

@include avariable(
"background-color",
("variant-" + #{$name}),
$color
);
@include avariable(
"color",
("variant-invert-" + #{$name}),
$color-invert
);
background-color: var(--#{$prefix}variant-#{$name}, $color);
color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
}
}
}
Expand All @@ -201,13 +175,9 @@ $button-outlined-background-color: transparent !default;
}

&--inverted {
@include avariable("background-color", "button-color", $button-color);
@include avariable("border-color", "button-color", $button-color);
@include avariable(
"color",
"button-background-color",
$button-background-color
);
background-color: var(--#{$prefix}button-color, $button-color);
border-color: var(--#{$prefix}button-color, $button-color);
color: var(--#{$prefix}button-background-color, $button-background-color);

&:hover {
// background-color: darken($color-invert, 5%)
Expand All @@ -218,18 +188,14 @@ $button-outlined-background-color: transparent !default;
@each $name, $pair in $colors {
$color: list.nth($pair, 1);
$color-invert: list.nth($pair, 2);

&-#{$name} {
@include avariable(
"background-color",
("variant-invert-" + #{$name}),
$color-invert
);
@include avariable(
"border-color",
("variant-invert-" + #{$name}),
background-color: var(
--#{$prefix}variant-invert-#{$name},
$color-invert
);
@include avariable("color", ("variant-" + #{$name}), $color);
border-color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
color: var(--#{$prefix}variant-#{$name}, $color);

&:hover {
// background-color: darken($color-invert, 5%)
Expand Down
Loading

0 comments on commit 3ae0cfa

Please sign in to comment.