0
Fork 0
mirror of https://github.com/penpot/penpot-export.git synced 2025-01-23 15:08:48 -05:00
penpot-export/packages/demos/demo-scss/main.scss
Roberto Redradix ba9886beb4 feat(demo): split demos per output format
Adds a SCSS-specific demo
2023-09-15 18:12:15 +02:00

79 lines
2.9 KiB
SCSS

@use "sass:list";
@use "sass:map";
@use './variables/colors.scss';
@use './variables/typographies.scss';
@mixin patchColor($name, $color) {
&.bg-#{$name} {
background-color: $color;
}
}
.patch {
display: inline-block;
vertical-align: bottom;
margin-right: .3em;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background-color: inherit;
@include patchColor('Primary_100', colors.$Primary_100);
@include patchColor('Primary_200', colors.$Primary_200);
@include patchColor('Primary_300', colors.$Primary_300);
@include patchColor('Primary_400', colors.$Primary_400);
@include patchColor('Primary_500', colors.$Primary_500);
@include patchColor('Primary_600', colors.$Primary_600);
@include patchColor('Primary_700', colors.$Primary_700);
@include patchColor('Primary_800', colors.$Primary_800);
@include patchColor('Primary_900', colors.$Primary_900);
@include patchColor('Secondary_100', colors.$Secondary_100);
@include patchColor('Secondary_200', colors.$Secondary_200);
@include patchColor('Secondary_300', colors.$Secondary_300);
@include patchColor('Secondary_400', colors.$Secondary_400);
@include patchColor('Secondary_500', colors.$Secondary_500);
@include patchColor('Secondary_600', colors.$Secondary_600);
@include patchColor('Secondary_700', colors.$Secondary_700);
@include patchColor('Secondary_800', colors.$Secondary_800);
@include patchColor('Secondary_900', colors.$Secondary_900);
@include patchColor('Neutral_100', colors.$Neutral_100);
@include patchColor('Neutral_200', colors.$Neutral_200);
@include patchColor('Neutral_300', colors.$Neutral_300);
@include patchColor('Neutral_400', colors.$Neutral_400);
@include patchColor('Neutral_500', colors.$Neutral_500);
@include patchColor('Neutral_600', colors.$Neutral_600);
@include patchColor('Neutral_700', colors.$Neutral_700);
@include patchColor('Neutral_800', colors.$Neutral_800);
@include patchColor('Neutral_900', colors.$Neutral_900);
}
$breakpoint: 768px;
@mixin desktop() {
@media (min-width: $breakpoint) {
@content;
}
}
@mixin typographyClass($name, $typographyMap) {
.#{$name} {
@each $prop, $value in $typographyMap {
#{$prop}: $value;
}
}
}
@include typographyClass('Body_Large', typographies.$Body_Large);
@include typographyClass('Body_Medium', typographies.$Body_Medium);
@include typographyClass('Body_Small', typographies.$Body_Small);
@include typographyClass('Body_Small_Uppercase', typographies.$Body_Small_Uppercase);
@include typographyClass('Title_Large', typographies.$📱_Title_Large);
@include typographyClass('Title_Medium', typographies.$📱_Title_Medium);
@include typographyClass('Title_Small', typographies.$📱_Title_Small);
@include desktop() {
@include typographyClass('Title_Large', typographies.$🖥_Title_Large);
@include typographyClass('Title_Medium', typographies.$🖥_Title_Medium);
@include typographyClass('Title_Small', typographies.$🖥_Title_Small);
}