@edmicro/olkit 2.1.8 → 2.1.10

package/styles/layout.css

@@ -1,94 +1,94 @@
-/* Primitives: Spacing, Radius, Typography, Shadows & Container Tokens từ Figma Ôn Luyện Design System */
-:root {
-  /* 1. Complete Spacing Scale (36 values từ Figma) */
-  --spacing-0: 0px;
-  --spacing-0_5: 0.125rem; /* 2px */
-  --spacing-1: 0.25rem; /* 4px */
-  --spacing-1_5: 0.375rem; /* 6px */
-  --spacing-2: 0.5rem; /* 8px */
-  --spacing-2_5: 0.625rem; /* 10px */
-  --spacing-3: 0.75rem; /* 12px */
-  --spacing-3_5: 0.875rem; /* 14px */
-  --spacing-4: 1rem; /* 16px */
-  --spacing-4_5: 1.125rem; /* 18px */
-  --spacing-5: 1.25rem; /* 20px */
-  --spacing-6: 1.5rem; /* 24px */
-  --spacing-7: 1.75rem; /* 28px */
-  --spacing-8: 2rem; /* 32px */
-  --spacing-9: 2.25rem; /* 36px */
-  --spacing-10: 2.5rem; /* 40px */
-  --spacing-11: 2.75rem; /* 44px */
-  --spacing-12: 3rem; /* 48px */
-  --spacing-14: 3.5rem; /* 56px */
-  --spacing-16: 4rem; /* 64px */
-  --spacing-20: 5rem; /* 80px */
-  --spacing-24: 6rem; /* 96px */
-  --spacing-28: 7rem; /* 112px */
-  --spacing-32: 8rem; /* 128px */
-  --spacing-36: 9rem; /* 144px */
-  --spacing-40: 10rem; /* 160px */
-  --spacing-44: 11rem; /* 176px */
-  --spacing-48: 12rem; /* 192px */
-  --spacing-52: 13rem; /* 208px */
-  --spacing-56: 14rem; /* 224px */
-  --spacing-60: 15rem; /* 240px */
-  --spacing-64: 16rem; /* 256px */
-
-  /* 2. Border Radius Scale — khai TRONG tokens.css, không lặp lại ở đây.
-     Trước đây 11 biến radius khai trùng cả hai nơi với giá trị y hệt; tokens.css
-     nạp sau nên luôn thắng, sửa ở file này không có tác dụng gì. tokens.css còn
-     đủ hơn: nó có --radius-md mà file này thiếu, trong khi isolation.css dựa vào
-     đúng biến đó cho bo góc mặc định của mọi nút. */
-
-  /* 3. Border Width Scale */
-  --border-width-0: 0px;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --border-width-4: 4px;
-  --border-width-8: 8px;
-
-  /* 4. Typography Primitives (Font Size & Line Height) */
-  --font-size-2xs: 0.625rem; /* 10px / lh: 14px */
-  --font-size-xs: 0.75rem; /* 12px / lh: 16px */
-  --font-size-sm: 0.875rem; /* 14px / lh: 20px */
-  --font-size-base: 1rem; /* 16px / lh: 24px */
-  --font-size-lg: 1.125rem; /* 18px / lh: 28px */
-  --font-size-xl: 1.25rem; /* 20px / lh: 28px */
-  --font-size-2xl: 1.5rem; /* 24px / lh: 32px */
-  --font-size-3xl: 1.875rem; /* 30px / lh: 36px */
-  --font-size-4xl: 2.25rem; /* 36px / lh: 40px */
-  --font-size-5xl: 3rem; /* 48px / lh: 48px */
-  --font-size-6xl: 3.75rem; /* 60px / lh: 60px */
-
-  /* Font Weights */
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  /* 5. Box Shadows */
-  --shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  --shadow-xs: 0px 1px 0.5px 0.05px rgba(30, 41, 57, 0.02);
-  --shadow-sm: 0px 1px 2px 0px rgba(30, 41, 57, 0.05);
-  --shadow-base: 0px 1px 3px 0px rgba(30, 41, 57, 0.1), 0px 1px 2px -1px rgba(30, 41, 57, 0.1);
-  --shadow-md: 0px 4px 6px -1px rgba(30, 41, 57, 0.1), 0px 2px 4px -2px rgba(30, 41, 57, 0.1);
-  --shadow-lg: 0px 10px 15px -3px rgba(30, 41, 57, 0.1), 0px 4px 6px -4px rgba(30, 41, 57, 0.1);
-  --shadow-xl: 0px 20px 25px -5px rgba(30, 41, 57, 0.1), 0px 8px 10px -6px rgba(30, 41, 57, 0.1);
-  --shadow-2xl: 0px 25px 50px -12px rgba(30, 41, 57, 0.25);
-  --shadow-inner: inset 0px 2px 4px 0px rgba(30, 41, 57, 0.06);
-  --shadow-top: 0px -2px 6px 0px rgba(30, 41, 57, 0.08);
-
-  /* 6. Container Max Widths */
-  --container-xs: 20rem; /* 320px */
-  --container-sm: 24rem; /* 384px */
-  --container-md: 28rem; /* 448px */
-  --container-lg: 32rem; /* 512px */
-  --container-xl: 36rem; /* 576px */
-  --container-2xl: 42rem; /* 672px */
-  --container-3xl: 48rem; /* 768px */
-  --container-4xl: 56rem; /* 896px */
-  --container-5xl: 64rem; /* 1024px */
-  --container-6xl: 72rem; /* 1152px */
-  --container-7xl: 80rem; /* 1280px */
-}
+/* Primitives: Spacing, Radius, Typography, Shadows & Container Tokens từ Figma Ôn Luyện Design System */
+:root {
+  /* 1. Complete Spacing Scale (36 values từ Figma) */
+  --spacing-0: 0px;
+  --spacing-0_5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1_5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2_5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3_5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-4_5: 1.125rem; /* 18px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-32: 8rem; /* 128px */
+  --spacing-36: 9rem; /* 144px */
+  --spacing-40: 10rem; /* 160px */
+  --spacing-44: 11rem; /* 176px */
+  --spacing-48: 12rem; /* 192px */
+  --spacing-52: 13rem; /* 208px */
+  --spacing-56: 14rem; /* 224px */
+  --spacing-60: 15rem; /* 240px */
+  --spacing-64: 16rem; /* 256px */
+
+  /* 2. Border Radius Scale — khai TRONG tokens.css, không lặp lại ở đây.
+     Trước đây 11 biến radius khai trùng cả hai nơi với giá trị y hệt; tokens.css
+     nạp sau nên luôn thắng, sửa ở file này không có tác dụng gì. tokens.css còn
+     đủ hơn: nó có --radius-md mà file này thiếu, trong khi isolation.css dựa vào
+     đúng biến đó cho bo góc mặc định của mọi nút. */
+
+  /* 3. Border Width Scale */
+  --border-width-0: 0px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  /* 4. Typography Primitives (Font Size & Line Height) */
+  --font-size-2xs: 0.625rem; /* 10px / lh: 14px */
+  --font-size-xs: 0.75rem; /* 12px / lh: 16px */
+  --font-size-sm: 0.875rem; /* 14px / lh: 20px */
+  --font-size-base: 1rem; /* 16px / lh: 24px */
+  --font-size-lg: 1.125rem; /* 18px / lh: 28px */
+  --font-size-xl: 1.25rem; /* 20px / lh: 28px */
+  --font-size-2xl: 1.5rem; /* 24px / lh: 32px */
+  --font-size-3xl: 1.875rem; /* 30px / lh: 36px */
+  --font-size-4xl: 2.25rem; /* 36px / lh: 40px */
+  --font-size-5xl: 3rem; /* 48px / lh: 48px */
+  --font-size-6xl: 3.75rem; /* 60px / lh: 60px */
+
+  /* Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* 5. Box Shadows */
+  --shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  --shadow-xs: 0px 1px 0.5px 0.05px rgba(30, 41, 57, 0.02);
+  --shadow-sm: 0px 1px 2px 0px rgba(30, 41, 57, 0.05);
+  --shadow-base: 0px 1px 3px 0px rgba(30, 41, 57, 0.1), 0px 1px 2px -1px rgba(30, 41, 57, 0.1);
+  --shadow-md: 0px 4px 6px -1px rgba(30, 41, 57, 0.1), 0px 2px 4px -2px rgba(30, 41, 57, 0.1);
+  --shadow-lg: 0px 10px 15px -3px rgba(30, 41, 57, 0.1), 0px 4px 6px -4px rgba(30, 41, 57, 0.1);
+  --shadow-xl: 0px 20px 25px -5px rgba(30, 41, 57, 0.1), 0px 8px 10px -6px rgba(30, 41, 57, 0.1);
+  --shadow-2xl: 0px 25px 50px -12px rgba(30, 41, 57, 0.25);
+  --shadow-inner: inset 0px 2px 4px 0px rgba(30, 41, 57, 0.06);
+  --shadow-top: 0px -2px 6px 0px rgba(30, 41, 57, 0.08);
+
+  /* 6. Container Max Widths */
+  --container-xs: 20rem; /* 320px */
+  --container-sm: 24rem; /* 384px */
+  --container-md: 28rem; /* 448px */
+  --container-lg: 32rem; /* 512px */
+  --container-xl: 36rem; /* 576px */
+  --container-2xl: 42rem; /* 672px */
+  --container-3xl: 48rem; /* 768px */
+  --container-4xl: 56rem; /* 896px */
+  --container-5xl: 64rem; /* 1024px */
+  --container-6xl: 72rem; /* 1152px */
+  --container-7xl: 80rem; /* 1280px */
+}

