alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(core): add styles for vanilla form elements

Browse source 
#1
This commit is contained in:
Alexander Navarro 2024-09-16 20:35:38 -03:00
parent 919afcbcfc
commit e754e40622
22 changed files with 1034 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

80
packages/core/src/_tokens.scss
View file

@ -44,44 +44,58 @@ $spacings: (
$border-radius: 0.5rem;
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
$msp-colors: (
"--msp-color-bg": #{getColor("mantle")},
"--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
"--msp-color-bg-surface-1": #{getColor("base")},
"--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
"--msp-color-bg-surface-3": #{getColor("surface1")},
"--msp-color-bg-accent": #{getColor("teal")},
"--msp-color-bg-primary": #{getColor("teal")},
"--msp-color-bg-secondary": #{getColor("mauve")},
"--msp-color-bg-danger": #{getColor("red")},
"--msp-color-bg-disabled": #{getColor("red")},
"--msp-color-bg-input": #{getColor("text")},
"--msp-color-bg-checkbox": #{getColor("teal")},
"--msp-color-bg-range": #{getColor("surface1")},
"--msp-color-bg-btn": #{getColor("teal")},
"--msp-color-text": #{getColor("text")},
"--msp-color-text-surface": #{getColor("text")},
"--msp-color-text-link": #{getColor("teal")},
"--msp-color-text-accent": #{getColor("base")},
"--msp-color-text-primary": #{getColor("base")},
"--msp-color-text-secondary": #{getColor("base")},
"--msp-color-text-danger": #{getColor("base")},
"--msp-color-text-disabled": #{color.scale(getColor("text"), $alpha: -30%)},
"--msp-color-text-input": #{getColor("base")},
"--msp-color-text-input-disabled": #{color.scale(
getColor("base"),
$alpha: -30%
)},
"--msp-color-text-checkbox": #{getColor("surface1")},
"--msp-color-text-range": #{getColor("teal")},
"--msp-color-text-btn": #{getColor("base")},
"--msp-color-shadow": #{getColor("crust")},
"--msp-color-transparent": transparent,
);
// Native CSS Variables to allow overridings and usage in external stylesheets
:root {
/* Variables prefixed with prj to avoid collisions */
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
--msp-bg: #{getColor("mantle")};
--msp-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
--msp-shadow: #{getColor("crust")};
--msp-text: #{getColor("text")};
--msp-surface-1: #{getColor("base")};
--msp-surface-2: #{darken(getColor("surface0"), 2%)};
--msp-surface-3: #{getColor("surface1")};
--msp-surface-text: #{getColor("text")};
--msp-link-text: #{getColor("teal")};
--msp-accent-bg: #{getColor("teal")};
--msp-accent-text: #{getColor("base")};
--msp-primary: #{getColor("teal")};
--msp-primary-text: #{getColor("base")};
--msp-secondary: #{getColor("mauve")};
--msp-secondary-text: #{getColor("base")};
--msp-danger: #{getColor("red")};
--msp-danger-text: #{getColor("base")};
--msp-disabled: #{getColor("red")};
--msp-disabled-text: rgba(#{getColor("raw")}, 0.5);
--msp-input: #{getColor("text")};
--msp-input-text: #{getColor("base")};
@each $variable, $value in $msp-colors {
#{$variable}: #{$value};
}
@each $index, $variable, $value in $spacings {
#{$variable}: #{$value};
}
--msp-border-radius: #{$border-radius};
// ── Borders ─────────────────────────────────────────────────────────────
--msp-border-width: 1px;
--msp-border-color: var(--msp-color-bg-transparent);
--msp-border-style: solid;
--msp-border-radius: 0.2rem;
}