@fastwork/xosmoz-theme 0.0.39 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -13
- package/dist/base.css +1 -1
- package/dist/index.d.mts +58 -58
- package/dist/index.d.ts +58 -58
- package/dist/index.js +53 -53
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +53 -53
- package/dist/index.mjs.map +1 -1
- package/dist/themes/dark.css +28 -28
- package/dist/themes/light.css +24 -24
- package/dist/themes.css +52 -52
- package/dist/tokens.js.map +1 -1
- package/dist/tokens.mjs.map +1 -1
- package/llms.txt +269 -0
- package/package.json +5 -3
package/dist/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tokens/typography.ts","../src/tokens/shadows.ts"],"names":["fontSize","fontWeight","fontFamily","primary","secondary","lineHeight","headings","heading1","desktop","mobile","heading2","heading3","heading4","heading5","heading6","titles","title1","title2","title3","title4","subtitles","subtitle1Bold","subtitle1Regular","subtitle2Bold","subtitle2Regular","subtitle3Bold","subtitle3Regular","body","body1","body2","body3","body4","font","typography","boxShadows"],"mappings":"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","file":"tokens.js","sourcesContent":["/**\n * Typography design tokens\n */\n\nimport type {\n\tTypographyScale,\n\tFontWeights,\n\tHeadingTokens,\n\tTitleTokens,\n\tSubtitleTokens,\n\tBodyTokens,\n} from '../types'\n\nexport const fontSize: TypographyScale = {\n\t50: '0.5rem', // 8px\n\t100: '0.625rem', // 10px\n\t200: '0.75rem', // 12px\n\t300: '0.875rem', // 14px\n\t400: '1rem', // 16px\n\t500: '1.125rem', // 18px\n\t600: '1.25rem', // 20px\n\t700: '1.5rem', // 24px\n\t800: '1.625rem', // 26px\n\t900: '2rem', // 32px\n\t1000: '2.375rem', // 38px\n\t1100: '2.5rem', // 40px\n\t1200: '2.6875rem', // 43px\n\t1300: '3rem', // 48px\n\t1400: '3.5rem', // 56px\n\t1500: '4rem', // 64px\n\t1600: '4.5rem', // 72px\n}\n\nexport const fontWeight: FontWeights = {\n\t100: 100,\n\t200: 200,\n\t300: 300,\n\t400: 400,\n\t500: 500,\n\t600: 600,\n\t700: 700,\n\t800: 800,\n\t900: 900,\n}\n\nexport const fontFamily = {\n\tprimary:\n\t\t'-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n\tsecondary:\n\t\t'\"Fastwork\", \"Noto Sans Thai\", \"Noto Sans\", -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n}\n\nexport const lineHeight = {\n\t'100pct': '1',\n\t'125pct': '1.25',\n\t'135pct': '1.35',\n\t'150pct': '1.5',\n\t'165pct': '1.65',\n\t'200pct': '2',\n}\n\nconst headings: HeadingTokens = {\n\theading1: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1600], // 72px\n\t\t\tmobile: fontSize[1300], // 48px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading2: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1500], // 64px\n\t\t\tmobile: fontSize[1200], // 43px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading3: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1400], // 56px\n\t\t\tmobile: fontSize[1000], // 38px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading4: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1300], // 48px\n\t\t\tmobile: fontSize[900], // 32px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading5: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1100], // 40px\n\t\t\tmobile: fontSize[800], // 26px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading6: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[900], // 32px\n\t\t\tmobile: fontSize[700], // 24px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst titles: TitleTokens = {\n\ttitle1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[700], // 24px\n\t\t\tmobile: fontSize[600], // 20px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[600], // 20px\n\t\t\tmobile: fontSize[500], // 18px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[500], // 18px\n\t\t\tmobile: fontSize[400], // 16px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst subtitles: SubtitleTokens = {\n\tsubtitle1Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle1Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst body: BodyTokens = {\n\tbody1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[100], // 10px\n\t\t\tmobile: fontSize[50], // 8px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\n// Combined font tokens for easy access: typography.font.heading1, typography.font.body1, etc.\nexport const font = {\n\t...headings,\n\t...titles,\n\t...subtitles,\n\t...body,\n}\n\nexport const typography = {\n\tfontSize,\n\tfontWeight,\n\tfontFamily,\n\tlineHeight,\n\tfont,\n}\n","/**\n * Box Shadow design tokens\n */\n\nexport const boxShadows = {\n\t100: '0 1px 2px 0 rgba(0, 0, 0, 0.08)',\n\t200: '0 2px 6px 0 rgba(0, 0, 0, 0.10)',\n\t300: '0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n\t400: '0 8px 20px 0 rgba(0, 0, 0, 0.14)',\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/tokens/typography.ts","../src/tokens/shadows.ts"],"names":["fontSize","fontWeight","fontFamily","primary","secondary","lineHeight","headings","heading1","desktop","mobile","heading2","heading3","heading4","heading5","heading6","titles","title1","title2","title3","title4","subtitles","subtitle1Bold","subtitle1Regular","subtitle2Bold","subtitle2Regular","subtitle3Bold","subtitle3Regular","body","body1","body2","body3","body4","font","typography","boxShadows"],"mappings":"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","file":"tokens.js","sourcesContent":["/**\n * Typography design tokens\n */\n\nimport type {\n\tTypographyScale,\n\tFontWeights,\n\tHeadingTokens,\n\tTitleTokens,\n\tSubtitleTokens,\n\tBodyTokens,\n} from '../types'\n\nexport const fontSize: TypographyScale = {\n\t50: '0.5rem', // 8px\n\t100: '0.625rem', // 10px\n\t200: '0.75rem', // 12px\n\t300: '0.875rem', // 14px\n\t400: '1rem', // 16px\n\t500: '1.125rem', // 18px\n\t600: '1.25rem', // 20px\n\t700: '1.5rem', // 24px\n\t800: '1.625rem', // 26px\n\t900: '2rem', // 32px\n\t1000: '2.375rem', // 38px\n\t1100: '2.5rem', // 40px\n\t1200: '2.6875rem', // 43px\n\t1300: '3rem', // 48px\n\t1400: '3.5rem', // 56px\n\t1500: '4rem', // 64px\n\t1600: '4.5rem', // 72px\n}\n\nexport const fontWeight: FontWeights = {\n\t100: 100,\n\t200: 200,\n\t300: 300,\n\t400: 400,\n\t500: 500,\n\t600: 600,\n\t700: 700,\n\t800: 800,\n\t900: 900,\n}\n\nexport const fontFamily = {\n\tprimary:\n\t\t'-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n\tsecondary:\n\t\t'\"Fastwork\", \"Noto Sans Thai\", \"Noto Sans\", -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n}\n\nexport const lineHeight = {\n\t'100pct': '1',\n\t'125pct': '1.25',\n\t'135pct': '1.35',\n\t'150pct': '1.5',\n\t'165pct': '1.65',\n\t'200pct': '2',\n}\n\nconst headings: HeadingTokens = {\n\theading1: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1600], // 72px\n\t\t\tmobile: fontSize[1300], // 48px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading2: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1500], // 64px\n\t\t\tmobile: fontSize[1200], // 43px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading3: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1400], // 56px\n\t\t\tmobile: fontSize[1000], // 38px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading4: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1300], // 48px\n\t\t\tmobile: fontSize[900], // 32px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading5: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1100], // 40px\n\t\t\tmobile: fontSize[800], // 26px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading6: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[900], // 32px\n\t\t\tmobile: fontSize[700], // 24px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst titles: TitleTokens = {\n\ttitle1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[700], // 24px\n\t\t\tmobile: fontSize[600], // 20px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[600], // 20px\n\t\t\tmobile: fontSize[500], // 18px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[500], // 18px\n\t\t\tmobile: fontSize[400], // 16px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst subtitles: SubtitleTokens = {\n\tsubtitle1Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle1Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst body: BodyTokens = {\n\tbody1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[100], // 10px\n\t\t\tmobile: fontSize[50], // 8px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\n// Combined font tokens for easy access: typography.font.heading1, typography.font.body1, etc.\nexport const font = {\n\t...headings,\n\t...titles,\n\t...subtitles,\n\t...body,\n}\n\nexport const typography = {\n\tfontSize,\n\tfontWeight,\n\tfontFamily,\n\tlineHeight,\n\tfont,\n}\n","/**\n * Box Shadow design tokens\n */\n\nexport const boxShadows = {\n\t100: '0 1px 2px 0 rgba(0, 0, 0, 0.08)',\n\t200: '0 2px 6px 0 rgba(0, 0, 0, 0.10)',\n\t300: '0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n\t400: '0 8px 20px 0 rgba(0, 0, 0, 0.14)',\n}\n"]}
|
package/dist/tokens.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tokens/typography.ts","../src/tokens/shadows.ts"],"names":["fontSize","fontWeight","fontFamily","primary","secondary","lineHeight","headings","heading1","desktop","mobile","heading2","heading3","heading4","heading5","heading6","titles","title1","title2","title3","title4","subtitles","subtitle1Bold","subtitle1Regular","subtitle2Bold","subtitle2Regular","subtitle3Bold","subtitle3Regular","body","body1","body2","body3","body4","font","typography","boxShadows"],"mappings":"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","file":"tokens.mjs","sourcesContent":["/**\n * Typography design tokens\n */\n\nimport type {\n\tTypographyScale,\n\tFontWeights,\n\tHeadingTokens,\n\tTitleTokens,\n\tSubtitleTokens,\n\tBodyTokens,\n} from '../types'\n\nexport const fontSize: TypographyScale = {\n\t50: '0.5rem', // 8px\n\t100: '0.625rem', // 10px\n\t200: '0.75rem', // 12px\n\t300: '0.875rem', // 14px\n\t400: '1rem', // 16px\n\t500: '1.125rem', // 18px\n\t600: '1.25rem', // 20px\n\t700: '1.5rem', // 24px\n\t800: '1.625rem', // 26px\n\t900: '2rem', // 32px\n\t1000: '2.375rem', // 38px\n\t1100: '2.5rem', // 40px\n\t1200: '2.6875rem', // 43px\n\t1300: '3rem', // 48px\n\t1400: '3.5rem', // 56px\n\t1500: '4rem', // 64px\n\t1600: '4.5rem', // 72px\n}\n\nexport const fontWeight: FontWeights = {\n\t100: 100,\n\t200: 200,\n\t300: 300,\n\t400: 400,\n\t500: 500,\n\t600: 600,\n\t700: 700,\n\t800: 800,\n\t900: 900,\n}\n\nexport const fontFamily = {\n\tprimary:\n\t\t'-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n\tsecondary:\n\t\t'\"Fastwork\", \"Noto Sans Thai\", \"Noto Sans\", -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n}\n\nexport const lineHeight = {\n\t'100pct': '1',\n\t'125pct': '1.25',\n\t'135pct': '1.35',\n\t'150pct': '1.5',\n\t'165pct': '1.65',\n\t'200pct': '2',\n}\n\nconst headings: HeadingTokens = {\n\theading1: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1600], // 72px\n\t\t\tmobile: fontSize[1300], // 48px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading2: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1500], // 64px\n\t\t\tmobile: fontSize[1200], // 43px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading3: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1400], // 56px\n\t\t\tmobile: fontSize[1000], // 38px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading4: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1300], // 48px\n\t\t\tmobile: fontSize[900], // 32px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading5: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1100], // 40px\n\t\t\tmobile: fontSize[800], // 26px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading6: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[900], // 32px\n\t\t\tmobile: fontSize[700], // 24px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst titles: TitleTokens = {\n\ttitle1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[700], // 24px\n\t\t\tmobile: fontSize[600], // 20px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[600], // 20px\n\t\t\tmobile: fontSize[500], // 18px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[500], // 18px\n\t\t\tmobile: fontSize[400], // 16px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst subtitles: SubtitleTokens = {\n\tsubtitle1Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle1Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst body: BodyTokens = {\n\tbody1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[100], // 10px\n\t\t\tmobile: fontSize[50], // 8px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\n// Combined font tokens for easy access: typography.font.heading1, typography.font.body1, etc.\nexport const font = {\n\t...headings,\n\t...titles,\n\t...subtitles,\n\t...body,\n}\n\nexport const typography = {\n\tfontSize,\n\tfontWeight,\n\tfontFamily,\n\tlineHeight,\n\tfont,\n}\n","/**\n * Box Shadow design tokens\n */\n\nexport const boxShadows = {\n\t100: '0 1px 2px 0 rgba(0, 0, 0, 0.08)',\n\t200: '0 2px 6px 0 rgba(0, 0, 0, 0.10)',\n\t300: '0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n\t400: '0 8px 20px 0 rgba(0, 0, 0, 0.14)',\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/tokens/typography.ts","../src/tokens/shadows.ts"],"names":["fontSize","fontWeight","fontFamily","primary","secondary","lineHeight","headings","heading1","desktop","mobile","heading2","heading3","heading4","heading5","heading6","titles","title1","title2","title3","title4","subtitles","subtitle1Bold","subtitle1Regular","subtitle2Bold","subtitle2Regular","subtitle3Bold","subtitle3Regular","body","body1","body2","body3","body4","font","typography","boxShadows"],"mappings":"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","file":"tokens.mjs","sourcesContent":["/**\n * Typography design tokens\n */\n\nimport type {\n\tTypographyScale,\n\tFontWeights,\n\tHeadingTokens,\n\tTitleTokens,\n\tSubtitleTokens,\n\tBodyTokens,\n} from '../types'\n\nexport const fontSize: TypographyScale = {\n\t50: '0.5rem', // 8px\n\t100: '0.625rem', // 10px\n\t200: '0.75rem', // 12px\n\t300: '0.875rem', // 14px\n\t400: '1rem', // 16px\n\t500: '1.125rem', // 18px\n\t600: '1.25rem', // 20px\n\t700: '1.5rem', // 24px\n\t800: '1.625rem', // 26px\n\t900: '2rem', // 32px\n\t1000: '2.375rem', // 38px\n\t1100: '2.5rem', // 40px\n\t1200: '2.6875rem', // 43px\n\t1300: '3rem', // 48px\n\t1400: '3.5rem', // 56px\n\t1500: '4rem', // 64px\n\t1600: '4.5rem', // 72px\n}\n\nexport const fontWeight: FontWeights = {\n\t100: 100,\n\t200: 200,\n\t300: 300,\n\t400: 400,\n\t500: 500,\n\t600: 600,\n\t700: 700,\n\t800: 800,\n\t900: 900,\n}\n\nexport const fontFamily = {\n\tprimary:\n\t\t'-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n\tsecondary:\n\t\t'\"Fastwork\", \"Noto Sans Thai\", \"Noto Sans\", -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif',\n}\n\nexport const lineHeight = {\n\t'100pct': '1',\n\t'125pct': '1.25',\n\t'135pct': '1.35',\n\t'150pct': '1.5',\n\t'165pct': '1.65',\n\t'200pct': '2',\n}\n\nconst headings: HeadingTokens = {\n\theading1: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1600], // 72px\n\t\t\tmobile: fontSize[1300], // 48px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading2: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1500], // 64px\n\t\t\tmobile: fontSize[1200], // 43px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading3: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1400], // 56px\n\t\t\tmobile: fontSize[1000], // 38px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading4: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1300], // 48px\n\t\t\tmobile: fontSize[900], // 32px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading5: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[1100], // 40px\n\t\t\tmobile: fontSize[800], // 26px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\theading6: {\n\t\tfontFamily: fontFamily.secondary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[900], // 32px\n\t\t\tmobile: fontSize[700], // 24px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst titles: TitleTokens = {\n\ttitle1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[700], // 24px\n\t\t\tmobile: fontSize[600], // 20px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[600], // 20px\n\t\t\tmobile: fontSize[500], // 18px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[500], // 18px\n\t\t\tmobile: fontSize[400], // 16px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\ttitle4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst subtitles: SubtitleTokens = {\n\tsubtitle1Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle1Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle2Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Bold: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[700],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tsubtitle3Regular: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\nconst body: BodyTokens = {\n\tbody1: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[400], // 16px\n\t\t\tmobile: fontSize[300], // 14px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody2: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[300], // 14px\n\t\t\tmobile: fontSize[200], // 12px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody3: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[200], // 12px\n\t\t\tmobile: fontSize[100], // 10px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n\tbody4: {\n\t\tfontFamily: fontFamily.primary,\n\t\tfontSize: {\n\t\t\tdesktop: fontSize[100], // 10px\n\t\t\tmobile: fontSize[50], // 8px\n\t\t},\n\t\tfontWeight: fontWeight[400],\n\t\tlineHeight: lineHeight['150pct'],\n\t},\n}\n\n// Combined font tokens for easy access: typography.font.heading1, typography.font.body1, etc.\nexport const font = {\n\t...headings,\n\t...titles,\n\t...subtitles,\n\t...body,\n}\n\nexport const typography = {\n\tfontSize,\n\tfontWeight,\n\tfontFamily,\n\tlineHeight,\n\tfont,\n}\n","/**\n * Box Shadow design tokens\n */\n\nexport const boxShadows = {\n\t100: '0 1px 2px 0 rgba(0, 0, 0, 0.08)',\n\t200: '0 2px 6px 0 rgba(0, 0, 0, 0.10)',\n\t300: '0 4px 16px 0 rgba(0, 0, 0, 0.12)',\n\t400: '0 8px 20px 0 rgba(0, 0, 0, 0.14)',\n}\n"]}
|
package/llms.txt
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
# @fastwork/xosmoz-theme
|
|
2
|
+
|
|
3
|
+
> Design tokens and theming system for the Xosmoz design system. Uses OKLCH color space for perceptually uniform colors. Supports light and dark themes via CSS variables with `data-theme` attribute switching.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fastwork/xosmoz-theme
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## CSS Imports
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
/* Base styles: CSS reset, font imports, typography/spacing/shadow tokens */
|
|
15
|
+
@import '@fastwork/xosmoz-theme/base.css';
|
|
16
|
+
|
|
17
|
+
/* All themes (light + dark) */
|
|
18
|
+
@import '@fastwork/xosmoz-theme/themes.css';
|
|
19
|
+
|
|
20
|
+
/* OR import a specific theme only */
|
|
21
|
+
@import '@fastwork/xosmoz-theme/themes/light.css';
|
|
22
|
+
@import '@fastwork/xosmoz-theme/themes/dark.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Theme Switching
|
|
26
|
+
|
|
27
|
+
Set the theme via the `data-theme` attribute on the `<html>` element. Light theme is the default (no attribute needed).
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<html>...</html> <!-- Light theme (default) -->
|
|
31
|
+
<html data-theme="dark">...</html> <!-- Dark theme -->
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
// Switch theme at runtime
|
|
36
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
37
|
+
|
|
38
|
+
// Remove attribute to return to light
|
|
39
|
+
document.documentElement.removeAttribute('data-theme');
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## CSS Variables Reference
|
|
43
|
+
|
|
44
|
+
All variables use the `--xz-` prefix.
|
|
45
|
+
|
|
46
|
+
### Base Colors
|
|
47
|
+
|
|
48
|
+
Surface colors that adapt between light and dark themes.
|
|
49
|
+
|
|
50
|
+
| Variable | Purpose |
|
|
51
|
+
|----------|---------|
|
|
52
|
+
| `--xz-color-bg-100` | Page background |
|
|
53
|
+
| `--xz-color-bg-200` | Elevated surface (cards, modals) |
|
|
54
|
+
| `--xz-color-bg-300` | Secondary surface |
|
|
55
|
+
| `--xz-color-bg-400` | Tertiary surface / hover states |
|
|
56
|
+
| `--xz-color-fg-100` | Primary text color |
|
|
57
|
+
| `--xz-color-fg-200` | Secondary/muted text (80% opacity of fg-100) |
|
|
58
|
+
| `--xz-color-fg-300` | Tertiary/disabled text (60% opacity of fg-100) |
|
|
59
|
+
| `--xz-color-line-100` | Subtle borders |
|
|
60
|
+
| `--xz-color-line-200` | Default borders |
|
|
61
|
+
| `--xz-color-line-300` | Strong/emphasized borders |
|
|
62
|
+
|
|
63
|
+
### Semantic Colors
|
|
64
|
+
|
|
65
|
+
Six semantic categories: `primary`, `danger`, `success`, `warning`, `info`, `neutral`.
|
|
66
|
+
|
|
67
|
+
Each category follows the same token structure. Replace `{name}` with the category name:
|
|
68
|
+
|
|
69
|
+
| Variable | Purpose |
|
|
70
|
+
|----------|---------|
|
|
71
|
+
| `--xz-color-{name}-soft-100` | Lightest soft background |
|
|
72
|
+
| `--xz-color-{name}-soft-200` | Medium soft background |
|
|
73
|
+
| `--xz-color-{name}-soft-300` | Darkest soft background |
|
|
74
|
+
| `--xz-color-{name}-line-100` | Subtle border |
|
|
75
|
+
| `--xz-color-{name}-line-200` | Default border |
|
|
76
|
+
| `--xz-color-{name}-line-300` | Strong border |
|
|
77
|
+
| `--xz-color-{name}-bg-100` | Solid fill background (e.g. button bg) |
|
|
78
|
+
| `--xz-color-{name}-bg-200` | Darker solid fill (e.g. hover state) |
|
|
79
|
+
| `--xz-color-{name}-fg-50` | Text on solid bg — use for text over `{name}-bg-100`/`bg-200` (typically white) |
|
|
80
|
+
| `--xz-color-{name}-fg-100` | Main text color for that semantic meaning |
|
|
81
|
+
| `--xz-color-{name}-fg-200` | Darkest/emphasized text |
|
|
82
|
+
|
|
83
|
+
**Important: `fg-50` is specifically for text rendered on top of solid background colors (`bg-100`/`bg-200`) of the same palette.** For example, use `--xz-color-primary-fg-50` as the text color on a `--xz-color-primary-bg-100` button. This is typically white in light theme.
|
|
84
|
+
|
|
85
|
+
### Raw Color Palettes
|
|
86
|
+
|
|
87
|
+
10-step scales (100–1000) for each palette. Available palettes: `fastwork`, `gray`, `green`, `mint`, `amber`, `red`, `orange`, `purple`, `cyan`, `black-alpha`, `white-alpha`.
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
--xz-color-{palette}-100 (lightest)
|
|
91
|
+
--xz-color-{palette}-200
|
|
92
|
+
...
|
|
93
|
+
--xz-color-{palette}-1000 (darkest)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Alpha palettes (`black-alpha`, `white-alpha`) use opacity steps from 0.1 to 1.0.
|
|
97
|
+
|
|
98
|
+
### Typography
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
--xz-font-size-50 (0.5rem / 8px)
|
|
102
|
+
--xz-font-size-100 (0.625rem / 10px)
|
|
103
|
+
--xz-font-size-200 (0.75rem / 12px)
|
|
104
|
+
--xz-font-size-300 (0.875rem / 14px)
|
|
105
|
+
--xz-font-size-400 (1rem / 16px)
|
|
106
|
+
--xz-font-size-500 (1.125rem / 18px)
|
|
107
|
+
--xz-font-size-600 (1.25rem / 20px)
|
|
108
|
+
--xz-font-size-700 (1.5rem / 24px)
|
|
109
|
+
--xz-font-size-800 (1.625rem / 26px)
|
|
110
|
+
--xz-font-size-900 (2rem / 32px)
|
|
111
|
+
--xz-font-size-1000 (2.375rem / 38px)
|
|
112
|
+
--xz-font-size-1100 (2.5rem / 40px)
|
|
113
|
+
--xz-font-size-1200 (2.6875rem / 43px)
|
|
114
|
+
--xz-font-size-1300 (3rem / 48px)
|
|
115
|
+
--xz-font-size-1400 (3.5rem / 56px)
|
|
116
|
+
--xz-font-size-1500 (4rem / 64px)
|
|
117
|
+
--xz-font-size-1600 (4.5rem / 72px)
|
|
118
|
+
|
|
119
|
+
--xz-font-family-primary (system-ui sans-serif stack)
|
|
120
|
+
--xz-font-family-secondary ("Fastwork" + "Noto Sans Thai" + system fallbacks)
|
|
121
|
+
|
|
122
|
+
--xz-line-height-100pct (1)
|
|
123
|
+
--xz-line-height-125pct (1.25)
|
|
124
|
+
--xz-line-height-135pct (1.35)
|
|
125
|
+
--xz-line-height-150pct (1.5)
|
|
126
|
+
--xz-line-height-165pct (1.65)
|
|
127
|
+
--xz-line-height-200pct (2)
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
**Font shorthand tokens** (responsive — desktop sizes, scales down on mobile <=768px):
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
--xz-font-heading1 through --xz-font-heading6 (secondary font, bold)
|
|
134
|
+
--xz-font-title1 through --xz-font-title4 (primary font, bold)
|
|
135
|
+
--xz-font-subtitle1-bold, --xz-font-subtitle1-regular
|
|
136
|
+
--xz-font-subtitle2-bold, --xz-font-subtitle2-regular
|
|
137
|
+
--xz-font-subtitle3-bold, --xz-font-subtitle3-regular
|
|
138
|
+
--xz-font-body1 through --xz-font-body4 (primary font, regular)
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Usage: `font: var(--xz-font-heading1);`
|
|
142
|
+
|
|
143
|
+
### Box Shadows
|
|
144
|
+
|
|
145
|
+
```
|
|
146
|
+
--xz-box-shadow-100 (subtle: 0 1px 2px)
|
|
147
|
+
--xz-box-shadow-200 (small: 0 2px 6px)
|
|
148
|
+
--xz-box-shadow-300 (medium: 0 4px 16px)
|
|
149
|
+
--xz-box-shadow-400 (large: 0 8px 20px)
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## JavaScript/TypeScript API
|
|
153
|
+
|
|
154
|
+
### Theme objects
|
|
155
|
+
|
|
156
|
+
```typescript
|
|
157
|
+
import { lightTheme, darkTheme, themes, getTheme, getThemeNames } from '@fastwork/xosmoz-theme';
|
|
158
|
+
|
|
159
|
+
// Access theme colors
|
|
160
|
+
lightTheme.colors.primary.bg[100] // 'oklch(0.58 .2524 260)'
|
|
161
|
+
lightTheme.colors.primary.fg[50] // 'oklch(1 0 0)' — white text for solid bg
|
|
162
|
+
lightTheme.colors.fg[100] // primary text color
|
|
163
|
+
lightTheme.colors.fastwork[700] // raw palette value
|
|
164
|
+
|
|
165
|
+
// Get theme by name
|
|
166
|
+
const theme = getTheme('dark');
|
|
167
|
+
|
|
168
|
+
// List available themes
|
|
169
|
+
const names = getThemeNames(); // ['light', 'dark']
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Design tokens
|
|
173
|
+
|
|
174
|
+
```typescript
|
|
175
|
+
import { fontSize, fontWeight, fontFamily, lineHeight, font, boxShadows } from '@fastwork/xosmoz-theme/tokens';
|
|
176
|
+
|
|
177
|
+
fontSize[400] // '1rem'
|
|
178
|
+
fontWeight[700] // 700
|
|
179
|
+
fontFamily.primary // system sans-serif stack
|
|
180
|
+
fontFamily.secondary // "Fastwork" + fallbacks
|
|
181
|
+
font.heading1 // { fontFamily, fontSize: { desktop, mobile }, fontWeight, lineHeight }
|
|
182
|
+
boxShadows[300] // '0 4px 16px 0 rgba(0, 0, 0, 0.12)'
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Types
|
|
186
|
+
|
|
187
|
+
```typescript
|
|
188
|
+
import type { ThemeConfig, ThemeName, ColorToken, TypographyToken } from '@fastwork/xosmoz-theme';
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Common Patterns
|
|
192
|
+
|
|
193
|
+
### Primary button
|
|
194
|
+
|
|
195
|
+
```css
|
|
196
|
+
.button-primary {
|
|
197
|
+
background: var(--xz-color-primary-bg-100);
|
|
198
|
+
color: var(--xz-color-primary-fg-50); /* white text on solid bg */
|
|
199
|
+
font: var(--xz-font-subtitle1-bold);
|
|
200
|
+
border: none;
|
|
201
|
+
border-radius: 0.5rem;
|
|
202
|
+
}
|
|
203
|
+
.button-primary:hover {
|
|
204
|
+
background: var(--xz-color-primary-bg-200);
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Secondary/outline button
|
|
209
|
+
|
|
210
|
+
```css
|
|
211
|
+
.button-secondary {
|
|
212
|
+
background: transparent;
|
|
213
|
+
color: var(--xz-color-primary-fg-100);
|
|
214
|
+
border: 1px solid var(--xz-color-line-100);
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Card
|
|
219
|
+
|
|
220
|
+
```css
|
|
221
|
+
.card {
|
|
222
|
+
background: var(--xz-color-bg-200);
|
|
223
|
+
color: var(--xz-color-fg-100);
|
|
224
|
+
border: 1px solid var(--xz-color-line-100);
|
|
225
|
+
border-radius: 0.75rem;
|
|
226
|
+
box-shadow: var(--xz-box-shadow-200);
|
|
227
|
+
}
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### Alert / status badge
|
|
231
|
+
|
|
232
|
+
```css
|
|
233
|
+
.alert-success {
|
|
234
|
+
background: var(--xz-color-success-soft-100);
|
|
235
|
+
color: var(--xz-color-success-fg-100);
|
|
236
|
+
border: 1px solid var(--xz-color-success-line-100);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.badge-danger {
|
|
240
|
+
background: var(--xz-color-danger-bg-100);
|
|
241
|
+
color: var(--xz-color-danger-fg-50); /* white text on solid bg */
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### Form input
|
|
246
|
+
|
|
247
|
+
```css
|
|
248
|
+
.input {
|
|
249
|
+
background: var(--xz-color-bg-100);
|
|
250
|
+
color: var(--xz-color-fg-100);
|
|
251
|
+
border: 1px solid var(--xz-color-line-200);
|
|
252
|
+
font: var(--xz-font-body1);
|
|
253
|
+
}
|
|
254
|
+
.input:focus {
|
|
255
|
+
border-color: var(--xz-color-primary-line-200);
|
|
256
|
+
box-shadow: 0 0 0 3px var(--xz-color-primary-soft-100);
|
|
257
|
+
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### Muted/secondary text
|
|
261
|
+
|
|
262
|
+
```css
|
|
263
|
+
.text-muted {
|
|
264
|
+
color: var(--xz-color-fg-200);
|
|
265
|
+
}
|
|
266
|
+
.text-disabled {
|
|
267
|
+
color: var(--xz-color-fg-300);
|
|
268
|
+
}
|
|
269
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fastwork/xosmoz-theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.41",
|
|
4
4
|
"description": "Xosmoz Theme - Design tokens and theming system for Xosmoz",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -20,10 +20,12 @@
|
|
|
20
20
|
"./base.css": "./dist/base.css",
|
|
21
21
|
"./themes.css": "./dist/themes.css",
|
|
22
22
|
"./themes/light.css": "./dist/themes/light.css",
|
|
23
|
-
"./themes/dark.css": "./dist/themes/dark.css"
|
|
23
|
+
"./themes/dark.css": "./dist/themes/dark.css",
|
|
24
|
+
"./llms.txt": "./llms.txt"
|
|
24
25
|
},
|
|
25
26
|
"files": [
|
|
26
|
-
"dist"
|
|
27
|
+
"dist",
|
|
28
|
+
"llms.txt"
|
|
27
29
|
],
|
|
28
30
|
"scripts": {
|
|
29
31
|
"build": "yarn build:ts && yarn build:fonts && yarn build:css && yarn build:themes",
|