package/styles/patterns.css

@@ -1,163 +1,163 @@
-/*
- * Hoạ tiết nền Ôn Luyện — 20 kiểu của Figma component "Pattern"
- * (canvas "▒ Hoạ tiết" #1240:55097), dùng qua `<ol-pattern type="…">`.
- *
- * ## Vì sao file riêng, KHÔNG gộp vào olkit.css
- *
- * 20 file SVG nặng 1,1 MB (đã nén SVGO; bản xuất Figma 2,8 MB). Nhúng vào
- * JS hay vào olkit.css thì app nào import kit cũng mang theo. Ở đây mỗi kiểu
- * là một file SVG RIÊNG, CSS `mask-image: url(...)` trỏ tới — Angular CLI chép
- * file theo, trình duyệt chỉ TẢI kiểu đang hiện trên trang.
- *
- *   angular.json → "styles": [..., "node_modules/@edmicro/olkit/styles/patterns.css"]
- *
- * ## Vì sao mask, không background-image
- *
- * Mask lấy KÊNH ALPHA của SVG làm khuôn, màu là `background-color:
- * currentColor` — một hoạ tiết dùng được mọi màu (trắng trên navy, brand trên
- * nền sáng) qua class `text-*`, không cần 20 × N bản màu. Độ mờ từng nét trong
- * Figma (stroke-opacity) vẫn giữ vì nằm trong kênh alpha.
- *
- * Bản xuất Figma kèm nền xám #F0F0F0, khung nền tối #101828 và viền #E5E7EB
- * của frame — đã lọc, chỉ giữ nhóm `Type=…`.
- */
-.ol-pattern {
-  background-color: currentColor;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: cover;
-  mask-size: cover;
-}
-.ol-pattern--fit-contain {
-  -webkit-mask-size: contain;
-  mask-size: contain;
-}
-/* Lặp ô gốc theo kích thước thật của hình Figma (~1512×776). */
-.ol-pattern--fit-repeat {
-  -webkit-mask-repeat: repeat;
-  mask-repeat: repeat;
-  -webkit-mask-size: auto;
-  mask-size: auto;
-}
-
-/* Figma: Type=Lines */
-.ol-pattern--lines {
-  -webkit-mask-image: url('./patterns/lines.svg');
-  mask-image: url('./patterns/lines.svg');
-}
-
-/* Figma: Type=Rounded Lines */
-.ol-pattern--rounded-lines {
-  -webkit-mask-image: url('./patterns/rounded-lines.svg');
-  mask-image: url('./patterns/rounded-lines.svg');
-}
-
-/* Figma: Type=Creative */
-.ol-pattern--creative {
-  -webkit-mask-image: url('./patterns/creative.svg');
-  mask-image: url('./patterns/creative.svg');
-}
-
-/* Figma: Type=Diamond right */
-.ol-pattern--diamond-right {
-  -webkit-mask-image: url('./patterns/diamond-right.svg');
-  mask-image: url('./patterns/diamond-right.svg');
-}
-
-/* Figma: Type=Diamond left */
-.ol-pattern--diamond-left {
-  -webkit-mask-image: url('./patterns/diamond-left.svg');
-  mask-image: url('./patterns/diamond-left.svg');
-}
-
-/* Figma: Type=Vertical lines */
-.ol-pattern--vertical-lines {
-  -webkit-mask-image: url('./patterns/vertical-lines.svg');
-  mask-image: url('./patterns/vertical-lines.svg');
-}
-
-/* Figma: Type=oblique lines */
-.ol-pattern--oblique-lines {
-  -webkit-mask-image: url('./patterns/oblique-lines.svg');
-  mask-image: url('./patterns/oblique-lines.svg');
-}
-
-/* Figma: Type=Dots */
-.ol-pattern--dots {
-  -webkit-mask-image: url('./patterns/dots.svg');
-  mask-image: url('./patterns/dots.svg');
-}
-
-/* Figma: Type=Lines modern */
-.ol-pattern--lines-modern {
-  -webkit-mask-image: url('./patterns/lines-modern.svg');
-  mask-image: url('./patterns/lines-modern.svg');
-}
-
-/* Figma: Type=Squares */
-.ol-pattern--squares {
-  -webkit-mask-image: url('./patterns/squares.svg');
-  mask-image: url('./patterns/squares.svg');
-}
-
-/* Figma: Type=Modern */
-.ol-pattern--modern {
-  -webkit-mask-image: url('./patterns/modern.svg');
-  mask-image: url('./patterns/modern.svg');
-}
-
-/* Figma: Type=comb */
-.ol-pattern--comb {
-  -webkit-mask-image: url('./patterns/comb.svg');
-  mask-image: url('./patterns/comb.svg');
-}
-
-/* Figma: Type=tech */
-.ol-pattern--tech {
-  -webkit-mask-image: url('./patterns/tech.svg');
-  mask-image: url('./patterns/tech.svg');
-}
-
-/* Figma: Type=tech-square */
-.ol-pattern--tech-square {
-  -webkit-mask-image: url('./patterns/tech-square.svg');
-  mask-image: url('./patterns/tech-square.svg');
-}
-
-/* Figma: Type=tech-squares */
-.ol-pattern--tech-squares {
-  -webkit-mask-image: url('./patterns/tech-squares.svg');
-  mask-image: url('./patterns/tech-squares.svg');
-}
-
-/* Figma: Type=technology */
-.ol-pattern--technology {
-  -webkit-mask-image: url('./patterns/technology.svg');
-  mask-image: url('./patterns/technology.svg');
-}
-
-/* Figma: Type=comb-linear */
-.ol-pattern--comb-linear {
-  -webkit-mask-image: url('./patterns/comb-linear.svg');
-  mask-image: url('./patterns/comb-linear.svg');
-}
-
-/* Figma: Type=big-comb */
-.ol-pattern--big-comb {
-  -webkit-mask-image: url('./patterns/big-comb.svg');
-  mask-image: url('./patterns/big-comb.svg');
-}
-
-/* Figma: Type=lines-oblique */
-.ol-pattern--lines-oblique {
-  -webkit-mask-image: url('./patterns/lines-oblique.svg');
-  mask-image: url('./patterns/lines-oblique.svg');
-}
-
-/* Figma: Type=technology-top */
-.ol-pattern--technology-top {
-  -webkit-mask-image: url('./patterns/technology-top.svg');
-  mask-image: url('./patterns/technology-top.svg');
-}
+/*
+ * Hoạ tiết nền Ôn Luyện — 20 kiểu của Figma component "Pattern"
+ * (canvas "▒ Hoạ tiết" #1240:55097), dùng qua `<ol-pattern type="…">`.
+ *
+ * ## Vì sao file riêng, KHÔNG gộp vào olkit.css
+ *
+ * 20 file SVG nặng 1,1 MB (đã nén SVGO; bản xuất Figma 2,8 MB). Nhúng vào
+ * JS hay vào olkit.css thì app nào import kit cũng mang theo. Ở đây mỗi kiểu
+ * là một file SVG RIÊNG, CSS `mask-image: url(...)` trỏ tới — Angular CLI chép
+ * file theo, trình duyệt chỉ TẢI kiểu đang hiện trên trang.
+ *
+ *   angular.json → "styles": [..., "node_modules/@edmicro/olkit/styles/patterns.css"]
+ *
+ * ## Vì sao mask, không background-image
+ *
+ * Mask lấy KÊNH ALPHA của SVG làm khuôn, màu là `background-color:
+ * currentColor` — một hoạ tiết dùng được mọi màu (trắng trên navy, brand trên
+ * nền sáng) qua class `text-*`, không cần 20 × N bản màu. Độ mờ từng nét trong
+ * Figma (stroke-opacity) vẫn giữ vì nằm trong kênh alpha.
+ *
+ * Bản xuất Figma kèm nền xám #F0F0F0, khung nền tối #101828 và viền #E5E7EB
+ * của frame — đã lọc, chỉ giữ nhóm `Type=…`.
+ */
+.ol-pattern {
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+}
+.ol-pattern--fit-contain {
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+/* Lặp ô gốc theo kích thước thật của hình Figma (~1512×776). */
+.ol-pattern--fit-repeat {
+  -webkit-mask-repeat: repeat;
+  mask-repeat: repeat;
+  -webkit-mask-size: auto;
+  mask-size: auto;
+}
+
+/* Figma: Type=Lines */
+.ol-pattern--lines {
+  -webkit-mask-image: url('./patterns/lines.svg');
+  mask-image: url('./patterns/lines.svg');
+}
+
+/* Figma: Type=Rounded Lines */
+.ol-pattern--rounded-lines {
+  -webkit-mask-image: url('./patterns/rounded-lines.svg');
+  mask-image: url('./patterns/rounded-lines.svg');
+}
+
+/* Figma: Type=Creative */
+.ol-pattern--creative {
+  -webkit-mask-image: url('./patterns/creative.svg');
+  mask-image: url('./patterns/creative.svg');
+}
+
+/* Figma: Type=Diamond right */
+.ol-pattern--diamond-right {
+  -webkit-mask-image: url('./patterns/diamond-right.svg');
+  mask-image: url('./patterns/diamond-right.svg');
+}
+
+/* Figma: Type=Diamond left */
+.ol-pattern--diamond-left {
+  -webkit-mask-image: url('./patterns/diamond-left.svg');
+  mask-image: url('./patterns/diamond-left.svg');
+}
+
+/* Figma: Type=Vertical lines */
+.ol-pattern--vertical-lines {
+  -webkit-mask-image: url('./patterns/vertical-lines.svg');
+  mask-image: url('./patterns/vertical-lines.svg');
+}
+
+/* Figma: Type=oblique lines */
+.ol-pattern--oblique-lines {
+  -webkit-mask-image: url('./patterns/oblique-lines.svg');
+  mask-image: url('./patterns/oblique-lines.svg');
+}
+
+/* Figma: Type=Dots */
+.ol-pattern--dots {
+  -webkit-mask-image: url('./patterns/dots.svg');
+  mask-image: url('./patterns/dots.svg');
+}
+
+/* Figma: Type=Lines modern */
+.ol-pattern--lines-modern {
+  -webkit-mask-image: url('./patterns/lines-modern.svg');
+  mask-image: url('./patterns/lines-modern.svg');
+}
+
+/* Figma: Type=Squares */
+.ol-pattern--squares {
+  -webkit-mask-image: url('./patterns/squares.svg');
+  mask-image: url('./patterns/squares.svg');
+}
+
+/* Figma: Type=Modern */
+.ol-pattern--modern {
+  -webkit-mask-image: url('./patterns/modern.svg');
+  mask-image: url('./patterns/modern.svg');
+}
+
+/* Figma: Type=comb */
+.ol-pattern--comb {
+  -webkit-mask-image: url('./patterns/comb.svg');
+  mask-image: url('./patterns/comb.svg');
+}
+
+/* Figma: Type=tech */
+.ol-pattern--tech {
+  -webkit-mask-image: url('./patterns/tech.svg');
+  mask-image: url('./patterns/tech.svg');
+}
+
+/* Figma: Type=tech-square */
+.ol-pattern--tech-square {
+  -webkit-mask-image: url('./patterns/tech-square.svg');
+  mask-image: url('./patterns/tech-square.svg');
+}
+
+/* Figma: Type=tech-squares */
+.ol-pattern--tech-squares {
+  -webkit-mask-image: url('./patterns/tech-squares.svg');
+  mask-image: url('./patterns/tech-squares.svg');
+}
+
+/* Figma: Type=technology */
+.ol-pattern--technology {
+  -webkit-mask-image: url('./patterns/technology.svg');
+  mask-image: url('./patterns/technology.svg');
+}
+
+/* Figma: Type=comb-linear */
+.ol-pattern--comb-linear {
+  -webkit-mask-image: url('./patterns/comb-linear.svg');
+  mask-image: url('./patterns/comb-linear.svg');
+}
+
+/* Figma: Type=big-comb */
+.ol-pattern--big-comb {
+  -webkit-mask-image: url('./patterns/big-comb.svg');
+  mask-image: url('./patterns/big-comb.svg');
+}
+
+/* Figma: Type=lines-oblique */
+.ol-pattern--lines-oblique {
+  -webkit-mask-image: url('./patterns/lines-oblique.svg');
+  mask-image: url('./patterns/lines-oblique.svg');
+}
+
+/* Figma: Type=technology-top */
+.ol-pattern--technology-top {
+  -webkit-mask-image: url('./patterns/technology-top.svg');
+  mask-image: url('./patterns/technology-top.svg');
+}