@serenis/design-tokens 0.21.0

package/dist/cssvar/line-height.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_LINE_HEIGHT_PREFIX = 'line-height'
+
+export const cssvarNameLineHeight = (lineHeight) =>
+  cssvarName(`${DESIGN_TOKENS_LINE_HEIGHT_PREFIX}-${lineHeight}`)
+
+export const cssvarValueLineHeight = (lineHeight) =>
+  cssvarValue(`${DESIGN_TOKENS_LINE_HEIGHT_PREFIX}-${lineHeight}`)
+
+export const cssvarLineHeight = (lineHeight) =>
+  cssvar(`${DESIGN_TOKENS_LINE_HEIGHT_PREFIX}-${lineHeight}`)

package/dist/cssvar/media-query.d.ts

@@ -0,0 +1,11 @@
+import { type MediaQueryName } from '../types/media-query.js'
+
+export declare const DESIGN_TOKENS_MEDIA_QUERY_PREFIX: 'media-query'
+
+export declare const cssvarNameMediaQuery: (mediaQuery: MediaQueryName) =>
+  `--srns-media-query-${MediaQueryName}`
+
+export declare const cssvarValueMediaQuery: (mediaQuery: MediaQueryName) => string
+
+export declare const cssvarMediaQuery: (mediaQuery: MediaQueryName) =>
+  `var(--srns-media-query-${MediaQueryName})`

package/dist/cssvar/media-query.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_MEDIA_QUERY_PREFIX = 'media-query'
+
+export const cssvarNameMediaQuery = (mediaQuery) =>
+  cssvarName(`${DESIGN_TOKENS_MEDIA_QUERY_PREFIX}-${mediaQuery}`)
+
+export const cssvarValueMediaQuery = (mediaQuery) =>
+  cssvarValue(`${DESIGN_TOKENS_MEDIA_QUERY_PREFIX}-${mediaQuery}`)
+
+export const cssvarMediaQuery = (mediaQuery) =>
+  cssvar(`${DESIGN_TOKENS_MEDIA_QUERY_PREFIX}-${mediaQuery}`)

package/dist/cssvar/opacity.d.ts

@@ -0,0 +1,11 @@
+import { type OpacityName } from '../types/opacity.js'
+
+export declare const DESIGN_TOKENS_OPACITY_PREFIX: 'opacity'
+
+export declare const cssvarNameOpacity: (opacity: OpacityName) =>
+  `--srns-opacity-${OpacityName}`
+
+export declare const cssvarValueOpacity: (opacity: OpacityName) => string
+
+export declare const cssvarOpacity: (opacity: OpacityName) =>
+  `var(--srns-opacity-${OpacityName})`

package/dist/cssvar/opacity.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_OPACITY_PREFIX = 'opacity'
+
+export const cssvarNameOpacity = (opacity) =>
+  cssvarName(`${DESIGN_TOKENS_OPACITY_PREFIX}-${opacity}`)
+
+export const cssvarValueOpacity = (opacity) =>
+  cssvarValue(`${DESIGN_TOKENS_OPACITY_PREFIX}-${opacity}`)
+
+export const cssvarOpacity = (opacity) =>
+  cssvar(`${DESIGN_TOKENS_OPACITY_PREFIX}-${opacity}`)

package/dist/cssvar/spacing.d.ts

@@ -0,0 +1,11 @@
+import { type SpacingName } from '../types/spacing.js'
+
+export declare const DESIGN_TOKENS_SPACING_PREFIX: 'spacing'
+
+export declare const cssvarNameSpacing: (spacing: SpacingName) =>
+  `--srns-spacing-${SpacingName}`
+
+export declare const cssvarValueSpacing: (spacing: SpacingName) => string
+
+export declare const cssvarSpacing: (spacing: SpacingName) =>
+  `var(--srns-spacing-${SpacingName})`

package/dist/cssvar/spacing.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_SPACING_PREFIX = 'spacing'
+
+export const cssvarNameSpacing = (spacing) =>
+  cssvarName(`${DESIGN_TOKENS_SPACING_PREFIX}-${spacing}`)
+
+export const cssvarValueSpacing = (spacing) =>
+  cssvarValue(`${DESIGN_TOKENS_SPACING_PREFIX}-${spacing}`)
+
+export const cssvarSpacing = (spacing) =>
+  cssvar(`${DESIGN_TOKENS_SPACING_PREFIX}-${spacing}`)

package/dist/cssvar/time.d.ts

@@ -0,0 +1,11 @@
+import { type TimeName } from '../types/time.js'
+
+export declare const DESIGN_TOKENS_TIME_PREFIX: 'time'
+
+export declare const cssvarNameTime: (time: TimeName) =>
+  `--srns-time-${TimeName}`
+
+export declare const cssvarValueTime: (time: TimeName) => string
+
+export declare const cssvarTime: (time: TimeName) =>
+  `var(--srns-time-${TimeName})`

package/dist/cssvar/time.js

@@ -0,0 +1,12 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_TIME_PREFIX = 'time'
+
+export const cssvarNameTime = (time) =>
+  cssvarName(`${DESIGN_TOKENS_TIME_PREFIX}-${time}`)
+
+export const cssvarValueTime = (time) =>
+  cssvarValue(`${DESIGN_TOKENS_TIME_PREFIX}-${time}`)
+
+export const cssvarTime = (time) =>
+  cssvar(`${DESIGN_TOKENS_TIME_PREFIX}-${time}`)

package/dist/cssvar/typography.d.ts

@@ -0,0 +1,30 @@
+import { type TypographyName } from '../types/typography.js'
+
+export declare const DESIGN_TOKENS_TYPOGRAPHY_PREFIX: 'typography'
+
+export declare const DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES: readonly [
+  'font-family',
+  'font-weight',
+  'line-height',
+  'font-size',
+  'letter-spacing',
+]
+
+type TypographyProp = (typeof DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES)[number]
+
+export declare const cssvarNameTypographyProp: (
+  typography: TypographyName,
+  prop: TypographyProp,
+) => `--srns-typography-${TypographyName}-${TypographyProp}`
+
+export declare const cssvarValueTypographyProp: (
+  typography: TypographyName,
+  prop: TypographyProp,
+) => string
+
+export declare const cssvarTypographyProp: (
+  typography: TypographyName,
+  prop: TypographyProp,
+) => `var(--srns-typography-${TypographyName}-${TypographyProp})`
+
+export declare const cssvarTypography: (typography: TypographyName) => string[]

package/dist/cssvar/typography.js

@@ -0,0 +1,23 @@
+import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
+
+export const DESIGN_TOKENS_TYPOGRAPHY_PREFIX = 'typography'
+
+export const DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES = [
+  'font-family',
+  'font-weight',
+  'line-height',
+  'font-size',
+  'letter-spacing',
+]
+
+export const cssvarNameTypographyProp = (typography, prop) =>
+  cssvarName(`${DESIGN_TOKENS_TYPOGRAPHY_PREFIX}-${typography}-${prop}`)
+
+export const cssvarValueTypographyProp = (typography, prop) =>
+  cssvarValue(`${DESIGN_TOKENS_TYPOGRAPHY_PREFIX}-${typography}-${prop}`)
+
+export const cssvarTypographyProp = (typography, prop) =>
+  cssvar(`${DESIGN_TOKENS_TYPOGRAPHY_PREFIX}-${typography}-${prop}`)
+
+export const cssvarTypography = (typography) =>
+  DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES.map((prop) => `${prop}: ${cssvarTypographyProp(typography, prop)};`)