diff --git a/assets/css/moon-base.css b/assets/css/moon-base.css new file mode 100644 index 000000000..81f77de55 --- /dev/null +++ b/assets/css/moon-base.css @@ -0,0 +1,475 @@ +/* v1.3.7 */ +*, ::before, ::after, ::backdrop { + --dimension-border-0: 0; + --dimension-border-1: 1px; + --dimension-border-2: 2px; + --dimension-border-4: 4px; + --dimension-rounded-0: 0; + --dimension-rounded-12: 12px; + --dimension-rounded-16: 16px; + --dimension-rounded-2: 2px; + --dimension-rounded-24: 24px; + --dimension-rounded-32: 32px; + --dimension-rounded-4: 4px; + --dimension-rounded-6: 6px; + --dimension-rounded-8: 8px; + --dimension-rounded-full: 9999px; + --dimension-space-0: 0; + --dimension-space-1: 1px; + --dimension-space-10: 10px; + --dimension-space-104: 104px; + --dimension-space-112: 112px; + --dimension-space-12: 12px; + --dimension-space-120: 120px; + --dimension-space-128: 128px; + --dimension-space-136: 136px; + --dimension-space-14: 14px; + --dimension-space-144: 144px; + --dimension-space-152: 152px; + --dimension-space-16: 16px; + --dimension-space-160: 160px; + --dimension-space-18: 18px; + --dimension-space-2: 2px; + --dimension-space-20: 20px; + --dimension-space-24: 24px; + --dimension-space-28: 28px; + --dimension-space-32: 32px; + --dimension-space-36: 36px; + --dimension-space-4: 4px; + --dimension-space-40: 40px; + --dimension-space-48: 48px; + --dimension-space-56: 56px; + --dimension-space-6: 6px; + --dimension-space-64: 64px; + --dimension-space-72: 72px; + --dimension-space-8: 8px; + --dimension-space-80: 80px; + --dimension-space-88: 88px; + --dimension-space-96: 96px; + --effect-opacity-0: 0; + --effect-opacity-100: 1; + --effect-opacity-20: 0.2; + --effect-opacity-40: 0.4; + --effect-opacity-60: 0.6; + --effect-opacity-80: 0.8; + --effect-shadow-100-layer1-blur: 2px; + --effect-shadow-100-layer1-spread: 0; + --effect-shadow-100-layer1-x: 0; + --effect-shadow-100-layer1-y: 1px; + --effect-shadow-100-layer2-blur: 0; + --effect-shadow-100-layer2-spread: 0; + --effect-shadow-100-layer2-x: 0; + --effect-shadow-100-layer2-y: 0; + --effect-shadow-200-layer1-blur: 8px; + --effect-shadow-200-layer1-spread: -4px; + --effect-shadow-200-layer1-x: 0; + --effect-shadow-200-layer1-y: 4px; + --effect-shadow-200-layer2-blur: 4px; + --effect-shadow-200-layer2-spread: -2px; + --effect-shadow-200-layer2-x: 0; + --effect-shadow-200-layer2-y: 2px; + --effect-shadow-300-layer1-blur: 16px; + --effect-shadow-300-layer1-spread: -4px; + --effect-shadow-300-layer1-x: 0; + --effect-shadow-300-layer1-y: 12px; + --effect-shadow-300-layer2-blur: 8px; + --effect-shadow-300-layer2-spread: -2px; + --effect-shadow-300-layer2-x: 0; + --effect-shadow-300-layer2-y: 4px; + --effect-shadow-400-layer1-blur: 24px; + --effect-shadow-400-layer1-spread: -4px; + --effect-shadow-400-layer1-x: 0; + --effect-shadow-400-layer1-y: 20px; + --effect-shadow-400-layer2-blur: 8px; + --effect-shadow-400-layer2-spread: -4px; + --effect-shadow-400-layer2-x: 0; + --effect-shadow-400-layer2-y: 8px; + --effect-shadow-500-layer1-blur: 48px; + --effect-shadow-500-layer1-spread: -12px; + --effect-shadow-500-layer1-x: 0; + --effect-shadow-500-layer1-y: 24px; + --effect-shadow-500-layer2-blur: 0; + --effect-shadow-500-layer2-spread: 0; + --effect-shadow-500-layer2-x: 0; + --effect-shadow-500-layer2-y: 0; + --effect-shadow-600-layer1-blur: 64px; + --effect-shadow-600-layer1-spread: -12px; + --effect-shadow-600-layer1-x: 0; + --effect-shadow-600-layer1-y: 32px; + --effect-shadow-600-layer2-blur: 0; + --effect-shadow-600-layer2-spread: 0; + --effect-shadow-600-layer2-x: 0; + --effect-shadow-600-layer2-y: 0; + --text-body-100-font-family: var(--text-font-family-primary); + --text-body-100-font-size: var(--dimension-space-10); + --text-body-100-font-weight: var(--text-font-weight-regular); + --text-body-100-line-height: var(--dimension-space-12); + --text-body-200-font-family: var(--text-font-family-primary); + --text-body-200-font-size: var(--dimension-space-12); + --text-body-200-font-weight: var(--text-font-weight-regular); + --text-body-200-line-height: var(--dimension-space-16); + --text-body-300-font-family: var(--text-font-family-primary); + --text-body-300-font-size: var(--dimension-space-14); + --text-body-300-font-weight: var(--text-font-weight-regular); + --text-body-300-line-height: var(--dimension-space-20); + --text-body-400-font-family: var(--text-font-family-primary); + --text-body-400-font-size: var(--dimension-space-16); + --text-body-400-font-weight: var(--text-font-weight-regular); + --text-body-400-line-height: var(--dimension-space-24); + --text-body-500-font-family: var(--text-font-family-primary); + --text-body-500-font-size: var(--dimension-space-18); + --text-body-500-font-weight: var(--text-font-weight-regular); + --text-body-500-line-height: var(--dimension-space-28); + --text-font-family-primary: "DM Sans"; + --text-font-family-secondary: "DM Mono"; + --text-font-family-tertiary: "DM Serif Display"; + --text-font-weight-black: 900; + --text-font-weight-bold: 700; + --text-font-weight-extrabold: 800; + --text-font-weight-extralight: 200; + --text-font-weight: 300; + --text-font-weight-medium: 500; + --text-font-weight-regular: 400; + --text-font-weight-semibold: 600; + --text-font-weight-thin: 100; + --text-heading-100-font-family: var(--text-font-family-primary); + --text-heading-100-font-size: var(--dimension-space-18); + --text-heading-100-font-weight: var(--text-font-weight-bold); + --text-heading-100-line-height: var(--dimension-space-28); + --text-heading-200-font-family: var(--text-font-family-primary); + --text-heading-200-font-size: var(--dimension-space-24); + --text-heading-200-font-weight: var(--text-font-weight-bold); + --text-heading-200-line-height: var(--dimension-space-32); + --text-heading-300-font-family: var(--text-font-family-secondary); + --text-heading-300-font-size: var(--dimension-space-36); + --text-heading-300-font-weight: var(--text-font-weight-bold); + --text-heading-300-line-height: var(--dimension-space-40); + --text-heading-400-font-family: var(--text-font-family-secondary); + --text-heading-400-font-size: var(--dimension-space-48); + --text-heading-400-font-weight: var(--text-font-weight-bold); + --text-heading-400-line-height: var(--dimension-space-56); + --text-heading-500-font-family: var(--text-font-family-secondary); + --text-heading-500-font-size: var(--dimension-space-72); + --text-heading-500-font-weight: var(--text-font-weight-bold); + --text-heading-500-line-height: var(--dimension-space-80); +} + +:root.light-theme, .light-theme, .light-theme *::backdrop, .light-theme *::before, .light-theme *::after { + --effect-shadow-100-layer1-color: var(--theme-slate-shadow-200); + --effect-shadow-100-layer2-color: var(--theme-slate-shadow-0); + --effect-shadow-200-layer1-color: var(--theme-slate-shadow-400); + --effect-shadow-200-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-300-layer1-color: var(--theme-slate-shadow-300); + --effect-shadow-300-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-400-layer1-color: var(--theme-slate-shadow-300); + --effect-shadow-400-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-500-layer1-color: var(--theme-slate-shadow-500); + --effect-shadow-500-layer2-color: var(--theme-slate-shadow-0); + --effect-shadow-600-layer1-color: var(--theme-slate-shadow-500); + --effect-shadow-600-layer2-color: var(--theme-slate-shadow-0); + --semantic-background-active: var(--theme-indigo-4); + --semantic-background-backdrop: var(--theme-slate-alpha-056); + --semantic-background-brand: var(--theme-iris-9); + --semantic-background-caution: var(--theme-orange-9); + --semantic-background-discovery: var(--theme-plum-9); + --semantic-background-forcedark: var(--theme-slate-constant-dark); + --semantic-background-forcelight: var(--theme-slate-constant-light); + --semantic-background-hover: var(--theme-slate-alpha-008); + --semantic-background-info: var(--theme-indigo-9); + --semantic-background-inverse: var(--theme-slate-12); + --semantic-background-negative: var(--theme-red-9); + --semantic-background-positive: var(--theme-green-9); + --semantic-background-primary: var(--theme-slate-1); + --semantic-background-secondary: var(--theme-slate-2); + --semantic-background-tertiary: var(--theme-slate-3); + --semantic-border-active: var(--theme-indigo-12); + --semantic-border-brand: var(--theme-iris-9); + --semantic-border-caution: var(--theme-orange-9); + --semantic-border-discovery: var(--theme-plum-9); + --semantic-border-forcedark: var(--theme-slate-constant-dark); + --semantic-border-forcelight: var(--theme-slate-constant-light); + --semantic-border-info: var(--theme-indigo-9); + --semantic-border-negative: var(--theme-red-9); + --semantic-border-positive: var(--theme-green-9); + --semantic-border-primary: var(--theme-slate-12); + --semantic-border-secondary: var(--theme-slate-7); + --semantic-icon-active: var(--theme-indigo-12); + --semantic-icon-brand: var(--theme-iris-9); + --semantic-icon-caution: var(--theme-orange-9); + --semantic-icon-discovery: var(--theme-plum-9); + --semantic-icon-forcedark: var(--theme-slate-constant-dark); + --semantic-icon-forcelight: var(--theme-slate-constant-light); + --semantic-icon-info: var(--theme-indigo-9); + --semantic-icon-inverse: var(--theme-slate-1); + --semantic-icon-negative: var(--theme-red-9); + --semantic-icon-positive: var(--theme-green-9); + --semantic-icon-primary: var(--theme-slate-12); + --semantic-icon-secondary: var(--theme-slate-11); + --semantic-text-active: var(--theme-indigo-12); + --semantic-text-brand: var(--theme-iris-9); + --semantic-text-caution: var(--theme-orange-9); + --semantic-text-discovery: var(--theme-plum-9); + --semantic-text-forcedark: var(--theme-slate-constant-dark); + --semantic-text-forcelight: var(--theme-slate-constant-light); + --semantic-text-info: var(--theme-indigo-9); + --semantic-text-inverse: var(--theme-slate-1); + --semantic-text-link: var(--theme-indigo-9); + --semantic-text-negative: var(--theme-red-9); + --semantic-text-positive: var(--theme-green-9); + --semantic-text-primary: var(--theme-slate-12); + --semantic-text-secondary: var(--theme-slate-11); + --theme-green-1: #fbfefc; + --theme-green-10: #2b9a66; + --theme-green-11: #218358; + --theme-green-12: #193b2d; + --theme-green-2: #f4fbf6; + --theme-green-3: #e6f6eb; + --theme-green-4: #d6f1df; + --theme-green-5: #c4e8d1; + --theme-green-6: #adddc0; + --theme-green-7: #8eceaa; + --theme-green-8: #5bb98b; + --theme-green-9: #30a46c; + --theme-indigo-1: #fdfdfe; + --theme-indigo-10: #3358d4; + --theme-indigo-11: #0d74ce; + --theme-indigo-12: #1f2d5c; + --theme-indigo-2: #f7f9ff; + --theme-indigo-3: #edf2fe; + --theme-indigo-4: #e1e9ff; + --theme-indigo-5: #d2deff; + --theme-indigo-6: #c1d0ff; + --theme-indigo-7: #abbdf9; + --theme-indigo-8: #8da4ef; + --theme-indigo-9: #3e63dd; + --theme-iris-1: #fdfdff; + --theme-iris-10: #5151cd; + --theme-iris-11: #5753c6; + --theme-iris-12: #272962; + --theme-iris-2: #f8f8ff; + --theme-iris-3: #f0f1fe; + --theme-iris-4: #e6e7ff; + --theme-iris-5: #dadcff; + --theme-iris-6: #cbcdff; + --theme-iris-7: #b8baf8; + --theme-iris-8: #9b9ef0; + --theme-iris-9: #5b5bd6; + --theme-orange-1: #fefcfb; + --theme-orange-10: #ef5f00; + --theme-orange-11: #cc4e00; + --theme-orange-12: #582d1d; + --theme-orange-2: #fff7ed; + --theme-orange-3: #ffefd6; + --theme-orange-4: #ffdfb5; + --theme-orange-5: #ffd19a; + --theme-orange-6: #ffc182; + --theme-orange-7: #f5ae73; + --theme-orange-8: #ec9455; + --theme-orange-9: #f76b15; + --theme-plum-1: #fefcff; + --theme-plum-10: #a144af; + --theme-plum-11: #953ea3; + --theme-plum-12: #53195d; + --theme-plum-2: #fdf7fd; + --theme-plum-3: #fbebfb; + --theme-plum-4: #f7def8; + --theme-plum-5: #f2d1f3; + --theme-plum-6: #e9c2ec; + --theme-plum-7: #deade3; + --theme-plum-8: #cf91d8; + --theme-plum-9: #ab4aba; + --theme-red-1: #fffcfc; + --theme-red-10: #dc3e42; + --theme-red-11: #ce2c31; + --theme-red-12: #641723; + --theme-red-2: #fff7f7; + --theme-red-3: #feebec; + --theme-red-4: #ffdbdc; + --theme-red-5: #ffcdce; + --theme-red-6: #fdbdbe; + --theme-red-7: #f4a9aa; + --theme-red-8: #eb8e90; + --theme-red-9: #e5484d; + --theme-slate-1: #fcfcfd; + --theme-slate-10: #80838d; + --theme-slate-11: #60646c; + --theme-slate-12: #1c2024; + --theme-slate-2: #f9f9fb; + --theme-slate-3: #f0f0f3; + --theme-slate-4: #e8e8ec; + --theme-slate-5: #e0e1e6; + --theme-slate-6: #d9d9e0; + --theme-slate-7: #cdced6; + --theme-slate-8: #b9bbc6; + --theme-slate-9: #8b8d98; + --theme-slate-alpha-008: #1c202414; + --theme-slate-alpha-056: #1c20248f; + --theme-slate-constant-dark: #1c2024; + --theme-slate-constant-light: #fcfcfd; + --theme-slate-shadow-0: #1c202400; + --theme-slate-shadow-100: #1c20240a; + --theme-slate-shadow-200: #1c20240f; + --theme-slate-shadow-300: #1c202414; + --theme-slate-shadow-400: #1c20241a; + --theme-slate-shadow-500: #1c202429; +} + +:root.dark-theme, .dark-theme, .dark-theme *::backdrop, .dark-theme *::before, .dark-theme *::after { + --effect-shadow-100-layer1-color: var(--theme-slate-shadow-200); + --effect-shadow-100-layer2-color: var(--theme-slate-shadow-0); + --effect-shadow-200-layer1-color: var(--theme-slate-shadow-400); + --effect-shadow-200-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-300-layer1-color: var(--theme-slate-shadow-300); + --effect-shadow-300-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-400-layer1-color: var(--theme-slate-shadow-300); + --effect-shadow-400-layer2-color: var(--theme-slate-shadow-100); + --effect-shadow-500-layer1-color: var(--theme-slate-shadow-500); + --effect-shadow-500-layer2-color: var(--theme-slate-shadow-0); + --effect-shadow-600-layer1-color: var(--theme-slate-shadow-500); + --effect-shadow-600-layer2-color: var(--theme-slate-shadow-0); + --semantic-background-active: var(--theme-indigo-4); + --semantic-background-backdrop: var(--theme-slate-alpha-056); + --semantic-background-brand: var(--theme-iris-9); + --semantic-background-caution: var(--theme-orange-9); + --semantic-background-discovery: var(--theme-plum-9); + --semantic-background-forcedark: var(--theme-slate-constant-dark); + --semantic-background-forcelight: var(--theme-slate-constant-light); + --semantic-background-hover: var(--theme-slate-alpha-008); + --semantic-background-info: var(--theme-indigo-9); + --semantic-background-inverse: var(--theme-slate-12); + --semantic-background-negative: var(--theme-red-9); + --semantic-background-positive: var(--theme-green-9); + --semantic-background-primary: var(--theme-slate-1); + --semantic-background-secondary: var(--theme-slate-2); + --semantic-background-tertiary: var(--theme-slate-3); + --semantic-border-active: var(--theme-indigo-12); + --semantic-border-brand: var(--theme-iris-9); + --semantic-border-caution: var(--theme-orange-9); + --semantic-border-discovery: var(--theme-plum-9); + --semantic-border-forcedark: var(--theme-slate-constant-dark); + --semantic-border-forcelight: var(--theme-slate-constant-light); + --semantic-border-info: var(--theme-indigo-9); + --semantic-border-negative: var(--theme-red-9); + --semantic-border-positive: var(--theme-green-9); + --semantic-border-primary: var(--theme-slate-12); + --semantic-border-secondary: var(--theme-slate-7); + --semantic-icon-active: var(--theme-indigo-12); + --semantic-icon-brand: var(--theme-iris-9); + --semantic-icon-caution: var(--theme-orange-9); + --semantic-icon-discovery: var(--theme-plum-9); + --semantic-icon-forcedark: var(--theme-slate-constant-dark); + --semantic-icon-forcelight: var(--theme-slate-constant-light); + --semantic-icon-info: var(--theme-indigo-9); + --semantic-icon-inverse: var(--theme-slate-1); + --semantic-icon-negative: var(--theme-red-9); + --semantic-icon-positive: var(--theme-green-9); + --semantic-icon-primary: var(--theme-slate-12); + --semantic-icon-secondary: var(--theme-slate-11); + --semantic-text-active: var(--theme-indigo-12); + --semantic-text-brand: var(--theme-iris-9); + --semantic-text-caution: var(--theme-orange-9); + --semantic-text-discovery: var(--theme-plum-9); + --semantic-text-forcedark: var(--theme-slate-constant-dark); + --semantic-text-forcelight: var(--theme-slate-constant-light); + --semantic-text-info: var(--theme-indigo-9); + --semantic-text-inverse: var(--theme-slate-1); + --semantic-text-link: var(--theme-indigo-9); + --semantic-text-negative: var(--theme-red-9); + --semantic-text-positive: var(--theme-green-9); + --semantic-text-primary: var(--theme-slate-12); + --semantic-text-secondary: var(--theme-slate-11); + --theme-green-1: #0e1512; + --theme-green-10: #33b074; + --theme-green-11: #3dd68c; + --theme-green-12: #b1f1cb; + --theme-green-2: #121b17; + --theme-green-3: #132d21; + --theme-green-4: #113b29; + --theme-green-5: #174933; + --theme-green-6: #20573e; + --theme-green-7: #28684a; + --theme-green-8: #2f7c57; + --theme-green-9: #30a46c; + --theme-indigo-1: #11131f; + --theme-indigo-10: #5472e4; + --theme-indigo-11: #9eb1ff; + --theme-indigo-12: #d6e1ff; + --theme-indigo-2: #141726; + --theme-indigo-3: #182449; + --theme-indigo-4: #1d2e62; + --theme-indigo-5: #253974; + --theme-indigo-6: #304384; + --theme-indigo-7: #3a4f97; + --theme-indigo-8: #435db1; + --theme-indigo-9: #3e63dd; + --theme-iris-1: #13131e; + --theme-iris-10: #6e6ade; + --theme-iris-11: #b1a9ff; + --theme-iris-12: #e0dffe; + --theme-iris-2: #171625; + --theme-iris-3: #202248; + --theme-iris-4: #262a65; + --theme-iris-5: #303374; + --theme-iris-6: #3d3e82; + --theme-iris-7: #4a4a95; + --theme-iris-8: #5958b1; + --theme-iris-9: #5b5bd6; + --theme-orange-1: #17120e; + --theme-orange-10: #ff801f; + --theme-orange-11: #ffa057; + --theme-orange-12: #ffe0c2; + --theme-orange-2: #1e160f; + --theme-orange-3: #331e0b; + --theme-orange-4: #462100; + --theme-orange-5: #562800; + --theme-orange-6: #66350c; + --theme-orange-7: #7e451d; + --theme-orange-8: #a35829; + --theme-orange-9: #f76b15; + --theme-plum-1: #181118; + --theme-plum-10: #b658c4; + --theme-plum-11: #e796f3; + --theme-plum-12: #f4d4f4; + --theme-plum-2: #201320; + --theme-plum-3: #351a35; + --theme-plum-4: #451d47; + --theme-plum-5: #512454; + --theme-plum-6: #5e3061; + --theme-plum-7: #734079; + --theme-plum-8: #92549c; + --theme-plum-9: #ab4aba; + --theme-red-1: #191111; + --theme-red-10: #ec5d5e; + --theme-red-11: #ff9592; + --theme-red-12: #ffd1d9; + --theme-red-2: #201314; + --theme-red-3: #3b1219; + --theme-red-4: #500f1c; + --theme-red-5: #611623; + --theme-red-6: #72232d; + --theme-red-7: #8c333a; + --theme-red-8: #b54548; + --theme-red-9: #e5484d; + --theme-slate-1: #111113; + --theme-slate-10: #777b84; + --theme-slate-11: #b0b4ba; + --theme-slate-12: #edeef0; + --theme-slate-2: #18191b; + --theme-slate-3: #212225; + --theme-slate-4: #272a2d; + --theme-slate-5: #2e3135; + --theme-slate-6: #363a3f; + --theme-slate-7: #43484e; + --theme-slate-8: #5a6169; + --theme-slate-9: #696e77; + --theme-slate-alpha-008: #edeef014; + --theme-slate-alpha-056: #1111138f; + --theme-slate-constant-dark: #111113; + --theme-slate-constant-light: #edeef0; + --theme-slate-shadow-0: #11111300; + --theme-slate-shadow-100: #11111329; + --theme-slate-shadow-200: #1111133d; + --theme-slate-shadow-300: #11111352; + --theme-slate-shadow-400: #11111366; + --theme-slate-shadow-500: #111113a3; +} diff --git a/assets/js/moon-base-preset.js b/assets/js/moon-base-preset.js new file mode 100644 index 000000000..c118d4b29 --- /dev/null +++ b/assets/js/moon-base-preset.js @@ -0,0 +1,198 @@ +const plugin = require("tailwindcss/plugin"); +const components = require("./moon-components.js"); + +const commonBorderWidths = { + 0: "var(--dimension-border-0)", + 1: "var(--dimension-border-1)", + 2: "var(--dimension-border-2)", + 4: "var(--dimension-border-4)", +}; + +const commonBorderColors = { + primary: "var(--semantic-border-primary)", + secondary: "var(--semantic-border-secondary)", + brand: "var(--semantic-border-brand)", + positive: "var(--semantic-border-positive)", + caution: "var(--semantic-border-caution)", + negative: "var(--semantic-border-negative)", + info: "var(--semantic-border-info)", + discovery: "var(--semantic-border-discovery)", + active: "var(--semantic-border-active)", + "force-light": "var(--semantic-border-forcelight)", + "force-dark": "var(--semantic-border-forcedark)", +}; + +const iconClasses = [ + "primary", + "secondary", + "brand", + "inverse", + "positive", + "caution", + "negative", + "info", + "discovery", + "active", + "force-light", + "force-dark", +]; + +// Utility function to generate text styles +const generateTextUtilities = (prefix, levels) => { + return levels.reduce((acc, level) => { + acc[`.${prefix}-${level}`] = { + fontWeight: `var(--${prefix}-${level}-font-weight)`, + fontSize: `var(--${prefix}-${level}-font-size)`, + lineHeight: `var(--${prefix}-${level}-line-height)`, + fontFamily: `var(--${prefix}-${level}-font-family)`, + }; + return acc; + }, {}); +}; + +module.exports = { + plugins: [ + // Plugin to add Moon Components and Text Utilities + plugin(function ({ addComponents }) { + const textBodyUtilities = generateTextUtilities("text-body", [ + "100", + "200", + "300", + "400", + "500", + ]); + + const textHeadingUtilities = generateTextUtilities("text-heading", [ + "100", + "200", + "300", + "400", + "500", + ]); + addComponents(components); + addComponents({ ...textBodyUtilities, ...textHeadingUtilities }); + }), + // Plugin to add custom icon classes + plugin(function ({ addUtilities }) { + const iconUtilities = iconClasses.reduce((acc, iconClass) => { + acc[`.icon-${iconClass}`] = { + color: `var(--semantic-icon-${iconClass.replace(/-/g, "")})`, + }; + return acc; + }, {}); + + addUtilities(iconUtilities); + }), + ], + theme: { + extend: { + spacing: { + "space-0": "var(--dimension-space-0)", + "space-1": "var(--dimension-space-1)", + "space-2": "var(--dimension-space-2)", + "space-4": "var(--dimension-space-4)", + "space-6": "var(--dimension-space-6)", + "space-8": "var(--dimension-space-8)", + "space-10": "var(--dimension-space-10)", + "space-12": "var(--dimension-space-12)", + "space-14": "var(--dimension-space-14)", + "space-16": "var(--dimension-space-16)", + "space-18": "var(--dimension-space-18)", + "space-20": "var(--dimension-space-20)", + "space-24": "var(--dimension-space-24)", + "space-28": "var(--dimension-space-28)", + "space-32": "var(--dimension-space-32)", + "space-36": "var(--dimension-space-36)", + "space-40": "var(--dimension-space-40)", + "space-48": "var(--dimension-space-48)", + "space-56": "var(--dimension-space-56)", + "space-64": "var(--dimension-space-64)", + "space-72": "var(--dimension-space-72)", + "space-80": "var(--dimension-space-80)", + "space-88": "var(--dimension-space-88)", + "space-96": "var(--dimension-space-96)", + "space-104": "var(--dimension-space-104)", + "space-112": "var(--dimension-space-112)", + "space-120": "var(--dimension-space-120)", + "space-128": "var(--dimension-space-128)", + "space-136": "var(--dimension-space-136)", + "space-144": "var(--dimension-space-144)", + "space-152": "var(--dimension-space-152)", + "space-160": "var(--dimension-space-160)", + }, + borderRadius: { + 0: "var(--dimension-rounded-0)", + 2: "var(--dimension-rounded-2)", + 4: "var(--dimension-rounded-4)", + 6: "var(--dimension-rounded-6)", + 8: "var(--dimension-rounded-8)", + 12: "var(--dimension-rounded-12)", + 16: "var(--dimension-rounded-16)", + 24: "var(--dimension-rounded-24)", + 32: "var(--dimension-rounded-32)", + full: "var(--dimension-rounded-full)", + }, + borderWidth: commonBorderWidths, + divideWidth: commonBorderWidths, + ringWidth: commonBorderWidths, + outlineWidth: commonBorderWidths, + boxShadow: { + 100: "var(--effect-shadow-100-layer1-x) var(--effect-shadow-100-layer1-y) var(--effect-shadow-100-layer1-blur) var(--effect-shadow-100-layer1-spread) var(--effect-shadow-100-layer1-color), var(--effect-shadow-100-layer2-x) var(--effect-shadow-100-layer2-y) var(--effect-shadow-100-layer2-blur) var(--effect-shadow-100-layer2-spread) var(--effect-shadow-100-layer2-color)", + 200: "var(--effect-shadow-200-layer1-x) var(--effect-shadow-200-layer1-y) var(--effect-shadow-200-layer1-blur) var(--effect-shadow-200-layer1-spread) var(--effect-shadow-200-layer1-color), var(--effect-shadow-200-layer2-x) var(--effect-shadow-200-layer2-y) var(--effect-shadow-200-layer2-blur) var(--effect-shadow-200-layer2-spread) var(--effect-shadow-200-layer2-color)", + 300: "var(--effect-shadow-300-layer1-x) var(--effect-shadow-300-layer1-y) var(--effect-shadow-300-layer1-blur) var(--effect-shadow-300-layer1-spread) var(--effect-shadow-300-layer1-color), var(--effect-shadow-300-layer2-x) var(--effect-shadow-300-layer2-y) var(--effect-shadow-300-layer2-blur) var(--effect-shadow-300-layer2-spread) var(--effect-shadow-300-layer2-color)", + 400: "var(--effect-shadow-400-layer1-x) var(--effect-shadow-400-layer1-y) var(--effect-shadow-400-layer1-blur) var(--effect-shadow-400-layer1-spread) var(--effect-shadow-400-layer1-color), var(--effect-shadow-300-layer2-x) var(--effect-shadow-300-layer2-y) var(--effect-shadow-300-layer2-blur) var(--effect-shadow-300-layer2-spread) var(--effect-shadow-300-layer2-color)", + 500: "var(--effect-shadow-500-layer1-x) var(--effect-shadow-500-layer1-y) var(--effect-shadow-500-layer1-blur) var(--effect-shadow-500-layer1-spread) var(--effect-shadow-500-layer1-color), var(--effect-shadow-500-layer2-x) var(--effect-shadow-500-layer2-y) var(--effect-shadow-500-layer2-blur) var(--effect-shadow-500-layer2-spread) var(--effect-shadow-500-layer2-color)", + 600: "var(--effect-shadow-600-layer1-x) var(--effect-shadow-600-layer1-y) var(--effect-shadow-600-layer1-blur) var(--effect-shadow-600-layer1-spread) var(--effect-shadow-600-layer1-color), var(--effect-shadow-600-layer2-x) var(--effect-shadow-600-layer2-y) var(--effect-shadow-600-layer2-blur) var(--effect-shadow-600-layer2-spread) var(--effect-shadow-600-layer2-color)", + }, + backgroundColor: { + primary: "var(--semantic-background-primary)", + secondary: "var(--semantic-background-secondary)", + tertiary: "var(--semantic-background-tertiary)", + brand: "var(--semantic-background-brand)", + inverse: "var(--semantic-background-inverse)", + positive: "var(--semantic-background-positive)", + caution: "var(--semantic-background-caution)", + negative: "var(--semantic-background-negative)", + info: "var(--semantic-background-info)", + discovery: "var(--semantic-background-discovery)", + active: "var(--semantic-background-active)", + hover: "var(--semantic-background-hover)", + backdrop: "var(--semantic-background-backdrop)", + "force-light": "var(--semantic-background-forcelight)", + "force-dark": "var(--semantic-background-forcedark)", + }, + textColor: { + primary: "var(--semantic-text-primary)", + secondary: "var(--semantic-text-secondary)", + brand: "var(--semantic-text-brand)", + inverse: "var(--semantic-text-inverse)", + positive: "var(--semantic-text-positive)", + caution: "var(--semantic-text-caution)", + negative: "var(--semantic-text-negative)", + info: "var(--semantic-text-info)", + discovery: "var(--semantic-text-discovery)", + active: "var(--semantic-text-active)", + link: "var(--semantic-text-link)", + "force-light": "var(--semantic-text-forcelight)", + "force-dark": "var(--semantic-text-forcedark)", + }, + borderColor: commonBorderColors, + divideColor: commonBorderColors, + ringColor: commonBorderColors, + outlineColor: commonBorderColors, + fontFamily: { + primary: "var(--text-font-family-primary)", + secondary: "var(--text-font-family-secondary)", + tertiary: "var(--text-font-family-tertiary)", + }, + opacity: { + 0: "var(--effect-opacity-0)", + 20: "var(--effect-opacity-20)", + 40: "var(--effect-opacity-40)", + 60: "var(--effect-opacity-60)", + 80: "var(--effect-opacity-80)", + 100: "var(--effect-opacity-100)", + }, + }, + }, +}; diff --git a/assets/js/moon-components.js b/assets/js/moon-components.js new file mode 100644 index 000000000..a966d2434 --- /dev/null +++ b/assets/js/moon-components.js @@ -0,0 +1 @@ +module.exports = {".moon-avatar":{"display":"flex","alignItems":"center","justifyContent":"center","overflow":"hidden","whiteSpace":"nowrap","textAlign":"center","backgroundColor":"var(--semantic-background-primary)","borderWidth":"var(--dimension-border-1)","borderColor":"var(--semantic-border-primary)","color":"var(--semantic-text-primary)","fontWeight":"var(--text-body-300-font-weight)","fontSize":"var(--text-body-300-font-size)","lineHeight":"var(--text-body-300-line-height)","fontFamily":"var(--text-body-300-font-family)","width":"var(--dimension-space-40)","height":"var(--dimension-space-40)","borderRadius":"var(--dimension-space-8)"},".moon-avatar span":{"overflow":"hidden","textOverflow":"ellipsis","whiteSpace":"nowrap","paddingLeft":"var(--dimension-space-4)","paddingRight":"var(--dimension-space-4)"},".moon-avatar svg":{"color":"var(--semantic-icon-primary)","width":"var(--dimension-space-20)","height":"var(--dimension-space-20)"},".moon-avatar-xs":{"fontWeight":"var(--text-body-100-font-weight)","fontSize":"var(--text-body-100-font-size)","lineHeight":"var(--text-body-100-line-height)","fontFamily":"var(--text-body-100-font-family)","width":"var(--dimension-space-24)","height":"var(--dimension-space-24)","borderRadius":"var(--dimension-space-4)"},".moon-avatar-xs span":{"paddingLeft":"var(--dimension-space-2)","paddingRight":"var(--dimension-space-2)"},".moon-avatar-xs svg":{"width":"var(--dimension-space-16)","height":"var(--dimension-space-16)"},".moon-avatar-sm":{"fontWeight":"var(--text-body-200-font-weight)","fontSize":"var(--text-body-200-font-size)","lineHeight":"var(--text-body-200-line-height)","fontFamily":"var(--text-body-200-font-family)","width":"var(--dimension-space-32)","height":"var(--dimension-space-32)","borderRadius":"var(--dimension-space-8)"},".moon-avatar-sm span":{"paddingLeft":"var(--dimension-space-2)","paddingRight":"var(--dimension-space-2)"},".moon-avatar-sm svg":{"width":"var(--dimension-space-20)","height":"var(--dimension-space-20)"},".moon-avatar-md":{"fontWeight":"var(--text-body-300-font-weight)","fontSize":"var(--text-body-300-font-size)","lineHeight":"var(--text-body-300-line-height)","fontFamily":"var(--text-body-300-font-family)","width":"var(--dimension-space-40)","height":"var(--dimension-space-40)","borderRadius":"var(--dimension-space-8)"},".moon-avatar-md span":{"paddingLeft":"var(--dimension-space-4)","paddingRight":"var(--dimension-space-4)"},".moon-avatar-md svg":{"width":"var(--dimension-space-20)","height":"var(--dimension-space-20)"},".moon-avatar-lg":{"fontWeight":"var(--text-body-400-font-weight)","fontSize":"var(--text-body-400-font-size)","lineHeight":"var(--text-body-400-line-height)","fontFamily":"var(--text-body-400-font-family)","width":"var(--dimension-space-48)","height":"var(--dimension-space-48)","borderRadius":"var(--dimension-space-8)"},".moon-avatar-lg span":{"paddingLeft":"var(--dimension-space-4)","paddingRight":"var(--dimension-space-4)"},".moon-avatar-lg svg":{"width":"var(--dimension-space-20)","height":"var(--dimension-space-20)"},".moon-avatar-xl":{"fontWeight":"var(--text-body-400-font-weight)","fontSize":"var(--text-body-400-font-size)","lineHeight":"var(--text-body-400-line-height)","fontFamily":"var(--text-body-400-font-family)","width":"var(--dimension-space-56)","height":"var(--dimension-space-56)","borderRadius":"var(--dimension-space-8)"},".moon-avatar-xl span":{"paddingLeft":"var(--dimension-space-4)","paddingRight":"var(--dimension-space-4)"},".moon-avatar-xl svg":{"width":"var(--dimension-space-20)","height":"var(--dimension-space-20)"},".moon-avatar-2xl":{"fontWeight":"var(--text-body-400-font-weight)","fontSize":"var(--text-body-400-font-size)","lineHeight":"var(--text-body-400-line-height)","fontFamily":"var(--text-body-400-font-family)","width":"var(--dimension-space-64)","height":"var(--dimension-space-64)","borderRadius":"var(--dimension-space-12)"},".moon-avatar-2xl span":{"paddingLeft":"var(--dimension-space-4)","paddingRight":"var(--dimension-space-4)"},".moon-avatar-2xl svg":{"width":"var(--dimension-space-24)","height":"var(--dimension-space-24)"}}; \ No newline at end of file