shad-m 1.0.0

package/dist/theme.js

@@ -0,0 +1,333 @@
+'use strict';
+
+const baseFontSizes = {
+  // Typography classes theo design system mới
+  // Format: T{size}SB (Semi bold / 500), T{size}M (Medium / 500), T{size} (Regular / 400)
+  // T56 (56px font size, 72px line height) - tracking -1%
+  // Regular = 400, Semibold = 500
+  t56sb: ["56px", { lineHeight: "72px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t56m: ["56px", { lineHeight: "72px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t56: ["56px", { lineHeight: "72px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T48 (48px font size, 64px line height) - tracking -1%
+  t48sb: ["48px", { lineHeight: "64px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t48m: ["48px", { lineHeight: "64px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t48: ["48px", { lineHeight: "64px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T36 (36px font size, 44px line height) - tracking -1%
+  t36sb: ["36px", { lineHeight: "44px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t36m: ["36px", { lineHeight: "44px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t36: ["36px", { lineHeight: "44px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T32 (32px font size, 40px line height) - tracking -1%
+  t32sb: ["32px", { lineHeight: "40px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t32m: ["32px", { lineHeight: "40px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t32: ["32px", { lineHeight: "40px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T24 (24px font size, 32px line height) - tracking -1%
+  t24sb: ["24px", { lineHeight: "32px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t24m: ["24px", { lineHeight: "32px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t24: ["24px", { lineHeight: "32px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T20 (20px font size, 28px line height) - tracking -1%
+  t20sb: ["20px", { lineHeight: "28px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t20m: ["20px", { lineHeight: "28px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t20: ["20px", { lineHeight: "28px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T18 (18px font size, 28px line height) - tracking -1%
+  // From T12 to T18: Regular = 400, Medium = 400, Semibold = 500
+  t18sb: ["18px", { lineHeight: "28px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t18m: ["18px", { lineHeight: "28px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t18: ["18px", { lineHeight: "28px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T16 (16px font size, 24px line height) - tracking -1%
+  t16sb: ["16px", { lineHeight: "24px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t16m: ["16px", { lineHeight: "24px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t16: ["16px", { lineHeight: "24px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T14 (14px font size, 20px line height) - tracking -1%
+  t14sb: ["14px", { lineHeight: "20px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t14m: ["14px", { lineHeight: "20px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t14: ["14px", { lineHeight: "20px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  // T12 (12px font size, 16px line height) - tracking -1%
+  t12sb: ["12px", { lineHeight: "16px", fontWeight: "500", letterSpacing: "-0.01em" }],
+  t12m: ["12px", { lineHeight: "16px", fontWeight: "400", letterSpacing: "-0.01em" }],
+  t12: ["12px", { lineHeight: "16px", fontWeight: "400", letterSpacing: "-0.01em" }]
+};
+const TYPOGRAPHY = {
+  // Font sizes với line heights và font weight tương ứng
+  fontSize: {
+    ...baseFontSizes,
+    // Tailwind base sizes (bảo đảm tương thích)
+    xs: baseFontSizes.t12,
+    sm: baseFontSizes.t14,
+    base: baseFontSizes.t16,
+    lg: baseFontSizes.t18,
+    xl: baseFontSizes.t20,
+    "2xl": baseFontSizes.t24,
+    "3xl": baseFontSizes.t32,
+    "4xl": baseFontSizes.t36,
+    "5xl": baseFontSizes.t48,
+    "6xl": baseFontSizes.t56
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "500",
+    bold: "500"
+  },
+  // Font families
+  fontFamily: {
+    sans: ["var(--font-inter)", "Inter", "sans-serif"]
+  }
+};
+const COLORS = {
+  // Hệ thống màu cơ bản theo yêu cầu mới (HSL format)
+  blue: {
+    100: "225 100% 97%",
+    // #eff3ff
+    200: "224 100% 92%",
+    // #d7e2ff
+    300: "223 100% 83%",
+    // #a8c0ff
+    400: "223 90% 63%",
+    // #4b7bf6
+    500: "223 93% 50%",
+    // #094bf4
+    600: "223 93% 35%",
+    // #0635ad
+    700: "223 92% 21%",
+    // #042066
+    800: "223 100% 13%"
+    // #001342
+  },
+  red: {
+    100: "3 100% 96%",
+    // #ffeeed
+    200: "3 100% 93%",
+    // #ffdcda
+    300: "4 100% 82%",
+    // #ffabab
+    400: "4 93% 67%",
+    // #f9655b
+    500: "4 79% 52%",
+    // #e52e22
+    600: "4 84% 42%",
+    // #f9655b
+    700: "4 89% 31%",
+    // #f9655b
+    800: "4 88% 23%"
+    // #f9655b
+  },
+  green: {
+    100: "143 69% 95%",
+    // #e9fbf0
+    200: "145 86% 86%",
+    // #bffad8
+    300: "144 81% 77%",
+    // #95f4bb
+    400: "145 75% 57%",
+    // #3fe382
+    500: "144 84% 43%",
+    // #12ca5b
+    600: "144 80% 36%",
+    // #3fe382
+    700: "144 86% 25%",
+    // #3fe382
+    800: "144 84% 18%"
+    // #3fe382
+  },
+  orange: {
+    100: "29 100% 95%",
+    // #fff3e8
+    200: "29 100% 86%",
+    // #ffdab7
+    300: "29 100% 75%",
+    // #ffbe80
+    400: "29 100% 64%",
+    // #ff9f46
+    500: "29 100% 55%",
+    // #ff8718
+    600: "29 97% 40%",
+    // #ff9f46
+    700: "29 91% 29%",
+    // #ff9f46
+    800: "25 94% 21%"
+    // #ff9f46
+  },
+  yellow: {
+    100: "50 100% 95%",
+    // #fffdf5
+    200: "50 100% 88%",
+    // #fff1b8
+    300: "50 100% 77%",
+    // #ffe47a
+    400: "50 100% 67%",
+    // #ffd83d
+    500: "50 100% 55%",
+    // #ffd603
+    600: "47 91% 46%",
+    // #c29b00
+    700: "43 86% 40%",
+    // #856a00
+    800: "44 95% 25%"
+    // #473900
+  },
+  purple: {
+    100: "258 100% 98%",
+    // #f8f5ff
+    200: "259 100% 86%",
+    // #cfb8ff
+    300: "260 100% 74%",
+    // #a77eff
+    400: "260 100% 62%",
+    // #7e5dff
+    500: "263 100% 51%",
+    // #6203ff
+    600: "260 100% 38%",
+    // #4100c2
+    700: "260 100% 26%",
+    // #2c0085
+    800: "260 100% 14%"
+    // #180047
+  },
+  cyan: {
+    100: "192 100% 98%",
+    // #f5fdff
+    200: "189 100% 86%",
+    // #b8f4ff
+    300: "189 100% 74%",
+    // #7aebff
+    400: "189 100% 62%",
+    // #3de1ff
+    500: "189 100% 50%",
+    // #02d8ff
+    600: "189 100% 38%",
+    // #00a4c2
+    700: "189 100% 26%",
+    // #007084
+    800: "188 100% 14%"
+    // #003d47
+  },
+  // Ink variants với opacity và solid versions (HSL format)
+  // Ink variants với opacity và solid versions (HSL format)
+  ink: {
+    "50": "0 0% 96% / 0.04",
+    // rgba(0, 0, 0, 0.04)
+    "100": "0 0% 0% / 0.08",
+    // rgba(0, 0, 0, 0.08)
+    "200": "0 0% 0% / 0.12",
+    // rgba(0, 0, 0, 0.12)
+    "300": "0 0% 0% / 0.35",
+    // rgba(0, 0, 0, 0.35)
+    "400": "0 0% 0% / 0.55",
+    // rgba(0, 0, 0, 0.55)
+    "500": "0 0% 0%",
+    // #000000
+    "50s": "0 0% 96%",
+    // #f4f4f4
+    "100s": "0 0% 92%",
+    // #eaeaea
+    "200s": "0 0% 87%",
+    // #dfdfe7 (corrected)
+    "300s": "0 0% 62%",
+    // #bbbbbb
+    "400s": "0 0% 44%",
+    // #6f6f6f
+    "500s": "0 0% 0%"
+    // #000000
+  },
+  white: {
+    "100": "0 0% 100% / 0.05",
+    // rgba(255, 255, 255, 0.05)
+    "200": "0 0% 100% / 0.1",
+    // rgba(255, 255, 255, 0.1)
+    "300": "0 0% 100% / 0.3",
+    // rgba(255, 255, 255, 0.3)
+    "400": "0 0% 100% / 0.5",
+    // rgba(255, 255, 255, 0.5)
+    "500": "0 0% 100%",
+    // #FFFFFF
+    "500s": "0 0% 100%",
+    // #FFFFFF
+    DEFAULT: "0 0% 100%"
+    // #FFFFFF
+  },
+  black: {
+    DEFAULT: "0 0% 0%"
+    // #000000
+  },
+  // Màu trạng thái (HSL format)
+  primary: {
+    DEFAULT: "223 93% 50%",
+    // #094bf4 (corrected)
+    foreground: "210 40% 98%"
+    // #f8fafc
+  },
+  error: {
+    DEFAULT: "4 79% 52%"
+    // #e52e22 (corrected from HSL picker)
+  },
+  success: {
+    DEFAULT: "162 83% 42%"
+    // #12c58e (corrected)
+  },
+  warning: {
+    DEFAULT: "27 89% 52%"
+    // #f17818 (corrected)
+  },
+  info: {
+    DEFAULT: "223 93% 50%"
+    // #094bf4 (corrected)
+  }
+};
+const EFFECTS = {
+  boxShadow: {
+    "8": "0 8px 24px -4px hsl(224 100% 17% / 0.1)",
+    // rgba(0, 9, 87, 0.1) -> HSL
+    "24": "0 24px 28px -8px hsl(224 100% 17% / 0.1)",
+    // rgba(0, 9, 87, 0.1) -> HSL
+    "32": "0 20px 48px -12px hsl(224 100% 17% / 0.1)"
+    // rgba(0, 9, 87, 0.1) -> HSL
+  }
+};
+const SCREENS = {
+  screens: {
+    sm: "375px",
+    md: "790px",
+    // tablet lớn / laptop nhỏ
+    lg: "1280px",
+    // desktop chuẩn
+    xl: "1440px"
+    // desktop lớn / full HD
+    // '2xl': '1652px', // wide / 2K screen
+  },
+  container: {
+    padding: {
+      DEFAULT: "16px",
+      md: "20px",
+      // tablet
+      xl: "38px",
+      // desktop
+      "2xl": "20px"
+      // wide
+    },
+    center: true,
+    screens: {
+      xs: "100%",
+      // mobile
+      md: "754px",
+      // tablet
+      xl: "1164px",
+      // desktop
+      "2xl": "1612px"
+      // wide
+    }
+  }
+};
+const THEME = {
+  ...TYPOGRAPHY,
+  ...SCREENS,
+  colors: COLORS,
+  ...EFFECTS
+};
+
+exports.COLORS = COLORS;
+exports.EFFECTS = EFFECTS;
+exports.SCREENS = SCREENS;
+exports.THEME = THEME;
+exports.TYPOGRAPHY = TYPOGRAPHY;
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme.ts"],"names":[],"mappings":"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","file":"theme.js","sourcesContent":["/**\n * Design System\n * Định nghĩa các tokens cho hệ thống thiết kế\n */\n\nconst baseFontSizes = {\n  // Typography classes theo design system mới\n  // Format: T{size}SB (Semi bold / 500), T{size}M (Medium / 500), T{size} (Regular / 400)\n\n  // T56 (56px font size, 72px line height) - tracking -1%\n  // Regular = 400, Semibold = 500\n  t56sb: ['56px', { lineHeight: '72px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t56m: ['56px', { lineHeight: '72px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t56: ['56px', { lineHeight: '72px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T48 (48px font size, 64px line height) - tracking -1%\n  t48sb: ['48px', { lineHeight: '64px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t48m: ['48px', { lineHeight: '64px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t48: ['48px', { lineHeight: '64px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T36 (36px font size, 44px line height) - tracking -1%\n  t36sb: ['36px', { lineHeight: '44px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t36m: ['36px', { lineHeight: '44px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t36: ['36px', { lineHeight: '44px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T32 (32px font size, 40px line height) - tracking -1%\n  t32sb: ['32px', { lineHeight: '40px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t32m: ['32px', { lineHeight: '40px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t32: ['32px', { lineHeight: '40px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T24 (24px font size, 32px line height) - tracking -1%\n  t24sb: ['24px', { lineHeight: '32px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t24m: ['24px', { lineHeight: '32px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t24: ['24px', { lineHeight: '32px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T20 (20px font size, 28px line height) - tracking -1%\n  t20sb: ['20px', { lineHeight: '28px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t20m: ['20px', { lineHeight: '28px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t20: ['20px', { lineHeight: '28px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T18 (18px font size, 28px line height) - tracking -1%\n  // From T12 to T18: Regular = 400, Medium = 400, Semibold = 500\n  t18sb: ['18px', { lineHeight: '28px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t18m: ['18px', { lineHeight: '28px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t18: ['18px', { lineHeight: '28px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T16 (16px font size, 24px line height) - tracking -1%\n  t16sb: ['16px', { lineHeight: '24px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t16m: ['16px', { lineHeight: '24px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t16: ['16px', { lineHeight: '24px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T14 (14px font size, 20px line height) - tracking -1%\n  t14sb: ['14px', { lineHeight: '20px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t14m: ['14px', { lineHeight: '20px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t14: ['14px', { lineHeight: '20px', fontWeight: '400', letterSpacing: '-0.01em' }],\n\n  // T12 (12px font size, 16px line height) - tracking -1%\n  t12sb: ['12px', { lineHeight: '16px', fontWeight: '500', letterSpacing: '-0.01em' }],\n  t12m: ['12px', { lineHeight: '16px', fontWeight: '400', letterSpacing: '-0.01em' }],\n  t12: ['12px', { lineHeight: '16px', fontWeight: '400', letterSpacing: '-0.01em' }],\n};\n\n// Typography\nexport const TYPOGRAPHY: any = {\n  // Font sizes với line heights và font weight tương ứng\n  fontSize: {\n    ...baseFontSizes,\n\n    // Tailwind base sizes (bảo đảm tương thích)\n    xs: baseFontSizes.t12,\n    sm: baseFontSizes.t14,\n    base: baseFontSizes.t16,\n    lg: baseFontSizes.t18,\n    xl: baseFontSizes.t20,\n    '2xl': baseFontSizes.t24,\n    '3xl': baseFontSizes.t32,\n    '4xl': baseFontSizes.t36,\n    '5xl': baseFontSizes.t48,\n    '6xl': baseFontSizes.t56,\n  },\n\n  fontWeight: {\n    normal: '400',\n    medium: '500',\n    semibold: '500',\n    bold: '500',\n  },\n\n  // Font families\n  fontFamily: {\n    sans: ['var(--font-inter)', 'Inter', 'sans-serif'],\n  },\n};\n\n// Colors (converted to HSL format)\nexport const COLORS: any = {\n  // Hệ thống màu cơ bản theo yêu cầu mới (HSL format)\n  blue: {\n    100: '225 100% 97%', // #eff3ff\n    200: '224 100% 92%', // #d7e2ff\n    300: '223 100% 83%', // #a8c0ff\n    400: '223 90% 63%', // #4b7bf6\n    500: '223 93% 50%', // #094bf4\n    600: '223 93% 35%', // #0635ad\n    700: '223 92% 21%', // #042066\n    800: '223 100% 13%', // #001342\n  },\n  red: {\n    100: '3 100% 96%', // #ffeeed\n    200: '3 100% 93%', // #ffdcda\n    300: '4 100% 82%', // #ffabab\n    400: '4 93% 67%', // #f9655b\n    500: '4 79% 52%', // #e52e22\n    600: '4 84% 42%', // #f9655b\n    700: '4 89% 31%', // #f9655b\n    800: '4 88% 23%', // #f9655b\n  },\n  green: {\n    100: '143 69% 95%', // #e9fbf0\n    200: '145 86% 86%', // #bffad8\n    300: '144 81% 77%', // #95f4bb\n    400: '145 75% 57%', // #3fe382\n    500: '144 84% 43%', // #12ca5b\n    600: '144 80% 36%', // #3fe382\n    700: '144 86% 25%', // #3fe382\n    800: '144 84% 18%', // #3fe382\n  },\n  orange: {\n    100: '29 100% 95%', // #fff3e8\n    200: '29 100% 86%', // #ffdab7\n    300: '29 100% 75%', // #ffbe80\n    400: '29 100% 64%', // #ff9f46\n    500: '29 100% 55%', // #ff8718\n    600: '29 97% 40%', // #ff9f46\n    700: '29 91% 29%', // #ff9f46\n    800: '25 94% 21%', // #ff9f46\n  },\n  yellow: {\n    100: '50 100% 95%', // #fffdf5\n    200: '50 100% 88%', // #fff1b8\n    300: '50 100% 77%', // #ffe47a\n    400: '50 100% 67%', // #ffd83d\n    500: '50 100% 55%', // #ffd603\n    600: '47 91% 46%', // #c29b00\n    700: '43 86% 40%', // #856a00\n    800: '44 95% 25%', // #473900\n  },\n  purple: {\n    100: '258 100% 98%', // #f8f5ff\n    200: '259 100% 86%', // #cfb8ff\n    300: '260 100% 74%', // #a77eff\n    400: '260 100% 62%', // #7e5dff\n    500: '263 100% 51%', // #6203ff\n    600: '260 100% 38%', // #4100c2\n    700: '260 100% 26%', // #2c0085\n    800: '260 100% 14%', // #180047\n  },\n  cyan: {\n    100: '192 100% 98%', // #f5fdff\n    200: '189 100% 86%', // #b8f4ff\n    300: '189 100% 74%', // #7aebff\n    400: '189 100% 62%', // #3de1ff\n    500: '189 100% 50%', // #02d8ff\n    600: '189 100% 38%', // #00a4c2\n    700: '189 100% 26%', // #007084\n    800: '188 100% 14%', // #003d47\n  },\n  // Ink variants với opacity và solid versions (HSL format)\n  // Ink variants với opacity và solid versions (HSL format)\n  ink: {\n    '50': '0 0% 96% / 0.04', // rgba(0, 0, 0, 0.04)\n    '100': '0 0% 0% / 0.08', // rgba(0, 0, 0, 0.08)\n    '200': '0 0% 0% / 0.12', // rgba(0, 0, 0, 0.12)\n    '300': '0 0% 0% / 0.35', // rgba(0, 0, 0, 0.35)\n    '400': '0 0% 0% / 0.55', // rgba(0, 0, 0, 0.55)\n    '500': '0 0% 0%', // #000000\n    '50s': '0 0% 96%', // #f4f4f4\n    '100s': '0 0% 92%', // #eaeaea\n    '200s': '0 0% 87%', // #dfdfe7 (corrected)\n    '300s': '0 0% 62%', // #bbbbbb\n    '400s': '0 0% 44%', // #6f6f6f\n    '500s': '0 0% 0%', // #000000\n  },\n  white: {\n    '100': '0 0% 100% / 0.05', // rgba(255, 255, 255, 0.05)\n    '200': '0 0% 100% / 0.1', // rgba(255, 255, 255, 0.1)\n    '300': '0 0% 100% / 0.3', // rgba(255, 255, 255, 0.3)\n    '400': '0 0% 100% / 0.5', // rgba(255, 255, 255, 0.5)\n    '500': '0 0% 100%', // #FFFFFF\n    '500s': '0 0% 100%', // #FFFFFF\n    DEFAULT: '0 0% 100%', // #FFFFFF\n  },\n  black: {\n    DEFAULT: '0 0% 0%', // #000000\n  },\n\n  // Màu trạng thái (HSL format)\n  primary: {\n    DEFAULT: '223 93% 50%', // #094bf4 (corrected)\n    foreground: '210 40% 98%', // #f8fafc\n  },\n  error: {\n    DEFAULT: '4 79% 52%', // #e52e22 (corrected from HSL picker)\n  },\n  success: {\n    DEFAULT: '162 83% 42%', // #12c58e (corrected)\n  },\n  warning: {\n    DEFAULT: '27 89% 52%', // #f17818 (corrected)\n  },\n  info: {\n    DEFAULT: '223 93% 50%', // #094bf4 (corrected)\n  },\n};\n\n// Shadow và các hiệu ứng theo yêu cầu mới (đã loại bỏ tiền tố om)\nexport const EFFECTS: any = {\n  boxShadow: {\n    '8': '0 8px 24px -4px hsl(224 100% 17% / 0.1)', // rgba(0, 9, 87, 0.1) -> HSL\n    '24': '0 24px 28px -8px hsl(224 100% 17% / 0.1)', // rgba(0, 9, 87, 0.1) -> HSL\n    '32': '0 20px 48px -12px hsl(224 100% 17% / 0.1)', // rgba(0, 9, 87, 0.1) -> HSL\n  },\n};\n\n// Breakpoints và containers theo yêu cầu grid system\nexport const SCREENS: any = {\n  screens: {\n    sm: '375px',\n    md: '790px', // tablet lớn / laptop nhỏ\n    lg: '1280px', // desktop chuẩn\n    xl: '1440px', // desktop lớn / full HD\n    // '2xl': '1652px', // wide / 2K screen\n  },\n  container: {\n    padding: {\n      DEFAULT: '16px',\n      md: '20px', // tablet\n      xl: '38px', // desktop\n      '2xl': '20px', // wide\n    },\n    center: true,\n    screens: {\n      xs: '100%', // mobile\n      md: '754px', // tablet\n      xl: '1164px', // desktop\n      '2xl': '1612px', // wide\n    },\n  },\n};\n\n// Tất cả theme\nexport const THEME: any = {\n  ...TYPOGRAPHY,\n  ...SCREENS,\n  colors: COLORS,\n  ...EFFECTS,\n};\n"]}