@serenis/design-tokens 0.21.0

package/dist/constants/typography.js

@@ -0,0 +1,319 @@
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_PUBLIC_H0_FONT_FAMILY = 'var(--srns-typography-public-h0-font-family)'
+export const TYPOGRAPHY_PUBLIC_H0_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_PUBLIC_H0_FONT_WEIGHT = 'var(--srns-typography-public-h0-font-weight)'
+export const TYPOGRAPHY_PUBLIC_H0_FONT_WEIGHT_VALUE = '600'
+
+/** `56px` */
+export const TYPOGRAPHY_PUBLIC_H0_LINE_HEIGHT = 'var(--srns-typography-public-h0-line-height)'
+export const TYPOGRAPHY_PUBLIC_H0_LINE_HEIGHT_VALUE = '56px'
+
+/** `56px` */
+export const TYPOGRAPHY_PUBLIC_H0_FONT_SIZE = 'var(--srns-typography-public-h0-font-size)'
+export const TYPOGRAPHY_PUBLIC_H0_FONT_SIZE_VALUE = '56px'
+
+/** `1.12px` */
+export const TYPOGRAPHY_PUBLIC_H0_LETTER_SPACING = 'var(--srns-typography-public-h0-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_H0_LETTER_SPACING_VALUE = '1.12px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_PUBLIC_H1_FONT_FAMILY = 'var(--srns-typography-public-h1-font-family)'
+export const TYPOGRAPHY_PUBLIC_H1_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_PUBLIC_H1_FONT_WEIGHT = 'var(--srns-typography-public-h1-font-weight)'
+export const TYPOGRAPHY_PUBLIC_H1_FONT_WEIGHT_VALUE = '600'
+
+/** `32px` */
+export const TYPOGRAPHY_PUBLIC_H1_LINE_HEIGHT = 'var(--srns-typography-public-h1-line-height)'
+export const TYPOGRAPHY_PUBLIC_H1_LINE_HEIGHT_VALUE = '32px'
+
+/** `32px` */
+export const TYPOGRAPHY_PUBLIC_H1_FONT_SIZE = 'var(--srns-typography-public-h1-font-size)'
+export const TYPOGRAPHY_PUBLIC_H1_FONT_SIZE_VALUE = '32px'
+
+/** `0.64px` */
+export const TYPOGRAPHY_PUBLIC_H1_LETTER_SPACING = 'var(--srns-typography-public-h1-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_H1_LETTER_SPACING_VALUE = '0.64px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_PUBLIC_H2_FONT_FAMILY = 'var(--srns-typography-public-h2-font-family)'
+export const TYPOGRAPHY_PUBLIC_H2_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_PUBLIC_H2_FONT_WEIGHT = 'var(--srns-typography-public-h2-font-weight)'
+export const TYPOGRAPHY_PUBLIC_H2_FONT_WEIGHT_VALUE = '600'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_H2_LINE_HEIGHT = 'var(--srns-typography-public-h2-line-height)'
+export const TYPOGRAPHY_PUBLIC_H2_LINE_HEIGHT_VALUE = '24px'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_H2_FONT_SIZE = 'var(--srns-typography-public-h2-font-size)'
+export const TYPOGRAPHY_PUBLIC_H2_FONT_SIZE_VALUE = '24px'
+
+/** `0.48px` */
+export const TYPOGRAPHY_PUBLIC_H2_LETTER_SPACING = 'var(--srns-typography-public-h2-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_H2_LETTER_SPACING_VALUE = '0.48px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_PUBLIC_H3_FONT_FAMILY = 'var(--srns-typography-public-h3-font-family)'
+export const TYPOGRAPHY_PUBLIC_H3_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `400` */
+export const TYPOGRAPHY_PUBLIC_H3_FONT_WEIGHT = 'var(--srns-typography-public-h3-font-weight)'
+export const TYPOGRAPHY_PUBLIC_H3_FONT_WEIGHT_VALUE = '400'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_H3_LINE_HEIGHT = 'var(--srns-typography-public-h3-line-height)'
+export const TYPOGRAPHY_PUBLIC_H3_LINE_HEIGHT_VALUE = '24px'
+
+/** `20px` */
+export const TYPOGRAPHY_PUBLIC_H3_FONT_SIZE = 'var(--srns-typography-public-h3-font-size)'
+export const TYPOGRAPHY_PUBLIC_H3_FONT_SIZE_VALUE = '20px'
+
+/** `0.4px` */
+export const TYPOGRAPHY_PUBLIC_H3_LETTER_SPACING = 'var(--srns-typography-public-h3-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_H3_LETTER_SPACING_VALUE = '0.4px'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_FAMILY = 'var(--srns-typography-public-paragraph-font-family)'
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `400` */
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_WEIGHT = 'var(--srns-typography-public-paragraph-font-weight)'
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_WEIGHT_VALUE = '400'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT = 'var(--srns-typography-public-paragraph-line-height)'
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT_VALUE = '24px'
+
+/** `16px` */
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_SIZE = 'var(--srns-typography-public-paragraph-font-size)'
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_FONT_SIZE_VALUE = '16px'
+
+/** `0` */
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_LETTER_SPACING = 'var(--srns-typography-public-paragraph-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_PARAGRAPH_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_FAMILY = 'var(--srns-typography-public-caption-font-family)'
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `400` */
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_WEIGHT = 'var(--srns-typography-public-caption-font-weight)'
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_WEIGHT_VALUE = '400'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_CAPTION_LINE_HEIGHT = 'var(--srns-typography-public-caption-line-height)'
+export const TYPOGRAPHY_PUBLIC_CAPTION_LINE_HEIGHT_VALUE = '24px'
+
+/** `14px` */
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_SIZE = 'var(--srns-typography-public-caption-font-size)'
+export const TYPOGRAPHY_PUBLIC_CAPTION_FONT_SIZE_VALUE = '14px'
+
+/** `0` */
+export const TYPOGRAPHY_PUBLIC_CAPTION_LETTER_SPACING = 'var(--srns-typography-public-caption-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_CAPTION_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_FAMILY = 'var(--srns-typography-public-footnote-font-family)'
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `500` */
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_WEIGHT = 'var(--srns-typography-public-footnote-font-weight)'
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_WEIGHT_VALUE = '500'
+
+/** `24px` */
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_LINE_HEIGHT = 'var(--srns-typography-public-footnote-line-height)'
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_LINE_HEIGHT_VALUE = '24px'
+
+/** `12px` */
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_SIZE = 'var(--srns-typography-public-footnote-font-size)'
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_FONT_SIZE_VALUE = '12px'
+
+/** `0` */
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_LETTER_SPACING = 'var(--srns-typography-public-footnote-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_FOOTNOTE_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_FAMILY = 'var(--srns-typography-public-micro-font-family)'
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `500` */
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_WEIGHT = 'var(--srns-typography-public-micro-font-weight)'
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_WEIGHT_VALUE = '500'
+
+/** `16px` */
+export const TYPOGRAPHY_PUBLIC_MICRO_LINE_HEIGHT = 'var(--srns-typography-public-micro-line-height)'
+export const TYPOGRAPHY_PUBLIC_MICRO_LINE_HEIGHT_VALUE = '16px'
+
+/** `12px` */
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_SIZE = 'var(--srns-typography-public-micro-font-size)'
+export const TYPOGRAPHY_PUBLIC_MICRO_FONT_SIZE_VALUE = '12px'
+
+/** `0` */
+export const TYPOGRAPHY_PUBLIC_MICRO_LETTER_SPACING = 'var(--srns-typography-public-micro-letter-spacing)'
+export const TYPOGRAPHY_PUBLIC_MICRO_LETTER_SPACING_VALUE = '0'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_H0_FONT_FAMILY = 'var(--srns-typography-h0-font-family)'
+export const TYPOGRAPHY_H0_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_H0_FONT_WEIGHT = 'var(--srns-typography-h0-font-weight)'
+export const TYPOGRAPHY_H0_FONT_WEIGHT_VALUE = '600'
+
+/** `56px` */
+export const TYPOGRAPHY_H0_LINE_HEIGHT = 'var(--srns-typography-h0-line-height)'
+export const TYPOGRAPHY_H0_LINE_HEIGHT_VALUE = '56px'
+
+/** `56px` */
+export const TYPOGRAPHY_H0_FONT_SIZE = 'var(--srns-typography-h0-font-size)'
+export const TYPOGRAPHY_H0_FONT_SIZE_VALUE = '56px'
+
+/** `1.12px` */
+export const TYPOGRAPHY_H0_LETTER_SPACING = 'var(--srns-typography-h0-letter-spacing)'
+export const TYPOGRAPHY_H0_LETTER_SPACING_VALUE = '1.12px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_H1_FONT_FAMILY = 'var(--srns-typography-h1-font-family)'
+export const TYPOGRAPHY_H1_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_H1_FONT_WEIGHT = 'var(--srns-typography-h1-font-weight)'
+export const TYPOGRAPHY_H1_FONT_WEIGHT_VALUE = '600'
+
+/** `32px` */
+export const TYPOGRAPHY_H1_LINE_HEIGHT = 'var(--srns-typography-h1-line-height)'
+export const TYPOGRAPHY_H1_LINE_HEIGHT_VALUE = '32px'
+
+/** `32px` */
+export const TYPOGRAPHY_H1_FONT_SIZE = 'var(--srns-typography-h1-font-size)'
+export const TYPOGRAPHY_H1_FONT_SIZE_VALUE = '32px'
+
+/** `0.64px` */
+export const TYPOGRAPHY_H1_LETTER_SPACING = 'var(--srns-typography-h1-letter-spacing)'
+export const TYPOGRAPHY_H1_LETTER_SPACING_VALUE = '0.64px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_H2_FONT_FAMILY = 'var(--srns-typography-h2-font-family)'
+export const TYPOGRAPHY_H2_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_H2_FONT_WEIGHT = 'var(--srns-typography-h2-font-weight)'
+export const TYPOGRAPHY_H2_FONT_WEIGHT_VALUE = '600'
+
+/** `24px` */
+export const TYPOGRAPHY_H2_LINE_HEIGHT = 'var(--srns-typography-h2-line-height)'
+export const TYPOGRAPHY_H2_LINE_HEIGHT_VALUE = '24px'
+
+/** `24px` */
+export const TYPOGRAPHY_H2_FONT_SIZE = 'var(--srns-typography-h2-font-size)'
+export const TYPOGRAPHY_H2_FONT_SIZE_VALUE = '24px'
+
+/** `0.48px` */
+export const TYPOGRAPHY_H2_LETTER_SPACING = 'var(--srns-typography-h2-letter-spacing)'
+export const TYPOGRAPHY_H2_LETTER_SPACING_VALUE = '0.48px'
+
+/** `Degular Display, degular-display, serif` */
+export const TYPOGRAPHY_H3_FONT_FAMILY = 'var(--srns-typography-h3-font-family)'
+export const TYPOGRAPHY_H3_FONT_FAMILY_VALUE = 'Degular Display, degular-display, serif'
+
+/** `600` */
+export const TYPOGRAPHY_H3_FONT_WEIGHT = 'var(--srns-typography-h3-font-weight)'
+export const TYPOGRAPHY_H3_FONT_WEIGHT_VALUE = '600'
+
+/** `24px` */
+export const TYPOGRAPHY_H3_LINE_HEIGHT = 'var(--srns-typography-h3-line-height)'
+export const TYPOGRAPHY_H3_LINE_HEIGHT_VALUE = '24px'
+
+/** `20px` */
+export const TYPOGRAPHY_H3_FONT_SIZE = 'var(--srns-typography-h3-font-size)'
+export const TYPOGRAPHY_H3_FONT_SIZE_VALUE = '20px'
+
+/** `0.4px` */
+export const TYPOGRAPHY_H3_LETTER_SPACING = 'var(--srns-typography-h3-letter-spacing)'
+export const TYPOGRAPHY_H3_LETTER_SPACING_VALUE = '0.4px'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_PARAGRAPH_FONT_FAMILY = 'var(--srns-typography-paragraph-font-family)'
+export const TYPOGRAPHY_PARAGRAPH_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `400` */
+export const TYPOGRAPHY_PARAGRAPH_FONT_WEIGHT = 'var(--srns-typography-paragraph-font-weight)'
+export const TYPOGRAPHY_PARAGRAPH_FONT_WEIGHT_VALUE = '400'
+
+/** `24px` */
+export const TYPOGRAPHY_PARAGRAPH_LINE_HEIGHT = 'var(--srns-typography-paragraph-line-height)'
+export const TYPOGRAPHY_PARAGRAPH_LINE_HEIGHT_VALUE = '24px'
+
+/** `16px` */
+export const TYPOGRAPHY_PARAGRAPH_FONT_SIZE = 'var(--srns-typography-paragraph-font-size)'
+export const TYPOGRAPHY_PARAGRAPH_FONT_SIZE_VALUE = '16px'
+
+/** `0` */
+export const TYPOGRAPHY_PARAGRAPH_LETTER_SPACING = 'var(--srns-typography-paragraph-letter-spacing)'
+export const TYPOGRAPHY_PARAGRAPH_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_CAPTION_FONT_FAMILY = 'var(--srns-typography-caption-font-family)'
+export const TYPOGRAPHY_CAPTION_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `400` */
+export const TYPOGRAPHY_CAPTION_FONT_WEIGHT = 'var(--srns-typography-caption-font-weight)'
+export const TYPOGRAPHY_CAPTION_FONT_WEIGHT_VALUE = '400'
+
+/** `24px` */
+export const TYPOGRAPHY_CAPTION_LINE_HEIGHT = 'var(--srns-typography-caption-line-height)'
+export const TYPOGRAPHY_CAPTION_LINE_HEIGHT_VALUE = '24px'
+
+/** `14px` */
+export const TYPOGRAPHY_CAPTION_FONT_SIZE = 'var(--srns-typography-caption-font-size)'
+export const TYPOGRAPHY_CAPTION_FONT_SIZE_VALUE = '14px'
+
+/** `0` */
+export const TYPOGRAPHY_CAPTION_LETTER_SPACING = 'var(--srns-typography-caption-letter-spacing)'
+export const TYPOGRAPHY_CAPTION_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_FOOTNOTE_FONT_FAMILY = 'var(--srns-typography-footnote-font-family)'
+export const TYPOGRAPHY_FOOTNOTE_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `500` */
+export const TYPOGRAPHY_FOOTNOTE_FONT_WEIGHT = 'var(--srns-typography-footnote-font-weight)'
+export const TYPOGRAPHY_FOOTNOTE_FONT_WEIGHT_VALUE = '500'
+
+/** `16px` */
+export const TYPOGRAPHY_FOOTNOTE_LINE_HEIGHT = 'var(--srns-typography-footnote-line-height)'
+export const TYPOGRAPHY_FOOTNOTE_LINE_HEIGHT_VALUE = '16px'
+
+/** `12px` */
+export const TYPOGRAPHY_FOOTNOTE_FONT_SIZE = 'var(--srns-typography-footnote-font-size)'
+export const TYPOGRAPHY_FOOTNOTE_FONT_SIZE_VALUE = '12px'
+
+/** `0` */
+export const TYPOGRAPHY_FOOTNOTE_LETTER_SPACING = 'var(--srns-typography-footnote-letter-spacing)'
+export const TYPOGRAPHY_FOOTNOTE_LETTER_SPACING_VALUE = '0'
+
+/** `Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif` */
+export const TYPOGRAPHY_MICRO_FONT_FAMILY = 'var(--srns-typography-micro-font-family)'
+export const TYPOGRAPHY_MICRO_FONT_FAMILY_VALUE = 'Mona Sans, MonaSans, mona-sans, Mona Sans Fallback, mona-sans-fallback, Arial, system-ui, sans-serif'
+
+/** `500` */
+export const TYPOGRAPHY_MICRO_FONT_WEIGHT = 'var(--srns-typography-micro-font-weight)'
+export const TYPOGRAPHY_MICRO_FONT_WEIGHT_VALUE = '500'
+
+/** `14px` */
+export const TYPOGRAPHY_MICRO_LINE_HEIGHT = 'var(--srns-typography-micro-line-height)'
+export const TYPOGRAPHY_MICRO_LINE_HEIGHT_VALUE = '14px'
+
+/** `10px` */
+export const TYPOGRAPHY_MICRO_FONT_SIZE = 'var(--srns-typography-micro-font-size)'
+export const TYPOGRAPHY_MICRO_FONT_SIZE_VALUE = '10px'
+
+/** `0` */
+export const TYPOGRAPHY_MICRO_LETTER_SPACING = 'var(--srns-typography-micro-letter-spacing)'
+export const TYPOGRAPHY_MICRO_LETTER_SPACING_VALUE = '0'

