@vetc-miniapp/ui-react 0.0.22 → 0.0.24

package/src/ui-react/tokens/colors.ts

@@ -0,0 +1,91 @@
+/**
+ * VETC Design System — Color Tokens
+ * Resolved from tokens_vetc.json
+ */
+
+// ─── Global palette ───────────────────────────────────────────────────────────
+export const colorGlobal = {
+  white: '#ffffff',
+  black: '#000000',
+
+  // Blue
+  blue02: '#f4fbff', blue05: '#e4f4ff', blue10: '#cae9ff',
+  blue15: '#afddff', blue20: '#95d1ff', blue25: '#7ac4fb',
+  blue30: '#60b6f4', blue35: '#45a8eb', blue40: '#2b99df',
+  blue45: '#108ad1', blue50: '#007ac1', blue60: '#005c9e',
+  blue70: '#004179', blue80: '#002853', blue90: '#00122a',
+
+  // Green (Brand)
+  green02: '#f2fef2', green05: '#dffbdf', green10: '#bff4bf',
+  green15: '#9feca7', green20: '#82e194', green25: '#68d583',
+  green30: '#50c775', green35: '#39b669', green40: '#25a45e',
+  green45: '#23965b', green50: '#208758', green60: '#1b6b4d',
+  green70: '#15503f', green80: '#0f342d', green90: '#081a18',
+
+  // Gray
+  gray02: '#f9fafa', gray05: '#f1f1f2', gray10: '#e3e4e6',
+  gray15: '#d4d6d9', gray20: '#c6c8cc', gray25: '#b8babf',
+  gray30: '#abacb2', gray35: '#9d9ea5', gray40: '#8f9098',
+  gray45: '#82828a', gray50: '#74747d', gray60: '#5e5d64',
+  gray70: '#47464b', gray80: '#2f2f32', gray90: '#181719',
+
+  // Red
+  red02: '#fff6f9', red05: '#ffe7f0', red10: '#ffd0de',
+  red15: '#ffb8cc', red20: '#ffa1b8', red25: '#ff89a3',
+  red30: '#fb718d', red35: '#f55c78', red40: '#ee4b62',
+  red45: '#e53b4d', red50: '#da2c39', red60: '#b4211f',
+  red70: '#852419', red80: '#571f12', red90: '#2b130a',
+
+  // Orange
+  orange02: '#fffbf0', orange05: '#fff3da', orange10: '#ffe3b4',
+  orange15: '#ffd08f', orange20: '#ffbb69', orange25: '#ffa447',
+  orange30: '#ff8c2f', orange35: '#ef7720', orange40: '#dd6e1d',
+  orange45: '#cb651b', orange50: '#b85c18', orange60: '#934913',
+  orange70: '#6f370f', orange80: '#4a250a', orange90: '#251205',
+
+  // Yellow
+  yellow02: '#fff8e7', yellow05: '#ffefbc', yellow10: '#ffe374',
+  yellow15: '#ffd62b', yellow20: '#f9c600', yellow25: '#e9b900',
+  yellow30: '#daaa00', yellow35: '#ca9b00', yellow40: '#bb8b00',
+  yellow45: '#ab7b00', yellow50: '#9c6b00', yellow60: '#7c4b00',
+  yellow70: '#5d2f00', yellow80: '#3e1800', yellow90: '#1f0700',
+} as const;
+
+// ─── Semantic alias tokens ─────────────────────────────────────────────────────
+export const colorAlias = {
+  brand:                  colorGlobal.green40,    // #25a45e
+  brandDark:              colorGlobal.green50,    // #208758
+  brandLight:             colorGlobal.green05,    // #dffbdf
+
+  positive:               colorGlobal.green50,    // #208758
+  positiveVariant:        colorGlobal.green05,    // #dffbdf
+  onPositive:             colorGlobal.white,
+  onPositiveVariant:      colorGlobal.green60,
+
+  negative:               colorGlobal.red50,      // #da2c39
+  onNegative:             colorGlobal.white,
+
+  warning:                colorGlobal.orange30,   // #ff8c2f
+  onWarning:              colorGlobal.white,
+
+  outline:                colorGlobal.gray50,     // #74747d
+  outlineVariant:         colorGlobal.gray10,     // #e3e4e6
+  outlineInverse:         colorGlobal.gray40,
+
+  theme:                  colorGlobal.white,
+  themeVariant:           colorGlobal.gray05,     // #f1f1f2
+  inverseTheme:           colorGlobal.gray90,
+
+  primaryOnTheme:         colorGlobal.gray90,     // #181719
+  secondaryOnTheme:       colorGlobal.gray60,     // #5e5d64
+  primaryOnInverseTheme:  colorGlobal.white,
+  secondaryOnInverseTheme:colorGlobal.gray20,
+
+  disabledBackground:     colorGlobal.gray10,     // #e3e4e6
+  disabledContent:        colorGlobal.gray30,     // #abacb2
+  disabledOutline:        colorGlobal.gray20,
+
+  overlay:                'rgba(0, 0, 0, 0.4)',
+  overlayVariant:         'rgba(0, 0, 0, 0.16)',
+  skeleton:               'rgba(0, 0, 0, 0.1)',
+} as const;

