npm - @duro-app/tokens - Versions diffs - 0.22.0 → 0.23.0 - Mend

@duro-app/tokens 0.22.0 → 0.23.0

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.

Files changed (6) hide show

package/dist/index.js +1 -0
package/dist/index.js.map +1 -1
package/dist/tokens/spacing.css.d.ts +1 -0
package/dist/tokens/spacing.css.d.ts.map +1 -1
package/package.json +1 -1
package/src/tokens/spacing.css.ts +1 -0

package/dist/index.js CHANGED Viewed

@@ -38,6 +38,7 @@ const e = {
   xxxl: "var(--xxxl-xroalp5)",
   __varGroupHash__: "x6uc9q"
 }, n = {
+  xs: "var(--xs-x1gb5bcy)",
   sm: "var(--sm-x1bhtfs5)",
   md: "var(--md-xx2g89g)",
   lg: "var(--lg-xwd56yl)",

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n // Backgrounds\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n\n // Text\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n\n // Accent\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n\n // Border\n border: '#333333',\n\n // Semantic — Error\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.1)',\n errorBorder: 'rgba(248, 113, 113, 0.3)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n\n // Semantic — Success\n success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n\n // Semantic — Warning\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n\n // Semantic — Info (uses accent)\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\nexport const radii = css.defineVars({\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n // Vertical rhythm (stack gaps)\n stackXs: '4px',\n stackSm: '8px',\n stackMd: '16px',\n stackLg: '24px',\n stackXl: '48px',\n\n // Horizontal rhythm (inline gaps)\n inlineXs: '4px',\n inlineSm: '8px',\n inlineMd: '16px',\n inlineLg: '24px',\n\n // Container insets\n containerSm: '16px',\n containerMd: '24px',\n containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n fontSizeXs: '0.75rem',\n fontSizeSm: '0.875rem',\n fontSizeMd: '1rem',\n fontSizeLg: '1.125rem',\n fontSizeXl: '1.25rem',\n fontSizeHeading: '1.5rem',\n fontWeightNormal: '400',\n fontWeightMedium: '500',\n fontWeightSemibold: '600',\n fontWeightBold: '700',\n lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n // 9-step font size scale\n fontSize1: '0.75rem', // 12px — captions, badges\n fontSize2: '0.8125rem', // 13px — small UI\n fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n fontSize4: '1rem', // 16px — body text\n fontSize5: '1.125rem', // 18px — body-lg\n fontSize6: '1.25rem', // 20px — subheading\n fontSize7: '1.5rem', // 24px — heading-sm\n fontSize8: '1.875rem', // 30px — heading-md\n fontSize9: '2.25rem', // 36px — heading-lg\n\n // Matched line-heights\n lineHeight1: '1rem', // 16px\n lineHeight2: '1.25rem', // 20px\n lineHeight3: '1.25rem', // 20px\n lineHeight4: '1.5rem', // 24px\n lineHeight5: '1.5rem', // 24px\n lineHeight6: '1.75rem', // 28px\n lineHeight7: '2rem', // 32px\n lineHeight8: '2.25rem', // 36px\n lineHeight9: '2.75rem', // 44px\n\n // Fluid display sizes\n displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n // Letter-spacing\n letterSpacingTight: '-0.02em',\n letterSpacingNormal: '0',\n letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n // Body\n bodySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize4,\n lineHeight: typeScale.lineHeight4,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize5,\n lineHeight: typeScale.lineHeight5,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n\n // UI\n caption: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingWide,\n },\n label: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightMedium,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n code: {\n fontFamily: typography.fontFamilyMono,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n overline: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingWide,\n textTransform: 'uppercase' as const,\n },\n\n // Heading\n headingSm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize6,\n lineHeight: typeScale.lineHeight6,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize7,\n lineHeight: typeScale.lineHeight7,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize8,\n lineHeight: typeScale.lineHeight8,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingXl: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize9,\n lineHeight: typeScale.lineHeight9,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n\n // Display (fluid)\n displaySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displaySm,\n lineHeight: 1.2,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayMd,\n lineHeight: 1.15,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayLg,\n lineHeight: 1.1,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n bg: '#ffffff',\n bgCard: '#f5f5f5',\n bgCardHover: '#ebebeb',\n text: '#1a1a1a',\n textMuted: '#4a4a4a',\n accent: '#1e40af',\n accentHover: '#1a3799',\n accentContrast: '#ffffff',\n border: '#d4d4d4',\n error: '#991b1b',\n errorHover: '#7f1d1d',\n errorBg: 'rgba(153, 27, 27, 0.08)',\n errorBorder: 'rgba(153, 27, 27, 0.3)',\n errorText: '#7f1d1d',\n errorContrast: '#ffffff',\n success: '#166534',\n successBg: 'rgba(22, 101, 52, 0.08)',\n successBorder: 'rgba(22, 101, 52, 0.3)',\n successText: '#14532d',\n warning: '#92400e',\n warningBg: 'rgba(146, 64, 14, 0.08)',\n warningBorder: 'rgba(146, 64, 14, 0.3)',\n warningText: '#78350f',\n info: '#1e40af',\n infoBg: 'rgba(30, 64, 175, 0.08)',\n infoBorder: 'rgba(30, 64, 175, 0.3)',\n infoText: '#1e40af',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n bg: '#000000',\n bgCard: '#111111',\n bgCardHover: '#1a1a1a',\n text: '#ffffff',\n textMuted: '#b0b0b0',\n accent: '#60a5fa',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#555555',\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.15)',\n errorBorder: 'rgba(248, 113, 113, 0.5)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n success: '#4ade80',\n successBg: 'rgba(74, 222, 128, 0.15)',\n successBorder: 'rgba(74, 222, 128, 0.5)',\n successText: '#86efac',\n warning: '#fcd34d',\n warningBg: 'rgba(252, 211, 77, 0.15)',\n warningBorder: 'rgba(252, 211, 77, 0.5)',\n warningText: '#fef08a',\n info: '#60a5fa',\n infoBg: 'rgba(96, 165, 250, 0.15)',\n infoBorder: 'rgba(96, 165, 250, 0.5)',\n infoText: '#bfdbfe',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["colors","spacing","radii","layoutSpacing","typography","typeScale","typePresets","shadows","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n // Backgrounds\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n\n // Text\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n\n // Accent\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n\n // Border\n border: '#333333',\n\n // Semantic — Error\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.1)',\n errorBorder: 'rgba(248, 113, 113, 0.3)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n\n // Semantic — Success\n success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n\n // Semantic — Warning\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n\n // Semantic — Info (uses accent)\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\nexport const radii = css.defineVars({\n xs: '4px',\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n // Vertical rhythm (stack gaps)\n stackXs: '4px',\n stackSm: '8px',\n stackMd: '16px',\n stackLg: '24px',\n stackXl: '48px',\n\n // Horizontal rhythm (inline gaps)\n inlineXs: '4px',\n inlineSm: '8px',\n inlineMd: '16px',\n inlineLg: '24px',\n\n // Container insets\n containerSm: '16px',\n containerMd: '24px',\n containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n fontSizeXs: '0.75rem',\n fontSizeSm: '0.875rem',\n fontSizeMd: '1rem',\n fontSizeLg: '1.125rem',\n fontSizeXl: '1.25rem',\n fontSizeHeading: '1.5rem',\n fontWeightNormal: '400',\n fontWeightMedium: '500',\n fontWeightSemibold: '600',\n fontWeightBold: '700',\n lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n // 9-step font size scale\n fontSize1: '0.75rem', // 12px — captions, badges\n fontSize2: '0.8125rem', // 13px — small UI\n fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n fontSize4: '1rem', // 16px — body text\n fontSize5: '1.125rem', // 18px — body-lg\n fontSize6: '1.25rem', // 20px — subheading\n fontSize7: '1.5rem', // 24px — heading-sm\n fontSize8: '1.875rem', // 30px — heading-md\n fontSize9: '2.25rem', // 36px — heading-lg\n\n // Matched line-heights\n lineHeight1: '1rem', // 16px\n lineHeight2: '1.25rem', // 20px\n lineHeight3: '1.25rem', // 20px\n lineHeight4: '1.5rem', // 24px\n lineHeight5: '1.5rem', // 24px\n lineHeight6: '1.75rem', // 28px\n lineHeight7: '2rem', // 32px\n lineHeight8: '2.25rem', // 36px\n lineHeight9: '2.75rem', // 44px\n\n // Fluid display sizes\n displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n // Letter-spacing\n letterSpacingTight: '-0.02em',\n letterSpacingNormal: '0',\n letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n // Body\n bodySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize4,\n lineHeight: typeScale.lineHeight4,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize5,\n lineHeight: typeScale.lineHeight5,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n\n // UI\n caption: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingWide,\n },\n label: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightMedium,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n code: {\n fontFamily: typography.fontFamilyMono,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n overline: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingWide,\n textTransform: 'uppercase' as const,\n },\n\n // Heading\n headingSm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize6,\n lineHeight: typeScale.lineHeight6,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize7,\n lineHeight: typeScale.lineHeight7,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize8,\n lineHeight: typeScale.lineHeight8,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingXl: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize9,\n lineHeight: typeScale.lineHeight9,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n\n // Display (fluid)\n displaySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displaySm,\n lineHeight: 1.2,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayMd,\n lineHeight: 1.15,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayLg,\n lineHeight: 1.1,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n bg: '#ffffff',\n bgCard: '#f5f5f5',\n bgCardHover: '#ebebeb',\n text: '#1a1a1a',\n textMuted: '#4a4a4a',\n accent: '#1e40af',\n accentHover: '#1a3799',\n accentContrast: '#ffffff',\n border: '#d4d4d4',\n error: '#991b1b',\n errorHover: '#7f1d1d',\n errorBg: 'rgba(153, 27, 27, 0.08)',\n errorBorder: 'rgba(153, 27, 27, 0.3)',\n errorText: '#7f1d1d',\n errorContrast: '#ffffff',\n success: '#166534',\n successBg: 'rgba(22, 101, 52, 0.08)',\n successBorder: 'rgba(22, 101, 52, 0.3)',\n successText: '#14532d',\n warning: '#92400e',\n warningBg: 'rgba(146, 64, 14, 0.08)',\n warningBorder: 'rgba(146, 64, 14, 0.3)',\n warningText: '#78350f',\n info: '#1e40af',\n infoBg: 'rgba(30, 64, 175, 0.08)',\n infoBorder: 'rgba(30, 64, 175, 0.3)',\n infoText: '#1e40af',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n bg: '#000000',\n bgCard: '#111111',\n bgCardHover: '#1a1a1a',\n text: '#ffffff',\n textMuted: '#b0b0b0',\n accent: '#60a5fa',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#555555',\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.15)',\n errorBorder: 'rgba(248, 113, 113, 0.5)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n success: '#4ade80',\n successBg: 'rgba(74, 222, 128, 0.15)',\n successBorder: 'rgba(74, 222, 128, 0.5)',\n successText: '#86efac',\n warning: '#fcd34d',\n warningBg: 'rgba(252, 211, 77, 0.15)',\n warningBorder: 'rgba(252, 211, 77, 0.5)',\n warningText: '#fef08a',\n info: '#60a5fa',\n infoBg: 'rgba(96, 165, 250, 0.15)',\n infoBorder: 'rgba(96, 165, 250, 0.5)',\n infoText: '#bfdbfe',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["colors","spacing","radii","layoutSpacing","typography","typeScale","typePresets","shadows","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"AAEO,MAAMA,IAAS;AAAA,EACpB,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,kBAAkB;AACpB,GC7BaC,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,MAAM;AAAA,EACN,kBAAkB;AACpB,GACaC,IAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,kBAAkB;AACpB,GClBaC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AACpB,GCdaC,IAAa;AAAA,EACxB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,kBAAkB;AACpB,GACaC,IAAY;AAAA,EACvB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,kBAAkB;AACpB,GCzCaC,IAAc;AAAA,EACzB,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,SAAS;AAAA,IACP,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,OAAO;AAAA,EAAA;AAEX,GCnHaC,IAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,kBAAkB;AACpB,GCHaC,IAAa;AAAA,EACxB,SAAS;AAAA,EACT,OAAO;AACT,GACaC,IAAe;AAAA,EAC1B,UAAU;AAAA,EACV,OAAO;AACT,GCPaC,IAAoB;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AACT,GACaC,IAAsB;AAAA,EACjC,UAAU;AAAA,EACV,OAAO;AACT;"}

package/dist/tokens/spacing.css.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export declare const spacing: css.VarGroup<Readonly<{
     xxxl: string;
 }>, symbol>;
 export declare const radii: css.VarGroup<Readonly<{
+    xs: string;
     sm: string;
     md: string;
     lg: string;

package/dist/tokens/spacing.css.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spacing.css.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;;;;;;WASlB,CAAA;AAEF,eAAO,MAAM,KAAK~~;;;;;WAKhB~~,CAAA"}
1	+ {"version":3,"file":"spacing.css.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;;;;;;WASlB,CAAA;AAEF,eAAO,MAAM,KAAK;;;;;;WAMhB,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/tokens/spacing.css.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export const spacing = css.defineVars({
 })
 export const radii = css.defineVars({
+  xs: '4px',
   sm: '8px',
   md: '12px',
   lg: '16px',