package/dist/css-base.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/css-serenis-dark.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/css-serenis-light.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/cssvar/border-radius.d.ts

@@ -0,0 +1,11 @@
+import { type BorderRadiusName } from '../types/border-radius.js'
+
+export declare const DESIGN_TOKENS_BORDER_RADIUS_PREFIX: 'border-radius'
+
+export declare const cssvarNameBorderRadius: (borderRadius: BorderRadiusName) =>
+  `--srns-border-radius-${BorderRadiusName}`
+
+export declare const cssvarValueBorderRadius: (borderRadius: BorderRadiusName) => string
+
+export declare const cssvarBorderRadius: (borderRadius: BorderRadiusName) =>
+  `var(--srns-border-radius-${BorderRadiusName})`

package/dist/cssvar/border-radius.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_BORDER_RADIUS_PREFIX = 'border-radius'
+
+export const cssvarNameBorderRadius = (borderRadius) =>
+  cssvarName(`${DESIGN_TOKENS_BORDER_RADIUS_PREFIX}-${borderRadius}`)
+
+export const cssvarValueBorderRadius = (borderRadius) =>
+  cssvarValue(`${DESIGN_TOKENS_BORDER_RADIUS_PREFIX}-${borderRadius}`)
+
+export const cssvarBorderRadius = (borderRadius) =>
+  cssvar(`${DESIGN_TOKENS_BORDER_RADIUS_PREFIX}-${borderRadius}`)

package/dist/cssvar/border-width.d.ts

@@ -0,0 +1,11 @@
+import { type BorderWidthName } from '../types/border-width.js'
+
+export declare const DESIGN_TOKENS_BORDER_WIDTH_PREFIX: 'border-width'
+
+export declare const cssvarNameBorderWidth: (borderWidth: BorderWidthName) =>
+  `--srns-border-width-${BorderWidthName}`
+
+export declare const cssvarValueBorderWidth: (borderWidth: BorderWidthName) => string
+
+export declare const cssvarBorderWidth: (borderWidth: BorderWidthName) =>
+  `var(--srns-border-width-${BorderWidthName})`

package/dist/cssvar/border-width.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_BORDER_WIDTH_PREFIX = 'border-width'
+
+export const cssvarNameBorderWidth = (borderWidth) =>
+  cssvarName(`${DESIGN_TOKENS_BORDER_WIDTH_PREFIX}-${borderWidth}`)
+
+export const cssvarValueBorderWidth = (borderWidth) =>
+  cssvarValue(`${DESIGN_TOKENS_BORDER_WIDTH_PREFIX}-${borderWidth}`)
+
+export const cssvarBorderWidth = (borderWidth) =>
+  cssvar(`${DESIGN_TOKENS_BORDER_WIDTH_PREFIX}-${borderWidth}`)

package/dist/cssvar/breakpoint.d.ts

@@ -0,0 +1,11 @@
+import { type BreakpointName } from '../types/breakpoint.js'
+
+export declare const DESIGN_TOKENS_BREAKPOINT_PREFIX: 'breakpoint'
+
+export declare const cssvarNameBreakpoint: (breakpoint: BreakpointName) =>
+  `--srns-breakpoint-${BreakpointName}`
+
+export declare const cssvarValueBreakpoint: (breakpoint: BreakpointName) => string
+
+export declare const cssvarBreakpoint: (breakpoint: BreakpointName) =>
+  `var(--srns-breakpoint-${BreakpointName})`

package/dist/cssvar/breakpoint.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_BREAKPOINT_PREFIX = 'breakpoint'
+
+export const cssvarNameBreakpoint = (breakpoint) =>
+  cssvarName(`${DESIGN_TOKENS_BREAKPOINT_PREFIX}-${breakpoint}`)
+
+export const cssvarValueBreakpoint = (breakpoint) =>
+  cssvarValue(`${DESIGN_TOKENS_BREAKPOINT_PREFIX}-${breakpoint}`)
+
+export const cssvarBreakpoint = (breakpoint) =>
+  cssvar(`${DESIGN_TOKENS_BREAKPOINT_PREFIX}-${breakpoint}`)

