Skip to content

Instantly share code, notes, and snippets.

@yinonov
Created March 30, 2022 10:33
Show Gist options
  • Save yinonov/5134a5e34a97c4bdccb0753c3fb6bc93 to your computer and use it in GitHub Desktop.
Save yinonov/5134a5e34a97c4bdccb0753c3fb6bc93 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:selector';
@use 'sass:list';
@use 'sass:map';
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
$all-appearances: (
filled: 'filled',
outlined: 'outlined',
soft: 'soft',
text: 'text',
ghost: 'ghost',
);
$states-mapping: (
idle: (
filled: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
outlined: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
ghost: (
text: lightblue,
fill: lightgreen,
outline: lightred,
)
),
disabled: (
filled: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
outlined: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
ghost: (
text: lightblue,
fill: lightgreen,
outline: lightred,
)
),
hover: (
filled: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
outlined: (
text: lightblue,
fill: lightgreen,
outline: lightred,
),
ghost: (
text: lightblue,
fill: lightgreen,
outline: lightred,
)
)
);
$appearance-set: filled;
$states: idle disabled hover;
@mixin appearance {
background-color: var(--appearance-color-fill);
box-shadow: inset 0 0 0 1px var(--appearance-color-outline);
color: var(--appearance-color-text);
@each $state in $states {
&.#{$state} {
$state-mapping: map.get($states-mapping, $state);
@each $appearance in $appearance-set {
&.appearance-#{$appearance} {
$appearance-mapping: map.get($state-mapping, $appearance);
@each $type in $appearance-mapping {
--appearance-color-#{$type}: blue;
}
}
}
}
}
}
.control {
@include appearance;
}
.control {
background-color: var(--appearance-color-fill);
box-shadow: inset 0 0 0 1px var(--appearance-color-outline);
color: var(--appearance-color-text);
}
.control.idle.appearance-filled {
--appearance-color-text lightblue: blue;
--appearance-color-fill lightgreen: blue;
--appearance-color-outline lightred: blue;
}
.control.disabled.appearance-filled {
--appearance-color-text lightblue: blue;
--appearance-color-fill lightgreen: blue;
--appearance-color-outline lightred: blue;
}
.control.hover.appearance-filled {
--appearance-color-text lightblue: blue;
--appearance-color-fill lightgreen: blue;
--appearance-color-outline lightred: blue;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment