_colors.scss (2960B)
1 @use 'sass:map'; 2 @use 'sass:meta'; 3 @use 'sass:color'; 4 5 // https://m3.material.io/theme-builder 6 7 $themes: ( 8 'primary': ( 9 'light': #006b5a, 10 'dark': #2cdebf, 11 ), 12 'on-primary': ( 13 'light': #ffffff, 14 'dark': #00382e, 15 ), 16 'primary-container': ( 17 'light': #58fbda, 18 'dark': #005143, 19 ), 20 'on-primary-container': ( 21 'light': #00201a, 22 'dark': #58fbda, 23 ), 24 25 'secondary': ( 26 'light': #7b4998, 27 'dark': #e6b4ff, 28 ), 29 'on-secondary': ( 30 'light': #ffffff, 31 'dark': #491866, 32 ), 33 'secondary-container': ( 34 'light': #f5d9ff, 35 'dark': #61317e, 36 ), 37 'on-secondary-container': ( 38 'light': #30004a, 39 'dark': #f5d9ff, 40 ), 41 42 'tertiary': ( 43 'light': #426278, 44 'dark': #aacbe4, 45 ), 46 'on-tertiary': ( 47 'light': #ffffff, 48 'dark': #103447, 49 ), 50 'tertiary-container': ( 51 'light': #c7e7ff, 52 'dark': #2a4a5f, 53 ), 54 'on-tertiary-container': ( 55 'light': #001e2e, 56 'dark': #c7e7ff, 57 ), 58 59 'error': ( 60 'light': #ff0000, 61 'dark': #ffb4ab, 62 ), 63 'on-error': ( 64 'light': #ffffff, 65 'dark': #690005, 66 ), 67 'error-container': ( 68 'light': #ffdad6, 69 'dark': #93000a, 70 ), 71 'on-error-container': ( 72 'light': #410002, 73 'dark': #ffdad6, 74 ), 75 76 'background': ( 77 'light': #fafdfa, 78 'dark': #191c1b, 79 ), 80 'on-background': ( 81 'light': #191c1b, 82 'dark': #e1e3e0, 83 ), 84 85 'surface': ( 86 'light': #fafdfa, 87 'dark': #191c1b, 88 ), 89 'on-surface': ( 90 'light': #191c1b, 91 'dark': #e1e3e0, 92 ), 93 94 'surface-variant': ( 95 'light': #dbe5e0, 96 'dark': #3f4946, 97 ), 98 'on-surface-variant': ( 99 'light': #3f4946, 100 'dark': #bfc9c4, 101 ), 102 103 'outline': ( 104 'light': #6f7975, 105 'dark': #89938f, 106 ), 107 ); 108 109 @function get($theme, $key) { 110 @if meta.type-of($key) == 'color' { 111 @return $key; 112 } 113 114 @if meta.type-of($key) != 'string' { 115 @error 'Expected a string or color, but got #{$key}.'; 116 } 117 118 @if not map.has-key($themes, $key) { 119 @error 'Invalid color key: #{$key}' 120 } 121 122 $colors: map.get($themes, $key); 123 @return map.get($colors, $theme); 124 } 125 126 @mixin apply-themes() { 127 @content('light'); 128 129 @media (prefers-color-scheme: dark) { 130 @content('dark'); 131 } 132 } 133 134 @mixin _sets($theme, $suffix) { 135 @each $key in (primary, secondary, tertiary, error) { 136 $color-key: '#{$key}#{$suffix}'; 137 $on-color-key: 'on-#{$key}#{$suffix}'; 138 139 @if $theme == null { 140 @content($key, $color-key, $on-color-key) 141 } @else { 142 $colors: map.get($themes, $color-key); 143 $on-colors: map.get($themes, $on-color-key); 144 145 $color: map.get($colors, $theme); 146 $on-color: map.get($on-colors, $theme); 147 148 @content($key, $color, $on-color); 149 } 150 } 151 } 152 153 @mixin sets($theme: null) { 154 @include _sets($theme, '') using ($key, $color, $color-on) { 155 @content($key, $color, $color-on); 156 } 157 } 158 159 @mixin container-sets($theme: null) { 160 @include _sets($theme, '-container') using ($key, $color, $color-on) { 161 @content($key, $color, $color-on); 162 } 163 }