package/dist/cssvar/color.d.ts

@@ -0,0 +1,11 @@
+import { type ColorName } from '../types/color.js'
+
+export declare const DESIGN_TOKENS_COLOR_PREFIX: 'color'
+
+export declare const cssvarNameColor: (color: ColorName) =>
+  `--srns-color-${ColorName}`
+
+export declare const cssvarValueColor: (color: ColorName) => string
+
+export declare const cssvarColor: (color: ColorName) =>
+  `var(--srns-color-${ColorName})`

package/dist/cssvar/color.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_COLOR_PREFIX = 'color'
+
+export const cssvarNameColor = (color) =>
+  cssvarName(`${DESIGN_TOKENS_COLOR_PREFIX}-${color}`)
+
+export const cssvarValueColor = (color) =>
+  cssvarValue(`${DESIGN_TOKENS_COLOR_PREFIX}-${color}`)
+
+export const cssvarColor = (color) =>
+  cssvar(`${DESIGN_TOKENS_COLOR_PREFIX}-${color}`)

package/dist/cssvar/container.d.ts

@@ -0,0 +1,11 @@
+import { type ContainerName } from '../types/container.js'
+
+export declare const DESIGN_TOKENS_CONTAINER_PREFIX: 'container'
+
+export declare const cssvarNameContainer: (container: ContainerName) =>
+  `--srns-container-${ContainerName}`
+
+export declare const cssvarValueContainer: (container: ContainerName) => string
+
+export declare const cssvarContainer: (container: ContainerName) =>
+  `var(--srns-container-${ContainerName})`