package/src/ui-react/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './typography';
+export * from './spacing';

package/src/ui-react/tokens/spacing.ts

@@ -0,0 +1,59 @@
+/**
+ * VETC Design System — Spacing & Sizing Tokens
+ * Base unit: 4px
+ */
+export const spacing = {
+  0:  '0px',
+  1:  '1px',
+  2:  '2px',
+  4:  '4px',
+  6:  '6px',
+  8:  '8px',
+  10: '10px',
+  12: '12px',
+  14: '14px',
+  16: '16px',
+  20: '20px',
+  24: '24px',
+  32: '32px',
+  40: '40px',
+  48: '48px',
+  56: '56px',
+  64: '64px',
+  72: '72px',
+  80: '80px',
+} as const;
+
+export const borderRadius = {
+  none:  '0px',
+  xs:    '4px',
+  sm:    '6px',
+  md:    '8px',
+  lg:    '12px',
+  xl:    '16px',
+  '2xl': '24px',
+  pill:  '1000px',
+} as const;
+
+/** Component height standards from Figma */
+export const componentHeight = {
+  buttonLg:    '48px',
+  buttonSm:    '32px',
+  input:       '48px',
+  navBar:      '56px',
+  bottomNav:   '56px',
+  tabBar:      '56px',
+  listItem:    '56px',
+  chip:        '32px',
+  chipSm:      '24px',
+  iconStd:     '24px',
+  iconSm:      '20px',
+} as const;
+
+/** Shadow tokens */
+export const shadow = {
+  none:  'none',
+  sm:    '0 1px 4px rgba(0, 0, 0, 0.08)',
+  md:    '0 2px 8px rgba(0, 0, 0, 0.12)',
+  lg:    '0 4px 16px rgba(0, 0, 0, 0.16)',
+} as const;

package/src/ui-react/tokens/typography.ts

@@ -0,0 +1,63 @@
+/**
+ * VETC Design System — Typography Tokens
+ * From Figma: Tasco DLS Mini App — Typography page
+ * Font weights: Regular=400, Medium=500, SemiBold=600, Bold=700
+ * Font sizes: 2XS=10 / XS=12 / SM=14 / Base=16 / LG=20 / XL=24 / 2XL=28 / 3XL=32 / 4XL=36
+ */
+
+export const fontFamily = {
+  primary: '"Roboto", system-ui, -apple-system, sans-serif',
+} as const;
+
+export const fontWeight = {
+  regular:  400,
+  medium:   500,
+  semibold: 600,
+  bold:     700,
+  black:    900,
+} as const;
+
+/** Font sizes from Figma Typography scale */
+export const fontSize = {
+  '2xs': '10px',  // 2X-Small
+  xs:    '12px',  // X-Small
+  sm:    '14px',  // Small
+  base:  '16px',  // Base
+  lg:    '20px',  // Large
+  xl:    '24px',  // X-Large
+  '2xl': '28px',  // 2X-Large
+  '3xl': '32px',  // 3X-Large
+  '4xl': '36px',  // 4X-Large
+} as const;
+
+/** Line heights from Figma (pixel ratios per size) */
+export const lineHeight = {
+  tight:   '120%',  // display: 36→44 ≈ 122%
+  normal:  '140%',  // heading: 20→28 = 140%
+  relaxed: '150%',  // body/label: 16→24 = 150%
+} as const;
+
+export const letterSpacing = {
+  none: '0',
+  sm:   '0.1px',
+  md:   '0.25px',
+  lg:   '0.5px',
+} as const;
+
+/** Typography style presets — Figma: Display=bold(700), Headline/Title/Label=semibold(600), Body=regular(400) */
+export const textStyle = {
+  display4xl:  { fontSize: fontSize['4xl'], fontWeight: fontWeight.bold,     lineHeight: lineHeight.tight },
+  display3xl:  { fontSize: fontSize['3xl'], fontWeight: fontWeight.bold,     lineHeight: lineHeight.tight },
+  display2xl:  { fontSize: fontSize['2xl'], fontWeight: fontWeight.bold,     lineHeight: lineHeight.tight },
+  headlineXl:  { fontSize: fontSize.xl,     fontWeight: fontWeight.bold,     lineHeight: lineHeight.normal },
+  headlineLg:  { fontSize: fontSize.lg,     fontWeight: fontWeight.semibold, lineHeight: lineHeight.normal },
+  titleBase:   { fontSize: fontSize.base,   fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+  titleSm:     { fontSize: fontSize.sm,     fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+  labelBase:   { fontSize: fontSize.base,   fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed },
+  labelSm:     { fontSize: fontSize.sm,     fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+  labelXs:     { fontSize: fontSize.xs,     fontWeight: fontWeight.semibold, lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+  bodyBase:    { fontSize: fontSize.base,   fontWeight: fontWeight.regular,  lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.sm },
+  bodySm:      { fontSize: fontSize.sm,     fontWeight: fontWeight.regular,  lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.md },
+  bodyXs:      { fontSize: fontSize.xs,     fontWeight: fontWeight.regular,  lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+  body2xs:     { fontSize: fontSize['2xs'], fontWeight: fontWeight.regular,  lineHeight: lineHeight.relaxed, letterSpacing: letterSpacing.lg },
+} as const;