@mezzanine-ui/system 0.15.3 → 1.0.0-alpha.0

package/palette/_primitives.scss

@@ -0,0 +1,267 @@
+@use 'sass:meta';
+@use '../utils/list';
+@use '../utils/map';
+
+// 定義所有可用的級距
+$primitive-scales: (25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+
+// 定義所有可用的分類
+$primitive-categories: (
+  brand,
+  red,
+  yellow,
+  green,
+  blue,
+  gray,
+  white-base,
+  black-base,
+  brand-base
+);
+
+// CSS 變數前綴
+$primitive-prefix: mzn-color-primitive;
+
+// 預設色票定義
+$default-primitives: (
+  // 品牌色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  brand: (
+    25: #FAFAFF,
+    50: #F2F4FE,
+    100: #E2E6FD,
+    200: #C2CCFA,
+    300: #9DAAF5,
+    400: #7689EF,
+    500: #5D74E9,
+    600: #5265E1,
+    700: #4353D6,
+    800: #3340C2,
+    900: #24318F,
+    950: #1A2558,
+  ),
+  // 錯誤色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  red: (
+    25: #FFFAFA,
+    50: #FFF1F1,
+    100: #FDDDDD,
+    200: #FAB6B9,
+    300: #F88B91,
+    400: #F45D65,
+    500: #F03740,
+    600: #D03335,
+    700: #B22B2D,
+    800: #911F22,
+    900: #6D1518,
+    950: #4B0B0B,
+  ),
+  // 警告色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  yellow: (
+    25: #FFFCF5,
+    50: #FFFAEB,
+    100: #FEF0C7,
+    200: #FEDF89,
+    300: #FEC84B,
+    400: #FEB022,
+    500: #F7900A,
+    600: #DC6803,
+    700: #B54708,
+    800: #93370D,
+    900: #7A2E0E,
+    950: #4E1D09,
+  ),
+  // 成功色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  green: (
+    25: #F3FCF7,
+    50: #E5F9EE,
+    100: #C5F0D8,
+    200: #94DFB8,
+    300: #57C78F,
+    400: #2BB26D,
+    500: #139F62,
+    600: #11985A,
+    700: #0E754D,
+    800: #0A5C41,
+    900: #064130,
+    950: #042B1B,
+  ),
+  // 一般 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  blue: (
+    25: #F5FAFF,
+    50: #EFF8FF,
+    100: #D1E9FF,
+    200: #B2DDFF,
+    300: #84CAFF,
+    400: #53B1FD,
+    500: #2E90FA,
+    600: #1570EF,
+    700: #175CD3,
+    800: #1849A9,
+    900: #194185,
+    950: #102A56,
+  ),
+  // 中性灰階 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  gray: (
+    25: #FBFBFC,
+    50: #F9FAFB,
+    100: #F3F4F6,
+    200: #E5E7EB,
+    300: #C9CBD4,
+    400: #9DA4AE,
+    500: #6C737F,
+    600: #525A61,
+    700: #404750,
+    800: #29313B,
+    900: #191E26,
+    950: #101319,
+  ),
+  // 白色系 - 特殊級距: white, white-alpha-10/20/.../90
+  white-base: (
+    white: #FFF,
+    white-alpha-5:  rgb(255 255 255 / 5%),
+    white-alpha-10: rgb(255 255 255 / 10%),
+    white-alpha-20: rgb(255 255 255 / 20%),
+    white-alpha-30: rgb(255 255 255 / 30%),
+    white-alpha-40: rgb(255 255 255 / 40%),
+    white-alpha-50: rgb(255 255 255 / 50%),
+    white-alpha-60: rgb(255 255 255 / 60%),
+    white-alpha-70: rgb(255 255 255 / 70%),
+    white-alpha-80: rgb(255 255 255 / 80%),
+    white-alpha-90: rgb(255 255 255 / 90%),
+  ),
+  // 黑色系 - 特殊級距: black, black-alpha-3/5/8/10/20/.../90
+  black-base: (
+    black: #000,
+    black-alpha-3: rgb(0 0 0 / 3%),
+    black-alpha-5: rgb(0 0 0 / 5%),
+    black-alpha-8: rgb(0 0 0 / 8%),
+    black-alpha-10: rgb(0 0 0 / 10%),
+    black-alpha-20: rgb(0 0 0 / 20%),
+    black-alpha-30: rgb(0 0 0 / 30%),
+    black-alpha-40: rgb(0 0 0 / 40%),
+    black-alpha-50: rgb(0 0 0 / 50%),
+    black-alpha-60: rgb(0 0 0 / 60%),
+    black-alpha-70: rgb(0 0 0 / 70%),
+    black-alpha-80: rgb(0 0 0 / 80%),
+    black-alpha-90: rgb(0 0 0 / 90%),
+  ),
+  // 品牌色透明度 - 特殊級距: brand-alpha-10/20/.../90
+  brand-base: (
+    brand-alpha-10: rgb(93 116 233 / 10%),
+    brand-alpha-20: rgb(93 116 233 / 20%),
+    brand-alpha-30: rgb(93 116 233 / 30%),
+    brand-alpha-40: rgb(93 116 233 / 40%),
+    brand-alpha-50: rgb(93 116 233 / 50%),
+    brand-alpha-60: rgb(93 116 233 / 60%),
+    brand-alpha-70: rgb(93 116 233 / 70%),
+    brand-alpha-80: rgb(93 116 233 / 80%),
+    brand-alpha-90: rgb(93 116 233 / 90%),
+  ),
+);
+
+// 驗證分類名稱是否有效
+@function is-valid-category($category) {
+  @return list.index($primitive-categories, $category) != null;
+}
+
+// 驗證顏色值是否已定義
+@function is-color-defined($color) {
+  @return $color != null;
+}
+
+// 取得特定分類的所有有效 scale 名稱
+@function get-valid-scales($category, $primitives: $default-primitives) {
+  $category-colors: map.get($primitives, $category);
+
+  @if not $category-colors {
+    @return ();
+  }
+
+  @return map.keys($category-colors);
+}
+
+// 驗證 scale 是否對該分類有效
+@function is-valid-scale-for-category($category, $scale, $primitives: $default-primitives) {
+  $valid-scales: get-valid-scales($category, $primitives);
+
+  @return list.index($valid-scales, $scale) != null;
+}
+
+// 取得特定分類的所有顏色
+@function get-category-colors($category, $primitives: $default-primitives) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @return map.get($primitives, $category);
+}
+
+// 取得特定分類和級距的顏色值
+@function get-color($category, $scale, $primitives: $default-primitives) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @if not is-valid-scale-for-category($category, $scale, $primitives) {
+    $valid-scales: get-valid-scales($category, $primitives);
+
+    @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+  }
+
+  $category-colors: map.get($primitives, $category);
+  $color: map.get($category-colors, $scale);
+
+  @if not is-color-defined($color) {
+    @error 'Color not defined for #{$category}-#{$scale}';
+  }
+
+  @return $color;
+}
+
+// 取得 CSS 變數名稱
+// e.g: --mzn-color-primitive-brand-500
+@function get-var-name($category, $scale) {
+  @if $primitive-prefix == '' {
+    @return --#{$category}-#{$scale};
+  }
+
+  @return --#{$primitive-prefix}-#{$category}-#{$scale};
+}
+
+// 使用 CSS 變數引用顏色
+@function variable($category, $scale) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @if not is-valid-scale-for-category($category, $scale) {
+    $valid-scales: get-valid-scales($category);
+
+    @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+  }
+
+  @return var(#{get-var-name($category, $scale)});
+}
+
+// 生成所有 CSS 變數
+@mixin variables($primitives: (), $skip-undefined: true) {
+  $primitives: map.deep-merge($default-primitives, $primitives);
+
+  @each $category, $colors in $primitives {
+    @if not is-valid-category($category) {
+      @error 'Invalid category "#{$category}" in primitives map. Valid categories are: #{$primitive-categories}';
+    }
+
+    @each $scale, $color in $colors {
+      @if not is-valid-scale-for-category($category, $scale, $primitives) {
+        $valid-scales: get-valid-scales($category, $primitives);
+
+        @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+      }
+
+      @if is-color-defined($color) {
+        #{get-var-name($category, $scale)}: #{$color};
+      } @else if not $skip-undefined {
+        @error 'Color not defined for #{$category}-#{$scale}';
+      }
+    }
+  }
+}