package/dist/cssvar/container.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_CONTAINER_PREFIX = 'container'
+
+export const cssvarNameContainer = (container) =>
+  cssvarName(`${DESIGN_TOKENS_CONTAINER_PREFIX}-${container}`)
+
+export const cssvarValueContainer = (container) =>
+  cssvarValue(`${DESIGN_TOKENS_CONTAINER_PREFIX}-${container}`)
+
+export const cssvarContainer = (container) =>
+  cssvar(`${DESIGN_TOKENS_CONTAINER_PREFIX}-${container}`)

package/dist/cssvar/elevation.d.ts

@@ -0,0 +1,11 @@
+import { type ElevationName } from '../types/elevation.js'
+
+export declare const DESIGN_TOKENS_ELEVATION_PREFIX: 'elevation'
+
+export declare const cssvarNameElevation: (elevation: ElevationName) =>
+  `--srns-elevation-${ElevationName}`
+
+export declare const cssvarValueElevation: (elevation: ElevationName) => string
+
+export declare const cssvarElevation: (elevation: ElevationName) =>
+  `var(--srns-elevation-${ElevationName})`

package/dist/cssvar/elevation.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_ELEVATION_PREFIX = 'elevation'
+
+export const cssvarNameElevation = (elevation) =>
+  cssvarName(`${DESIGN_TOKENS_ELEVATION_PREFIX}-${elevation}`)
+
+export const cssvarValueElevation = (elevation) =>
+  cssvarValue(`${DESIGN_TOKENS_ELEVATION_PREFIX}-${elevation}`)
+
+export const cssvarElevation = (elevation) =>
+  cssvar(`${DESIGN_TOKENS_ELEVATION_PREFIX}-${elevation}`)

