ꯝꯆꯨ

ꯊꯤꯃꯒꯤ ꯃꯆꯨꯁꯤꯡ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ ꯃꯆꯨꯒꯤ ꯄꯦꯂꯦꯠ ꯑꯃꯥ ꯁꯦꯝꯃꯤ, ꯃꯁꯤꯁꯨ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ scss/_variables.scssꯐꯥꯏꯂꯗꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯪꯏ꯫

ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯪꯏ, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯂꯨꯄꯁꯤꯡꯒꯤ ꯗꯣꯀꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ scss/_variables.scssꯐꯥꯏꯂꯗꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯐꯪꯏ꯫ ꯐꯥꯏꯜ ꯁꯥꯏꯖ ꯍꯦꯅꯒꯠꯂꯀꯄꯥ ꯊꯤꯡꯅꯕꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯇꯦꯛꯁ ꯅꯠꯔꯒꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯒꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯦꯃꯗꯦ꯫ ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯊꯤꯝ ꯄꯦꯂꯦꯠ ꯑꯃꯒꯤꯗꯃꯛ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯥ ꯈꯅꯒꯠꯂꯤ .

ꯃꯆꯨꯁꯤꯡ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯀꯟꯠꯔꯁ꯭ꯠ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ ꯁꯣꯏꯗꯅꯥ ꯌꯦꯡꯁꯤꯅꯕꯤꯌꯨ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯃꯆꯨ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯀꯟꯠꯔꯁ꯭ꯠ ꯔꯦꯁꯤꯑꯣ ꯑꯍꯨꯝ ꯍꯥꯄꯆꯤꯜꯂꯦ-ꯁ꯭ꯕꯆꯀꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯃꯆꯨꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯥ ꯑꯃꯥ, ꯋꯥꯏꯇꯦꯄꯀꯤ ꯃꯥꯌꯣꯛꯇꯥ ꯑꯃꯥ, ꯑꯃꯁꯨꯡ ꯕ꯭ꯂꯦꯀꯀꯤ ꯃꯥꯌꯣꯛꯇꯥ ꯑꯃꯥ꯫

ꯁꯥꯁꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯅꯣꯠꯁꯤꯡ꯫

ꯁꯥꯁꯅꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯉꯃꯗꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌ ꯏꯁꯥꯅꯥ ꯇꯤꯟ ꯑꯃꯁꯨꯡ ꯁꯦꯠ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯈꯤ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯤꯗꯄꯣꯏꯟꯇ ꯚꯦꯜꯌꯨ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, $blue-500) ꯇꯥꯀꯏ ꯑꯃꯁꯨꯡ ꯁꯥꯁꯀꯤ ꯃꯆꯨꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯆꯨꯁꯤꯡ ꯇꯤꯟ (ꯃꯉꯥꯜ) ꯅꯠꯠꯔꯒꯥ ꯁꯦꯠꯄꯥ (ꯑꯃꯨꯛꯇꯪ) ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯃꯆꯨꯒꯤ mix()ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯑꯃꯁꯨꯡ —ꯑꯍꯥꯅꯕꯥ mix()ꯑꯁꯤꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯆꯨ ꯑꯗꯨ ꯋꯥꯏꯇꯦꯞ ꯅꯠꯠꯔꯒꯥ ꯕ꯭ꯂꯦꯀꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯕ꯭ꯂꯦꯟꯗ ꯇꯧꯏ, ꯑꯗꯨꯒꯥ ꯇꯨꯡꯗꯥ ꯂꯥꯀꯄꯥ ꯑꯁꯤꯅꯥ ꯃꯆꯨ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯂꯥꯏꯠꯅꯦꯁ ꯚꯦꯜꯌꯨ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯍꯩꯗꯤ ꯀꯣꯗꯄꯦꯟ ꯗꯦꯃꯣ ꯑꯁꯤꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯆꯨꯁꯤꯡꯒꯤ ꯌꯥꯝꯅꯥ ꯍꯦꯟꯅꯥ ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯁꯨꯏꯠ ꯑꯃꯥ ꯑꯣꯏꯔꯤ .lighten()darken()

