@edmicro/olkit 1.1.8 → 1.3.0

package/styles/patterns/vertical-lines.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1512" height="775.077" fill="none"><g stroke="#F9FAFB" clip-path="url(#a)"><path d="M.5 0v775M11.073 0v775M21.648 0v775M32.221 0v775M42.794 0v775M53.369 0v775M63.941 0v775M74.514 0v775M85.089 0v775M95.66 0v775M106.233 0v775M116.808 0v775M127.381 0v775M137.954 0v775M148.529 0v775M159.102 0v775M169.674 0v775M180.249 0v775M190.822 0v775M201.395 0v775M211.97 0v775M222.543 0v775M233.116 0v775M243.691 0v775m10.57-775v775M264.834 0v775M275.409 0v775M285.982 0v775M296.555 0v775M307.13 0v775M317.703 0v775M328.276 0v775M338.851 0v775M349.424 0v775M359.996 0v775M370.571 0v775M381.144 0v775M391.717 0v775M402.292 0v775M412.865 0v775M423.436 0v775M434.009 0v775M444.584 0v775M455.157 0v775M465.729 0v775M476.304 0v775M486.877 0v775M497.45 0v775M508.025 0v775M518.598 0v775M529.171 0v775M539.746 0v775M550.318 0v775M560.891 0v775M571.466 0v775M582.039 0v775M592.61 0v775M603.185 0v775M613.758 0v775M624.331 0v775M634.906 0v775M645.478 0v775M656.051 0v775M666.626 0v775M677.199 0v775M687.772 0v775M698.347 0v775M708.92 0v775M719.492 0v775M730.067 0v775M740.64 0v775M751.213 0v775M761.786 0v775M772.359 0v775M782.932 0v775M793.507 0v775M804.08 0v775M814.653 0v775M825.227 0v775M835.8 0v775M846.373 0v775M856.948 0v775M867.521 0v775M878.094 0v775M888.669 0v775M899.242 0v775M909.815 0v775M920.39 0v775M930.96 0v775M941.533 0v775M952.108 0v775M962.681 0v775M973.254 0v775M983.829 0v775M994.402 0v775M1004.97 0v775m10.58-775v775m10.57-775v775M1036.7 0v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.58-775v775m10.57-775v775M1153 0v775m10.58-775v775m10.57-775v775m10.57-775v775M1195.3 0v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775M1311.6 0v775m10.58-775v775m10.57-775v775m10.58-775v775M1353.9 0v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.58-775v775m10.57-775v775m10.57-775v775m10.58-775v775"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1512v775.077H0z"/></clipPath></defs></svg>

package/styles/patterns.css

@@ -0,0 +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');
+}