package/dist/cssvar/font-family.d.ts

@@ -0,0 +1,11 @@
+import { type FontFamilyName } from '../types/font-family.js'
+
+export declare const DESIGN_TOKENS_FONT_FAMILY_PREFIX: 'font-family'
+
+export declare const cssvarNameFontFamily: (fontFamily: FontFamilyName) =>
+  `--srns-font-family-${FontFamilyName}`
+
+export declare const cssvarValueFontFamily: (fontFamily: FontFamilyName) => string
+
+export declare const cssvarFontFamily: (fontFamily: FontFamilyName) =>
+  `var(--srns-font-family-${FontFamilyName})`

package/dist/cssvar/font-family.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_FONT_FAMILY_PREFIX = 'font-family'
+
+export const cssvarNameFontFamily = (fontFamily) =>
+  cssvarName(`${DESIGN_TOKENS_FONT_FAMILY_PREFIX}-${fontFamily}`)
+
+export const cssvarValueFontFamily = (fontFamily) =>
+  cssvarValue(`${DESIGN_TOKENS_FONT_FAMILY_PREFIX}-${fontFamily}`)
+
+export const cssvarFontFamily = (fontFamily) =>
+  cssvar(`${DESIGN_TOKENS_FONT_FAMILY_PREFIX}-${fontFamily}`)

package/dist/cssvar/font-size.d.ts

@@ -0,0 +1,11 @@
+import { type FontSizeName } from '../types/font-size.js'
+
+export declare const DESIGN_TOKENS_FONT_SIZE_PREFIX: 'font-size'
+
+export declare const cssvarNameFontSize: (fontSize: FontSizeName) =>
+  `--srns-font-size-${FontSizeName}`
+
+export declare const cssvarValueFontSize: (fontSize: FontSizeName) => string
+
+export declare const cssvarFontSize: (fontSize: FontSizeName) =>
+  `var(--srns-font-size-${FontSizeName})`

package/dist/cssvar/font-size.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_FONT_SIZE_PREFIX = 'font-size'
+
+export const cssvarNameFontSize = (fontSize) =>
+  cssvarName(`${DESIGN_TOKENS_FONT_SIZE_PREFIX}-${fontSize}`)
+
+export const cssvarValueFontSize = (fontSize) =>
+  cssvarValue(`${DESIGN_TOKENS_FONT_SIZE_PREFIX}-${fontSize}`)
+
+export const cssvarFontSize = (fontSize) =>
+  cssvar(`${DESIGN_TOKENS_FONT_SIZE_PREFIX}-${fontSize}`)

package/dist/cssvar/font-weight.d.ts

@@ -0,0 +1,11 @@
+import { type FontWeightName } from '../types/font-weight.js'
+
+export declare const DESIGN_TOKENS_FONT_WEIGHT_PREFIX: 'font-weight'
+
+export declare const cssvarNameFontWeight: (fontWeight: FontWeightName) =>
+  `--srns-font-weight-${FontWeightName}`
+
+export declare const cssvarValueFontWeight: (fontWeight: FontWeightName) => string
+
+export declare const cssvarFontWeight: (fontWeight: FontWeightName) =>
+  `var(--srns-font-weight-${FontWeightName})`