ꯑꯩꯈꯣꯌꯒꯤ tint-color()ꯑꯃꯁꯨꯡ shade-color()ꯐꯉ꯭ꯀꯁꯅꯁꯤꯡꯅꯥ mix()ꯑꯩꯈꯣꯌꯒꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ $theme-color-interval, ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯨꯊꯣꯀꯄꯥ ꯃꯤꯛꯁ ꯃꯆꯨ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯞ ꯇꯧꯔꯕꯥ ꯆꯥꯗꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯇꯥꯀꯏ꯫ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯁꯣꯔꯁ ꯀꯣꯗꯀꯤꯗꯃꯛꯇꯥ scss/_functions.scssꯑꯃꯁꯨꯡ ꯐꯥꯏꯂꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫scss/_variables.scss

ꯃꯆꯨ ꯁꯪꯂꯕꯥ ꯃꯦꯄꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯐꯥꯏꯂꯁꯤꯡꯗꯥ ꯃꯆꯨꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯍꯦꯛꯁ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯊꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯌꯥꯝꯅꯥ ꯂꯥꯏꯅꯥ ꯂꯨꯞ ꯇꯧꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯃꯦꯞ ꯑꯍꯨꯝ ꯌꯥꯑꯣꯔꯤ꯫

• $colorsꯑꯩꯈꯣꯌꯒꯤ ꯂꯩꯔꯤꯕꯥ ꯕꯦꯖ ( 500) ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ ꯂꯤꯁ꯭ꯠ ꯇꯧꯔꯤ꯫
• $theme-colorsꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯃꯃꯤꯡ ꯊꯣꯜꯂꯕꯥ ꯊꯤꯝ ꯃꯆꯨ ꯄꯨꯝꯅꯃꯛ ꯂꯤꯁ꯭ꯠ ꯇꯧꯏ (ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤ)
• $graysꯒ꯭ꯔꯦꯒꯤ ꯇꯤꯟ ꯑꯃꯁꯨꯡ ꯁꯦꯠ ꯄꯨꯝꯅꯃꯛ ꯂꯤꯁ꯭ꯠ ꯇꯧꯏ꯫

,ꯒꯤ ꯃꯅꯨꯡꯗꯥ scss/_variables.scss, ꯅꯍꯥꯛꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯆꯨꯒꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯁꯥꯁ ꯃꯦꯞ ꯑꯗꯨ ꯐꯪꯒꯅꯤ꯫ ꯃꯈꯥꯗꯥ $colorsꯁꯥꯁ ꯃꯦꯄꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

ꯑꯇꯣꯞꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯌꯥꯗꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯑꯄꯗꯦꯠ ꯇꯧꯅꯕꯥ ꯃꯦꯄꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ, ꯂꯧꯊꯣꯀꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫ ꯅꯨꯡꯉꯥꯏꯇꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯅꯥ ꯃꯇꯝ ꯑꯁꯤꯗꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯦ꯫ ꯇꯨꯡꯗꯥ ꯂꯥꯛꯀꯗꯕꯥ ꯑꯄꯗꯦꯠꯁꯤꯡꯅꯥ ꯃꯁꯤꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯛꯅꯕꯥ ꯍꯣꯠꯅꯒꯅꯤ꯫ ꯃꯇꯝ ꯑꯗꯨ ꯐꯥꯑꯣꯕꯗꯥ, ${color}ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯊꯧꯔꯥꯡ ꯇꯧꯕꯤꯌꯨ꯫

ꯈꯨꯗꯝ

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯁꯇꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯒꯦ:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

ꯃꯆꯨꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯦꯠ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ ꯃꯆꯨ ꯑꯃꯁꯨꯡ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯐꯪꯏ꯫colorbackground-color500