package/dist/cssvar/font-weight.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_FONT_WEIGHT_PREFIX = 'font-weight'
+
+export const cssvarNameFontWeight = (fontWeight) =>
+  cssvarName(`${DESIGN_TOKENS_FONT_WEIGHT_PREFIX}-${fontWeight}`)
+
+export const cssvarValueFontWeight = (fontWeight) =>
+  cssvarValue(`${DESIGN_TOKENS_FONT_WEIGHT_PREFIX}-${fontWeight}`)
+
+export const cssvarFontWeight = (fontWeight) =>
+  cssvar(`${DESIGN_TOKENS_FONT_WEIGHT_PREFIX}-${fontWeight}`)

package/dist/cssvar/index.d.ts

@@ -0,0 +1,16 @@
+export * from './border-radius.js'
+export * from './border-width.js'
+export * from './breakpoint.js'
+export * from './container.js'
+export * from './font-size.js'
+export * from './letter-spacing.js'
+export * from './line-height.js'
+export * from './spacing.js'
+export * from './time.js'
+export * from './font-family.js'
+export * from './font-weight.js'
+export * from './opacity.js'
+export * from './media-query.js'
+export * from './elevation.js'
+export * from './typography.js'
+export * from './color.js'

package/dist/cssvar/index.js

@@ -0,0 +1,16 @@
+export * from './border-radius.js'
+export * from './border-width.js'
+export * from './breakpoint.js'
+export * from './container.js'
+export * from './font-size.js'
+export * from './letter-spacing.js'
+export * from './line-height.js'
+export * from './spacing.js'
+export * from './time.js'
+export * from './font-family.js'
+export * from './font-weight.js'
+export * from './opacity.js'
+export * from './media-query.js'
+export * from './elevation.js'
+export * from './typography.js'
+export * from './color.js'

package/dist/cssvar/letter-spacing.d.ts

@@ -0,0 +1,11 @@
+import { type LetterSpacingName } from '../types/letter-spacing.js'
+
+export declare const DESIGN_TOKENS_LETTER_SPACING_PREFIX: 'letter-spacing'
+
+export declare const cssvarNameLetterSpacing: (letterSpacing: LetterSpacingName) =>
+  `--srns-letter-spacing-${LetterSpacingName}`
+
+export declare const cssvarValueLetterSpacing: (letterSpacing: LetterSpacingName) => string
+
+export declare const cssvarLetterSpacing: (letterSpacing: LetterSpacingName) =>
+  `var(--srns-letter-spacing-${LetterSpacingName})`

package/dist/cssvar/letter-spacing.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_LETTER_SPACING_PREFIX = 'letter-spacing'
+
+export const cssvarNameLetterSpacing = (letterSpacing) =>
+  cssvarName(`${DESIGN_TOKENS_LETTER_SPACING_PREFIX}-${letterSpacing}`)
+
+export const cssvarValueLetterSpacing = (letterSpacing) =>
+  cssvarValue(`${DESIGN_TOKENS_LETTER_SPACING_PREFIX}-${letterSpacing}`)
+
+export const cssvarLetterSpacing = (letterSpacing) =>
+  cssvar(`${DESIGN_TOKENS_LETTER_SPACING_PREFIX}-${letterSpacing}`)

package/dist/cssvar/line-height.d.ts

@@ -0,0 +1,11 @@
+import { type LineHeightName } from '../types/line-height.js'
+
+export declare const DESIGN_TOKENS_LINE_HEIGHT_PREFIX: 'line-height'
+
+export declare const cssvarNameLineHeight: (lineHeight: LineHeightName) =>
+  `--srns-line-height-${LineHeightName}`
+
+export declare const cssvarValueLineHeight: (lineHeight: LineHeightName) => string
+
+export declare const cssvarLineHeight: (lineHeight: LineHeightName) =>
+  `var(--srns-line-height-${LineHeightName})`