diff --git a/lib/index.d.ts b/lib/index.d.ts new file mode 100644 index 0000000..ac3529f --- /dev/null +++ b/lib/index.d.ts @@ -0,0 +1,4 @@ +export * from './tokens' +export * from './token-utils' +export * from './style-templates' +export * from './style-properties' diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..ac3529f --- /dev/null +++ b/lib/index.js @@ -0,0 +1,4 @@ +export * from './tokens' +export * from './token-utils' +export * from './style-templates' +export * from './style-properties' diff --git a/lib/style-properties.d.ts b/lib/style-properties.d.ts new file mode 100644 index 0000000..48c933e --- /dev/null +++ b/lib/style-properties.d.ts @@ -0,0 +1,229 @@ +import { CSSResult } from 'lit' + +export const FdsSize1: CSSResult +export const FdsSize2: CSSResult +export const FdsSize3: CSSResult +export const FdsSize4: CSSResult +export const FdsSize6: CSSResult +export const FdsSize8: CSSResult +export const FdsSize12: CSSResult +export const FdsSize16: CSSResult +export const FdsSize24: CSSResult +export const FdsSize32: CSSResult +export const FdsRadiusCompact: CSSResult +export const FdsRadiusNormal: CSSResult +export const FdsRadiusLarge: CSSResult +export const FdsRadiusRounded: CSSResult +export const FdsStyleElevation100: CSSResult +export const FdsStyleElevation200: CSSResult +export const FdsStyleElevation300: CSSResult +export const FdsStyleElevation400: CSSResult +export const FdsTypographyBodyDefaultFontFamily: CSSResult +export const FdsTypographyBodyDefaultFontSize: CSSResult +export const FdsTypographyBodyDefaultLetterSpacing: CSSResult +export const FdsTypographyBodyDefaultLineHeight: CSSResult +export const FdsTypographyBodyDefaultFontWeight: CSSResult +export const FdsTypographyBodyDefaultDisplay: CSSResult +export const FdsTypographyBodyLargeFontFamily: CSSResult +export const FdsTypographyBodyLargeFontSize: CSSResult +export const FdsTypographyBodyLargeLetterSpacing: CSSResult +export const FdsTypographyBodyLargeLineHeight: CSSResult +export const FdsTypographyBodyLargeFontWeight: CSSResult +export const FdsTypographyBodyLargeDisplay: CSSResult +export const FdsTypographyBodyMicroFontFamily: CSSResult +export const FdsTypographyBodyMicroFontSize: CSSResult +export const FdsTypographyBodyMicroLetterSpacing: CSSResult +export const FdsTypographyBodyMicroLineHeight: CSSResult +export const FdsTypographyBodyMicroFontWeight: CSSResult +export const FdsTypographyBodyMicroDisplay: CSSResult +export const FdsTypographyBodySmallFontFamily: CSSResult +export const FdsTypographyBodySmallFontSize: CSSResult +export const FdsTypographyBodySmallLetterSpacing: CSSResult +export const FdsTypographyBodySmallLineHeight: CSSResult +export const FdsTypographyBodySmallFontWeight: CSSResult +export const FdsTypographyBodySmallDisplay: CSSResult +export const FdsTypographyEmphasisDefaultFontFamily: CSSResult +export const FdsTypographyEmphasisDefaultFontSize: CSSResult +export const FdsTypographyEmphasisDefaultLetterSpacing: CSSResult +export const FdsTypographyEmphasisDefaultLineHeight: CSSResult +export const FdsTypographyEmphasisDefaultFontWeight: CSSResult +export const FdsTypographyEmphasisDefaultDisplay: CSSResult +export const FdsTypographyEmphasisLargeFontFamily: CSSResult +export const FdsTypographyEmphasisLargeFontSize: CSSResult +export const FdsTypographyEmphasisLargeLetterSpacing: CSSResult +export const FdsTypographyEmphasisLargeLineHeight: CSSResult +export const FdsTypographyEmphasisLargeFontWeight: CSSResult +export const FdsTypographyEmphasisLargeDisplay: CSSResult +export const FdsTypographyEmphasisMicroFontFamily: CSSResult +export const FdsTypographyEmphasisMicroFontSize: CSSResult +export const FdsTypographyEmphasisMicroLetterSpacing: CSSResult +export const FdsTypographyEmphasisMicroLineHeight: CSSResult +export const FdsTypographyEmphasisMicroFontWeight: CSSResult +export const FdsTypographyEmphasisMicroDisplay: CSSResult +export const FdsTypographyEmphasisSmallFontFamily: CSSResult +export const FdsTypographyEmphasisSmallFontSize: CSSResult +export const FdsTypographyEmphasisSmallLetterSpacing: CSSResult +export const FdsTypographyEmphasisSmallLineHeight: CSSResult +export const FdsTypographyEmphasisSmallFontWeight: CSSResult +export const FdsTypographyEmphasisSmallDisplay: CSSResult +export const FdsTypographyHeadingLargeHeading3FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading3FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading3LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading3LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading3FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading3Display: CSSResult +export const FdsTypographyHeadingLargeHeading4FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading4FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading4LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading4LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading4FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading4Display: CSSResult +export const FdsTypographyHeadingLargeHeading5FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading5FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading5LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading5LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading5FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading5Display: CSSResult +export const FdsTypographyHeadingLargeHeading6FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading6FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading6LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading6LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading6FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading6Display: CSSResult +export const FdsTypographyHeadingLargeHeading1FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading1FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading1LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading1LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading1FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading1Display: CSSResult +export const FdsTypographyHeadingLargeHeading2FontFamily: CSSResult +export const FdsTypographyHeadingLargeHeading2FontSize: CSSResult +export const FdsTypographyHeadingLargeHeading2LetterSpacing: CSSResult +export const FdsTypographyHeadingLargeHeading2LineHeight: CSSResult +export const FdsTypographyHeadingLargeHeading2FontWeight: CSSResult +export const FdsTypographyHeadingLargeHeading2Display: CSSResult +export const FdsTypographyHeadingSmallHeading1FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading1FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading1LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading1LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading1FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading1Display: CSSResult +export const FdsTypographyHeadingSmallHeading2FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading2FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading2LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading2LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading2FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading2Display: CSSResult +export const FdsTypographyHeadingSmallHeading3FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading3FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading3LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading3LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading3FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading3Display: CSSResult +export const FdsTypographyHeadingSmallHeading4FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading4FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading4LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading4LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading4FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading4Display: CSSResult +export const FdsTypographyHeadingSmallHeading5FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading5FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading5LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading5LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading5FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading5Display: CSSResult +export const FdsTypographyHeadingSmallHeading6FontFamily: CSSResult +export const FdsTypographyHeadingSmallHeading6FontSize: CSSResult +export const FdsTypographyHeadingSmallHeading6LetterSpacing: CSSResult +export const FdsTypographyHeadingSmallHeading6LineHeight: CSSResult +export const FdsTypographyHeadingSmallHeading6FontWeight: CSSResult +export const FdsTypographyHeadingSmallHeading6Display: CSSResult +export const FdsTypographyLinkLargeFontFamily: CSSResult +export const FdsTypographyLinkLargeFontSize: CSSResult +export const FdsTypographyLinkLargeLetterSpacing: CSSResult +export const FdsTypographyLinkLargeLineHeight: CSSResult +export const FdsTypographyLinkLargeFontWeight: CSSResult +export const FdsTypographyLinkLargeTextDecoration: CSSResult +export const FdsTypographyLinkLargeDisplay: CSSResult +export const FdsTypographyLinkMicroFontFamily: CSSResult +export const FdsTypographyLinkMicroFontSize: CSSResult +export const FdsTypographyLinkMicroLetterSpacing: CSSResult +export const FdsTypographyLinkMicroLineHeight: CSSResult +export const FdsTypographyLinkMicroFontWeight: CSSResult +export const FdsTypographyLinkMicroTextDecoration: CSSResult +export const FdsTypographyLinkMicroDisplay: CSSResult +export const FdsTypographyLinkSmallFontFamily: CSSResult +export const FdsTypographyLinkSmallFontSize: CSSResult +export const FdsTypographyLinkSmallLetterSpacing: CSSResult +export const FdsTypographyLinkSmallLineHeight: CSSResult +export const FdsTypographyLinkSmallFontWeight: CSSResult +export const FdsTypographyLinkSmallTextDecoration: CSSResult +export const FdsTypographyLinkSmallDisplay: CSSResult +export const FdsTypographyLinkDefaultFontFamily: CSSResult +export const FdsTypographyLinkDefaultFontSize: CSSResult +export const FdsTypographyLinkDefaultLetterSpacing: CSSResult +export const FdsTypographyLinkDefaultLineHeight: CSSResult +export const FdsTypographyLinkDefaultFontWeight: CSSResult +export const FdsTypographyLinkDefaultTextDecoration: CSSResult +export const FdsTypographyLinkDefaultDisplay: CSSResult +export const FdsTypographyUiHelperFontFamily: CSSResult +export const FdsTypographyUiHelperFontSize: CSSResult +export const FdsTypographyUiHelperLetterSpacing: CSSResult +export const FdsTypographyUiHelperLineHeight: CSSResult +export const FdsTypographyUiHelperFontWeight: CSSResult +export const FdsTypographyUiHelperDisplay: CSSResult +export const FdsTypographyUiIdFontFamily: CSSResult +export const FdsTypographyUiIdFontSize: CSSResult +export const FdsTypographyUiIdLetterSpacing: CSSResult +export const FdsTypographyUiIdLineHeight: CSSResult +export const FdsTypographyUiIdFontWeight: CSSResult +export const FdsTypographyUiIdDisplay: CSSResult +export const FdsTypographyUiLabelFontFamily: CSSResult +export const FdsTypographyUiLabelFontSize: CSSResult +export const FdsTypographyUiLabelLetterSpacing: CSSResult +export const FdsTypographyUiLabelLineHeight: CSSResult +export const FdsTypographyUiLabelFontWeight: CSSResult +export const FdsTypographyUiLabelDisplay: CSSResult +export const FdsTypographyUiPlaceholderFontFamily: CSSResult +export const FdsTypographyUiPlaceholderFontSize: CSSResult +export const FdsTypographyUiPlaceholderLetterSpacing: CSSResult +export const FdsTypographyUiPlaceholderLineHeight: CSSResult +export const FdsTypographyUiPlaceholderFontWeight: CSSResult +export const FdsTypographyUiPlaceholderDisplay: CSSResult +export const FdsTypographyUiTagFontFamily: CSSResult +export const FdsTypographyUiTagFontSize: CSSResult +export const FdsTypographyUiTagLetterSpacing: CSSResult +export const FdsTypographyUiTagLineHeight: CSSResult +export const FdsTypographyUiTagFontWeight: CSSResult +export const FdsTypographyUiTagDisplay: CSSResult +export const FdsColorBrandBlack: CSSResult +export const FdsColorBrandWhite: CSSResult +export const FdsColorDanger50: CSSResult +export const FdsColorDanger100: CSSResult +export const FdsColorDanger200: CSSResult +export const FdsColorDanger300: CSSResult +export const FdsColorDanger400: CSSResult +export const FdsColorInteractive50: CSSResult +export const FdsColorInteractive100: CSSResult +export const FdsColorInteractive200: CSSResult +export const FdsColorInteractive300: CSSResult +export const FdsColorInteractive400: CSSResult +export const FdsColorNeutral50: CSSResult +export const FdsColorNeutral100: CSSResult +export const FdsColorNeutral200: CSSResult +export const FdsColorNeutral300: CSSResult +export const FdsColorNeutral400: CSSResult +export const FdsColorSuccess50: CSSResult +export const FdsColorSuccess100: CSSResult +export const FdsColorSuccess200: CSSResult +export const FdsColorSuccess300: CSSResult +export const FdsColorSuccess400: CSSResult +export const FdsColorText1: CSSResult +export const FdsColorText300: CSSResult +export const FdsColorText600: CSSResult +export const FdsColorText1000: CSSResult +export const FdsColorWarning50: CSSResult +export const FdsColorWarning100: CSSResult +export const FdsColorWarning200: CSSResult +export const FdsColorWarning300: CSSResult +export const FdsColorWarning400: CSSResult diff --git a/lib/style-properties.js b/lib/style-properties.js new file mode 100644 index 0000000..ce86a54 --- /dev/null +++ b/lib/style-properties.js @@ -0,0 +1,229 @@ +import { unsafeCSS } from 'lit' + +export const FdsSize1 = /*#__PURE__*/ unsafeCSS("var(--fds-size-1, 8px)") +export const FdsSize2 = /*#__PURE__*/ unsafeCSS("var(--fds-size-2, 16px)") +export const FdsSize3 = /*#__PURE__*/ unsafeCSS("var(--fds-size-3, 24px)") +export const FdsSize4 = /*#__PURE__*/ unsafeCSS("var(--fds-size-4, 32px)") +export const FdsSize6 = /*#__PURE__*/ unsafeCSS("var(--fds-size-6, 48px)") +export const FdsSize8 = /*#__PURE__*/ unsafeCSS("var(--fds-size-8, 64px)") +export const FdsSize12 = /*#__PURE__*/ unsafeCSS("var(--fds-size-12, 96px)") +export const FdsSize16 = /*#__PURE__*/ unsafeCSS("var(--fds-size-16, 128px)") +export const FdsSize24 = /*#__PURE__*/ unsafeCSS("var(--fds-size-24, 192px)") +export const FdsSize32 = /*#__PURE__*/ unsafeCSS("var(--fds-size-32, 256px)") +export const FdsRadiusCompact = /*#__PURE__*/ unsafeCSS("var(--fds-radius-compact, 2px)") +export const FdsRadiusNormal = /*#__PURE__*/ unsafeCSS("var(--fds-radius-normal, 4px)") +export const FdsRadiusLarge = /*#__PURE__*/ unsafeCSS("var(--fds-radius-large, 8px)") +export const FdsRadiusRounded = /*#__PURE__*/ unsafeCSS("var(--fds-radius-rounded, 1000px)") +export const FdsStyleElevation100 = /*#__PURE__*/ unsafeCSS("var(--fds-style-elevation-100, 0px 1px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px rgba(0, 0, 0, 0.12))") +export const FdsStyleElevation200 = /*#__PURE__*/ unsafeCSS("var(--fds-style-elevation-200, 0px 6px 6px 0px rgba(0, 0, 0, 0.23), 0px 3px 6px 0px rgba(0, 0, 0, 0.16))") +export const FdsStyleElevation300 = /*#__PURE__*/ unsafeCSS("var(--fds-style-elevation-300, 0px 6px 12px 0px rgba(0, 0, 0, 0.23), 0px 20px 20px 0px rgba(0, 0, 0, 0.19))") +export const FdsStyleElevation400 = /*#__PURE__*/ unsafeCSS("var(--fds-style-elevation-400, 0px 20px 20px 0px rgba(0, 0, 0, 0.22), 0px 50px 100px 0px rgba(0, 0, 0, 0.25))") +export const FdsTypographyBodyDefaultFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-font-family, 'Public Sans')") +export const FdsTypographyBodyDefaultFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-font-size, 16px)") +export const FdsTypographyBodyDefaultLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-letter-spacing, 0px)") +export const FdsTypographyBodyDefaultLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-line-height, 150%)") +export const FdsTypographyBodyDefaultFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-font-weight, 400)") +export const FdsTypographyBodyDefaultDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-default-display, inline-block)") +export const FdsTypographyBodyLargeFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-font-family, 'Public Sans')") +export const FdsTypographyBodyLargeFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-font-size, 18px)") +export const FdsTypographyBodyLargeLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-letter-spacing, 0px)") +export const FdsTypographyBodyLargeLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-line-height, 150%)") +export const FdsTypographyBodyLargeFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-font-weight, 400)") +export const FdsTypographyBodyLargeDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-large-display, inline-block)") +export const FdsTypographyBodyMicroFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-font-family, 'Public Sans')") +export const FdsTypographyBodyMicroFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-font-size, 12px)") +export const FdsTypographyBodyMicroLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-letter-spacing, 0px)") +export const FdsTypographyBodyMicroLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-line-height, 150%)") +export const FdsTypographyBodyMicroFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-font-weight, 400)") +export const FdsTypographyBodyMicroDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-micro-display, inline-block)") +export const FdsTypographyBodySmallFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-font-family, 'Public Sans')") +export const FdsTypographyBodySmallFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-font-size, 14px)") +export const FdsTypographyBodySmallLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-letter-spacing, 0px)") +export const FdsTypographyBodySmallLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-line-height, 150%)") +export const FdsTypographyBodySmallFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-font-weight, 400)") +export const FdsTypographyBodySmallDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-body-small-display, inline-block)") +export const FdsTypographyEmphasisDefaultFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-font-family, 'Public Sans')") +export const FdsTypographyEmphasisDefaultFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-font-size, 16px)") +export const FdsTypographyEmphasisDefaultLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-letter-spacing, 0px)") +export const FdsTypographyEmphasisDefaultLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-line-height, 150%)") +export const FdsTypographyEmphasisDefaultFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-font-weight, 700)") +export const FdsTypographyEmphasisDefaultDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-default-display, inline-block)") +export const FdsTypographyEmphasisLargeFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-font-family, 'Public Sans')") +export const FdsTypographyEmphasisLargeFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-font-size, 18px)") +export const FdsTypographyEmphasisLargeLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-letter-spacing, 0px)") +export const FdsTypographyEmphasisLargeLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-line-height, 150%)") +export const FdsTypographyEmphasisLargeFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-font-weight, 700)") +export const FdsTypographyEmphasisLargeDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-large-display, inline-block)") +export const FdsTypographyEmphasisMicroFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-font-family, 'Public Sans')") +export const FdsTypographyEmphasisMicroFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-font-size, 12px)") +export const FdsTypographyEmphasisMicroLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-letter-spacing, 0px)") +export const FdsTypographyEmphasisMicroLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-line-height, 150%)") +export const FdsTypographyEmphasisMicroFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-font-weight, 700)") +export const FdsTypographyEmphasisMicroDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-micro-display, inline-block)") +export const FdsTypographyEmphasisSmallFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-font-family, 'Public Sans')") +export const FdsTypographyEmphasisSmallFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-font-size, 14px)") +export const FdsTypographyEmphasisSmallLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-letter-spacing, 0px)") +export const FdsTypographyEmphasisSmallLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-line-height, 150%)") +export const FdsTypographyEmphasisSmallFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-font-weight, 700)") +export const FdsTypographyEmphasisSmallDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-emphasis-small-display, inline-block)") +export const FdsTypographyHeadingLargeHeading3FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading3FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-font-size, 40px)") +export const FdsTypographyHeadingLargeHeading3LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading3LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading3FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading3Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-3-display, inline-block)") +export const FdsTypographyHeadingLargeHeading4FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading4FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-font-size, 32px)") +export const FdsTypographyHeadingLargeHeading4LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading4LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading4FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading4Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-4-display, inline-block)") +export const FdsTypographyHeadingLargeHeading5FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading5FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-font-size, 28px)") +export const FdsTypographyHeadingLargeHeading5LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading5LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading5FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading5Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-5-display, inline-block)") +export const FdsTypographyHeadingLargeHeading6FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading6FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-font-size, 20px)") +export const FdsTypographyHeadingLargeHeading6LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading6LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading6FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading6Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-6-display, inline-block)") +export const FdsTypographyHeadingLargeHeading1FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading1FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-font-size, 64px)") +export const FdsTypographyHeadingLargeHeading1LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading1LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading1FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading1Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-1-display, inline-block)") +export const FdsTypographyHeadingLargeHeading2FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingLargeHeading2FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-font-size, 48px)") +export const FdsTypographyHeadingLargeHeading2LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-letter-spacing, 0px)") +export const FdsTypographyHeadingLargeHeading2LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-line-height, 110%)") +export const FdsTypographyHeadingLargeHeading2FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-font-weight, 700)") +export const FdsTypographyHeadingLargeHeading2Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-large-heading-2-display, inline-block)") +export const FdsTypographyHeadingSmallHeading1FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading1FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-font-size, 42px)") +export const FdsTypographyHeadingSmallHeading1LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading1LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading1FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading1Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-1-display, inline-block)") +export const FdsTypographyHeadingSmallHeading2FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading2FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-font-size, 32px)") +export const FdsTypographyHeadingSmallHeading2LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading2LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading2FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading2Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-2-display, inline-block)") +export const FdsTypographyHeadingSmallHeading3FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading3FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-font-size, 28px)") +export const FdsTypographyHeadingSmallHeading3LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading3LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading3FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading3Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-3-display, inline-block)") +export const FdsTypographyHeadingSmallHeading4FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading4FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-font-size, 24px)") +export const FdsTypographyHeadingSmallHeading4LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading4LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading4FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading4Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-4-display, inline-block)") +export const FdsTypographyHeadingSmallHeading5FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading5FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-font-size, 18px)") +export const FdsTypographyHeadingSmallHeading5LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading5LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading5FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading5Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-5-display, inline-block)") +export const FdsTypographyHeadingSmallHeading6FontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyHeadingSmallHeading6FontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-font-size, 16px)") +export const FdsTypographyHeadingSmallHeading6LetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-letter-spacing, 0px)") +export const FdsTypographyHeadingSmallHeading6LineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-line-height, 110%)") +export const FdsTypographyHeadingSmallHeading6FontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-font-weight, 700)") +export const FdsTypographyHeadingSmallHeading6Display = /*#__PURE__*/ unsafeCSS("var(--fds-typography-heading-small-heading-6-display, inline-block)") +export const FdsTypographyLinkLargeFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-font-family, 'Public Sans')") +export const FdsTypographyLinkLargeFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-font-size, 18px)") +export const FdsTypographyLinkLargeLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-letter-spacing, 0px)") +export const FdsTypographyLinkLargeLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-line-height, 150%)") +export const FdsTypographyLinkLargeFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-font-weight, 400)") +export const FdsTypographyLinkLargeTextDecoration = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-text-decoration, underline)") +export const FdsTypographyLinkLargeDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-large-display, inline-block)") +export const FdsTypographyLinkMicroFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-font-family, 'Public Sans')") +export const FdsTypographyLinkMicroFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-font-size, 12px)") +export const FdsTypographyLinkMicroLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-letter-spacing, 0px)") +export const FdsTypographyLinkMicroLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-line-height, 150%)") +export const FdsTypographyLinkMicroFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-font-weight, 400)") +export const FdsTypographyLinkMicroTextDecoration = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-text-decoration, underline)") +export const FdsTypographyLinkMicroDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-micro-display, inline-block)") +export const FdsTypographyLinkSmallFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-font-family, 'Public Sans')") +export const FdsTypographyLinkSmallFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-font-size, 14px)") +export const FdsTypographyLinkSmallLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-letter-spacing, 0px)") +export const FdsTypographyLinkSmallLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-line-height, 150%)") +export const FdsTypographyLinkSmallFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-font-weight, 400)") +export const FdsTypographyLinkSmallTextDecoration = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-text-decoration, underline)") +export const FdsTypographyLinkSmallDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-small-display, inline-block)") +export const FdsTypographyLinkDefaultFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-font-family, 'Public Sans')") +export const FdsTypographyLinkDefaultFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-font-size, 16px)") +export const FdsTypographyLinkDefaultLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-letter-spacing, 0px)") +export const FdsTypographyLinkDefaultLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-line-height, 150%)") +export const FdsTypographyLinkDefaultFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-font-weight, 400)") +export const FdsTypographyLinkDefaultTextDecoration = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-text-decoration, underline)") +export const FdsTypographyLinkDefaultDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-link-default-display, inline-block)") +export const FdsTypographyUiHelperFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-font-family, 'Public Sans', 'PublicSans-Regular')") +export const FdsTypographyUiHelperFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-font-size, 15px)") +export const FdsTypographyUiHelperLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-letter-spacing, 0px)") +export const FdsTypographyUiHelperLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-line-height, 100%)") +export const FdsTypographyUiHelperFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-font-weight, 400)") +export const FdsTypographyUiHelperDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-helper-display, inline-block)") +export const FdsTypographyUiIdFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-font-family, 'Roboto Mono')") +export const FdsTypographyUiIdFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-font-size, 13px)") +export const FdsTypographyUiIdLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-letter-spacing, 0px)") +export const FdsTypographyUiIdLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-line-height, 100%)") +export const FdsTypographyUiIdFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-font-weight, 700)") +export const FdsTypographyUiIdDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-id-display, inline-block)") +export const FdsTypographyUiLabelFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-font-family, 'Public Sans', 'PublicSans-Medium')") +export const FdsTypographyUiLabelFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-font-size, 16px)") +export const FdsTypographyUiLabelLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-letter-spacing, 0px)") +export const FdsTypographyUiLabelLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-line-height, 22px)") +export const FdsTypographyUiLabelFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-font-weight, 500)") +export const FdsTypographyUiLabelDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-label-display, inline-block)") +export const FdsTypographyUiPlaceholderFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-font-family, 'Public Sans', 'PublicSans-Medium')") +export const FdsTypographyUiPlaceholderFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-font-size, 16px)") +export const FdsTypographyUiPlaceholderLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-letter-spacing, 0px)") +export const FdsTypographyUiPlaceholderLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-line-height, 100%)") +export const FdsTypographyUiPlaceholderFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-font-weight, 500)") +export const FdsTypographyUiPlaceholderDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-placeholder-display, inline-block)") +export const FdsTypographyUiTagFontFamily = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-font-family, 'Public Sans', 'PublicSans-Bold')") +export const FdsTypographyUiTagFontSize = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-font-size, 16px)") +export const FdsTypographyUiTagLetterSpacing = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-letter-spacing, 0px)") +export const FdsTypographyUiTagLineHeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-line-height, 100%)") +export const FdsTypographyUiTagFontWeight = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-font-weight, 700)") +export const FdsTypographyUiTagDisplay = /*#__PURE__*/ unsafeCSS("var(--fds-typography-ui-tag-display, inline-block)") +export const FdsColorBrandBlack = /*#__PURE__*/ unsafeCSS("var(--fds-color-brand-black, #000000)") +export const FdsColorBrandWhite = /*#__PURE__*/ unsafeCSS("var(--fds-color-brand-white, #ffffff)") +export const FdsColorDanger50 = /*#__PURE__*/ unsafeCSS("var(--fds-color-danger-50, #FFF0ED)") +export const FdsColorDanger100 = /*#__PURE__*/ unsafeCSS("var(--fds-color-danger-100, #ff9b87)") +export const FdsColorDanger200 = /*#__PURE__*/ unsafeCSS("var(--fds-color-danger-200, #e55636)") +export const FdsColorDanger300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-danger-300, #b40000)") +export const FdsColorDanger400 = /*#__PURE__*/ unsafeCSS("var(--fds-color-danger-400, #720000)") +export const FdsColorInteractive50 = /*#__PURE__*/ unsafeCSS("var(--fds-color-interactive-50, #EFF8FF)") +export const FdsColorInteractive100 = /*#__PURE__*/ unsafeCSS("var(--fds-color-interactive-100, #90cefe)") +export const FdsColorInteractive200 = /*#__PURE__*/ unsafeCSS("var(--fds-color-interactive-200, #1777f8)") +export const FdsColorInteractive300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-interactive-300, #0034ac)") +export const FdsColorInteractive400 = /*#__PURE__*/ unsafeCSS("var(--fds-color-interactive-400, #001c5b)") +export const FdsColorNeutral50 = /*#__PURE__*/ unsafeCSS("var(--fds-color-neutral-50, #F6F6F6)") +export const FdsColorNeutral100 = /*#__PURE__*/ unsafeCSS("var(--fds-color-neutral-100, #cdcdd7)") +export const FdsColorNeutral200 = /*#__PURE__*/ unsafeCSS("var(--fds-color-neutral-200, #9696aa)") +export const FdsColorNeutral300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-neutral-300, #505064)") +export const FdsColorNeutral400 = /*#__PURE__*/ unsafeCSS("var(--fds-color-neutral-400, #2c2c44)") +export const FdsColorSuccess50 = /*#__PURE__*/ unsafeCSS("var(--fds-color-success-50, #EAFFF8)") +export const FdsColorSuccess100 = /*#__PURE__*/ unsafeCSS("var(--fds-color-success-100, #82e8c3)") +export const FdsColorSuccess200 = /*#__PURE__*/ unsafeCSS("var(--fds-color-success-200, #25a794)") +export const FdsColorSuccess300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-success-300, #005f61)") +export const FdsColorSuccess400 = /*#__PURE__*/ unsafeCSS("var(--fds-color-success-400, #004042)") +export const FdsColorText1 = /*#__PURE__*/ unsafeCSS("var(--fds-color-text-1, #ffffff)") +export const FdsColorText300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-text-300, #9696aa)") +export const FdsColorText600 = /*#__PURE__*/ unsafeCSS("var(--fds-color-text-600, #505064)") +export const FdsColorText1000 = /*#__PURE__*/ unsafeCSS("var(--fds-color-text-1000, #000000)") +export const FdsColorWarning50 = /*#__PURE__*/ unsafeCSS("var(--fds-color-warning-50, #FFFADB)") +export const FdsColorWarning100 = /*#__PURE__*/ unsafeCSS("var(--fds-color-warning-100, #ffe37f)") +export const FdsColorWarning200 = /*#__PURE__*/ unsafeCSS("var(--fds-color-warning-200, #eec200)") +export const FdsColorWarning300 = /*#__PURE__*/ unsafeCSS("var(--fds-color-warning-300, #b47324)") +export const FdsColorWarning400 = /*#__PURE__*/ unsafeCSS("var(--fds-color-warning-400, #6c3e05)") diff --git a/lib/style-templates.d.ts b/lib/style-templates.d.ts new file mode 100644 index 0000000..ba7dc8c --- /dev/null +++ b/lib/style-templates.d.ts @@ -0,0 +1,88 @@ +import { CSSResult } from 'lit' + +// .body-default-text +export const bodyDefaultTextClass: CSSResult + +// .body-large-text +export const bodyLargeTextClass: CSSResult + +// .body-micro-text +export const bodyMicroTextClass: CSSResult + +// .body-small-text +export const bodySmallTextClass: CSSResult + +// .emphasis-default-text +export const emphasisDefaultTextClass: CSSResult + +// .emphasis-large-text +export const emphasisLargeTextClass: CSSResult + +// .emphasis-micro-text +export const emphasisMicroTextClass: CSSResult + +// .emphasis-small-text +export const emphasisSmallTextClass: CSSResult + +// .heading-large-3-text +export const headingLarge3TextClass: CSSResult + +// .heading-large-4-text +export const headingLarge4TextClass: CSSResult + +// .heading-large-5-text +export const headingLarge5TextClass: CSSResult + +// .heading-large-6-text +export const headingLarge6TextClass: CSSResult + +// .heading-large-1-text +export const headingLarge1TextClass: CSSResult + +// .heading-large-2-text +export const headingLarge2TextClass: CSSResult + +// .heading-small-1-text +export const headingSmall1TextClass: CSSResult + +// .heading-small-2-text +export const headingSmall2TextClass: CSSResult + +// .heading-small-3-text +export const headingSmall3TextClass: CSSResult + +// .heading-small-4-text +export const headingSmall4TextClass: CSSResult + +// .heading-small-5-text +export const headingSmall5TextClass: CSSResult + +// .heading-small-6-text +export const headingSmall6TextClass: CSSResult + +// .link-large-text +export const linkLargeTextClass: CSSResult + +// .link-micro-text +export const linkMicroTextClass: CSSResult + +// .link-small-text +export const linkSmallTextClass: CSSResult + +// .link-default-text +export const linkDefaultTextClass: CSSResult + +// .ui-helper-text +export const uiHelperTextClass: CSSResult + +// .ui-id-text +export const uiIdTextClass: CSSResult + +// .ui-label-text +export const uiLabelTextClass: CSSResult + +// .ui-placeholder-text +export const uiPlaceholderTextClass: CSSResult + +// .ui-tag-text +export const uiTagTextClass: CSSResult diff --git a/lib/style-templates.js b/lib/style-templates.js new file mode 100644 index 0000000..4e6ba79 --- /dev/null +++ b/lib/style-templates.js @@ -0,0 +1,505 @@ +import { + FdsTypographyBodyDefaultDisplay, + FdsTypographyBodyDefaultFontFamily, + FdsTypographyBodyDefaultFontSize, + FdsTypographyBodyDefaultFontWeight, + FdsTypographyBodyDefaultLetterSpacing, + FdsTypographyBodyDefaultLineHeight, + FdsTypographyBodyLargeDisplay, + FdsTypographyBodyLargeFontFamily, + FdsTypographyBodyLargeFontSize, + FdsTypographyBodyLargeFontWeight, + FdsTypographyBodyLargeLetterSpacing, + FdsTypographyBodyLargeLineHeight, + FdsTypographyBodyMicroDisplay, + FdsTypographyBodyMicroFontFamily, + FdsTypographyBodyMicroFontSize, + FdsTypographyBodyMicroFontWeight, + FdsTypographyBodyMicroLetterSpacing, + FdsTypographyBodyMicroLineHeight, + FdsTypographyBodySmallDisplay, + FdsTypographyBodySmallFontFamily, + FdsTypographyBodySmallFontSize, + FdsTypographyBodySmallFontWeight, + FdsTypographyBodySmallLetterSpacing, + FdsTypographyBodySmallLineHeight, + FdsTypographyEmphasisDefaultDisplay, + FdsTypographyEmphasisDefaultFontFamily, + FdsTypographyEmphasisDefaultFontSize, + FdsTypographyEmphasisDefaultFontWeight, + FdsTypographyEmphasisDefaultLetterSpacing, + FdsTypographyEmphasisDefaultLineHeight, + FdsTypographyEmphasisLargeDisplay, + FdsTypographyEmphasisLargeFontFamily, + FdsTypographyEmphasisLargeFontSize, + FdsTypographyEmphasisLargeFontWeight, + FdsTypographyEmphasisLargeLetterSpacing, + FdsTypographyEmphasisLargeLineHeight, + FdsTypographyEmphasisMicroDisplay, + FdsTypographyEmphasisMicroFontFamily, + FdsTypographyEmphasisMicroFontSize, + FdsTypographyEmphasisMicroFontWeight, + FdsTypographyEmphasisMicroLetterSpacing, + FdsTypographyEmphasisMicroLineHeight, + FdsTypographyEmphasisSmallDisplay, + FdsTypographyEmphasisSmallFontFamily, + FdsTypographyEmphasisSmallFontSize, + FdsTypographyEmphasisSmallFontWeight, + FdsTypographyEmphasisSmallLetterSpacing, + FdsTypographyEmphasisSmallLineHeight, + FdsTypographyHeadingLargeHeading1Display, + FdsTypographyHeadingLargeHeading1FontFamily, + FdsTypographyHeadingLargeHeading1FontSize, + FdsTypographyHeadingLargeHeading1FontWeight, + FdsTypographyHeadingLargeHeading1LetterSpacing, + FdsTypographyHeadingLargeHeading1LineHeight, + FdsTypographyHeadingLargeHeading2Display, + FdsTypographyHeadingLargeHeading2FontFamily, + FdsTypographyHeadingLargeHeading2FontSize, + FdsTypographyHeadingLargeHeading2FontWeight, + FdsTypographyHeadingLargeHeading2LetterSpacing, + FdsTypographyHeadingLargeHeading2LineHeight, + FdsTypographyHeadingLargeHeading3Display, + FdsTypographyHeadingLargeHeading3FontFamily, + FdsTypographyHeadingLargeHeading3FontSize, + FdsTypographyHeadingLargeHeading3FontWeight, + FdsTypographyHeadingLargeHeading3LetterSpacing, + FdsTypographyHeadingLargeHeading3LineHeight, + FdsTypographyHeadingLargeHeading4Display, + FdsTypographyHeadingLargeHeading4FontFamily, + FdsTypographyHeadingLargeHeading4FontSize, + FdsTypographyHeadingLargeHeading4FontWeight, + FdsTypographyHeadingLargeHeading4LetterSpacing, + FdsTypographyHeadingLargeHeading4LineHeight, + FdsTypographyHeadingLargeHeading5Display, + FdsTypographyHeadingLargeHeading5FontFamily, + FdsTypographyHeadingLargeHeading5FontSize, + FdsTypographyHeadingLargeHeading5FontWeight, + FdsTypographyHeadingLargeHeading5LetterSpacing, + FdsTypographyHeadingLargeHeading5LineHeight, + FdsTypographyHeadingLargeHeading6Display, + FdsTypographyHeadingLargeHeading6FontFamily, + FdsTypographyHeadingLargeHeading6FontSize, + FdsTypographyHeadingLargeHeading6FontWeight, + FdsTypographyHeadingLargeHeading6LetterSpacing, + FdsTypographyHeadingLargeHeading6LineHeight, + FdsTypographyHeadingSmallHeading1Display, + FdsTypographyHeadingSmallHeading1FontFamily, + FdsTypographyHeadingSmallHeading1FontSize, + FdsTypographyHeadingSmallHeading1FontWeight, + FdsTypographyHeadingSmallHeading1LetterSpacing, + FdsTypographyHeadingSmallHeading1LineHeight, + FdsTypographyHeadingSmallHeading2Display, + FdsTypographyHeadingSmallHeading2FontFamily, + FdsTypographyHeadingSmallHeading2FontSize, + FdsTypographyHeadingSmallHeading2FontWeight, + FdsTypographyHeadingSmallHeading2LetterSpacing, + FdsTypographyHeadingSmallHeading2LineHeight, + FdsTypographyHeadingSmallHeading3Display, + FdsTypographyHeadingSmallHeading3FontFamily, + FdsTypographyHeadingSmallHeading3FontSize, + FdsTypographyHeadingSmallHeading3FontWeight, + FdsTypographyHeadingSmallHeading3LetterSpacing, + FdsTypographyHeadingSmallHeading3LineHeight, + FdsTypographyHeadingSmallHeading4Display, + FdsTypographyHeadingSmallHeading4FontFamily, + FdsTypographyHeadingSmallHeading4FontSize, + FdsTypographyHeadingSmallHeading4FontWeight, + FdsTypographyHeadingSmallHeading4LetterSpacing, + FdsTypographyHeadingSmallHeading4LineHeight, + FdsTypographyHeadingSmallHeading5Display, + FdsTypographyHeadingSmallHeading5FontFamily, + FdsTypographyHeadingSmallHeading5FontSize, + FdsTypographyHeadingSmallHeading5FontWeight, + FdsTypographyHeadingSmallHeading5LetterSpacing, + FdsTypographyHeadingSmallHeading5LineHeight, + FdsTypographyHeadingSmallHeading6Display, + FdsTypographyHeadingSmallHeading6FontFamily, + FdsTypographyHeadingSmallHeading6FontSize, + FdsTypographyHeadingSmallHeading6FontWeight, + FdsTypographyHeadingSmallHeading6LetterSpacing, + FdsTypographyHeadingSmallHeading6LineHeight, + FdsTypographyLinkDefaultDisplay, + FdsTypographyLinkDefaultFontFamily, + FdsTypographyLinkDefaultFontSize, + FdsTypographyLinkDefaultFontWeight, + FdsTypographyLinkDefaultLetterSpacing, + FdsTypographyLinkDefaultLineHeight, + FdsTypographyLinkDefaultTextDecoration, + FdsTypographyLinkLargeDisplay, + FdsTypographyLinkLargeFontFamily, + FdsTypographyLinkLargeFontSize, + FdsTypographyLinkLargeFontWeight, + FdsTypographyLinkLargeLetterSpacing, + FdsTypographyLinkLargeLineHeight, + FdsTypographyLinkLargeTextDecoration, + FdsTypographyLinkMicroDisplay, + FdsTypographyLinkMicroFontFamily, + FdsTypographyLinkMicroFontSize, + FdsTypographyLinkMicroFontWeight, + FdsTypographyLinkMicroLetterSpacing, + FdsTypographyLinkMicroLineHeight, + FdsTypographyLinkMicroTextDecoration, + FdsTypographyLinkSmallDisplay, + FdsTypographyLinkSmallFontFamily, + FdsTypographyLinkSmallFontSize, + FdsTypographyLinkSmallFontWeight, + FdsTypographyLinkSmallLetterSpacing, + FdsTypographyLinkSmallLineHeight, + FdsTypographyLinkSmallTextDecoration, + FdsTypographyUiHelperDisplay, + FdsTypographyUiHelperFontFamily, + FdsTypographyUiHelperFontSize, + FdsTypographyUiHelperFontWeight, + FdsTypographyUiHelperLetterSpacing, + FdsTypographyUiHelperLineHeight, + FdsTypographyUiIdDisplay, + FdsTypographyUiIdFontFamily, + FdsTypographyUiIdFontSize, + FdsTypographyUiIdFontWeight, + FdsTypographyUiIdLetterSpacing, + FdsTypographyUiIdLineHeight, + FdsTypographyUiLabelDisplay, + FdsTypographyUiLabelFontFamily, + FdsTypographyUiLabelFontSize, + FdsTypographyUiLabelFontWeight, + FdsTypographyUiLabelLetterSpacing, + FdsTypographyUiLabelLineHeight, + FdsTypographyUiPlaceholderDisplay, + FdsTypographyUiPlaceholderFontFamily, + FdsTypographyUiPlaceholderFontSize, + FdsTypographyUiPlaceholderFontWeight, + FdsTypographyUiPlaceholderLetterSpacing, + FdsTypographyUiPlaceholderLineHeight, + FdsTypographyUiTagDisplay, + FdsTypographyUiTagFontFamily, + FdsTypographyUiTagFontSize, + FdsTypographyUiTagFontWeight, + FdsTypographyUiTagLetterSpacing, + FdsTypographyUiTagLineHeight +} from './style-properties' + +import { css } from 'lit' + +export const bodyDefaultTextClass = css` + .body-default-text { + display: ${FdsTypographyBodyDefaultDisplay}; + font-family: ${FdsTypographyBodyDefaultFontFamily}; + font-size: ${FdsTypographyBodyDefaultFontSize}; + font-weight: ${FdsTypographyBodyDefaultFontWeight}; + letter-spacing: ${FdsTypographyBodyDefaultLetterSpacing}; + line-height: ${FdsTypographyBodyDefaultLineHeight}; + } +` + +export const bodyLargeTextClass = css` + .body-large-text { + display: ${FdsTypographyBodyLargeDisplay}; + font-family: ${FdsTypographyBodyLargeFontFamily}; + font-size: ${FdsTypographyBodyLargeFontSize}; + font-weight: ${FdsTypographyBodyLargeFontWeight}; + letter-spacing: ${FdsTypographyBodyLargeLetterSpacing}; + line-height: ${FdsTypographyBodyLargeLineHeight}; + } +` + +export const bodyMicroTextClass = css` + .body-micro-text { + display: ${FdsTypographyBodyMicroDisplay}; + font-family: ${FdsTypographyBodyMicroFontFamily}; + font-size: ${FdsTypographyBodyMicroFontSize}; + font-weight: ${FdsTypographyBodyMicroFontWeight}; + letter-spacing: ${FdsTypographyBodyMicroLetterSpacing}; + line-height: ${FdsTypographyBodyMicroLineHeight}; + } +` + +export const bodySmallTextClass = css` + .body-small-text { + display: ${FdsTypographyBodySmallDisplay}; + font-family: ${FdsTypographyBodySmallFontFamily}; + font-size: ${FdsTypographyBodySmallFontSize}; + font-weight: ${FdsTypographyBodySmallFontWeight}; + letter-spacing: ${FdsTypographyBodySmallLetterSpacing}; + line-height: ${FdsTypographyBodySmallLineHeight}; + } +` + +export const emphasisDefaultTextClass = css` + .emphasis-default-text { + display: ${FdsTypographyEmphasisDefaultDisplay}; + font-family: ${FdsTypographyEmphasisDefaultFontFamily}; + font-size: ${FdsTypographyEmphasisDefaultFontSize}; + font-weight: ${FdsTypographyEmphasisDefaultFontWeight}; + letter-spacing: ${FdsTypographyEmphasisDefaultLetterSpacing}; + line-height: ${FdsTypographyEmphasisDefaultLineHeight}; + } +` + +export const emphasisLargeTextClass = css` + .emphasis-large-text { + display: ${FdsTypographyEmphasisLargeDisplay}; + font-family: ${FdsTypographyEmphasisLargeFontFamily}; + font-size: ${FdsTypographyEmphasisLargeFontSize}; + font-weight: ${FdsTypographyEmphasisLargeFontWeight}; + letter-spacing: ${FdsTypographyEmphasisLargeLetterSpacing}; + line-height: ${FdsTypographyEmphasisLargeLineHeight}; + } +` + +export const emphasisMicroTextClass = css` + .emphasis-micro-text { + display: ${FdsTypographyEmphasisMicroDisplay}; + font-family: ${FdsTypographyEmphasisMicroFontFamily}; + font-size: ${FdsTypographyEmphasisMicroFontSize}; + font-weight: ${FdsTypographyEmphasisMicroFontWeight}; + letter-spacing: ${FdsTypographyEmphasisMicroLetterSpacing}; + line-height: ${FdsTypographyEmphasisMicroLineHeight}; + } +` + +export const emphasisSmallTextClass = css` + .emphasis-small-text { + display: ${FdsTypographyEmphasisSmallDisplay}; + font-family: ${FdsTypographyEmphasisSmallFontFamily}; + font-size: ${FdsTypographyEmphasisSmallFontSize}; + font-weight: ${FdsTypographyEmphasisSmallFontWeight}; + letter-spacing: ${FdsTypographyEmphasisSmallLetterSpacing}; + line-height: ${FdsTypographyEmphasisSmallLineHeight}; + } +` + +export const headingLarge1TextClass = css` + .heading-large-1-text { + display: ${FdsTypographyHeadingLargeHeading1Display}; + font-family: ${FdsTypographyHeadingLargeHeading1FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading1FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading1FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading1LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading1LineHeight}; + } +` + +export const headingLarge2TextClass = css` + .heading-large-2-text { + display: ${FdsTypographyHeadingLargeHeading2Display}; + font-family: ${FdsTypographyHeadingLargeHeading2FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading2FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading2FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading2LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading2LineHeight}; + } +` + +export const headingLarge3TextClass = css` + .heading-large-3-text { + display: ${FdsTypographyHeadingLargeHeading3Display}; + font-family: ${FdsTypographyHeadingLargeHeading3FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading3FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading3FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading3LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading3LineHeight}; + } +` + +export const headingLarge4TextClass = css` + .heading-large-4-text { + display: ${FdsTypographyHeadingLargeHeading4Display}; + font-family: ${FdsTypographyHeadingLargeHeading4FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading4FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading4FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading4LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading4LineHeight}; + } +` + +export const headingLarge5TextClass = css` + .heading-large-5-text { + display: ${FdsTypographyHeadingLargeHeading5Display}; + font-family: ${FdsTypographyHeadingLargeHeading5FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading5FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading5FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading5LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading5LineHeight}; + } +` + +export const headingLarge6TextClass = css` + .heading-large-6-text { + display: ${FdsTypographyHeadingLargeHeading6Display}; + font-family: ${FdsTypographyHeadingLargeHeading6FontFamily}; + font-size: ${FdsTypographyHeadingLargeHeading6FontSize}; + font-weight: ${FdsTypographyHeadingLargeHeading6FontWeight}; + letter-spacing: ${FdsTypographyHeadingLargeHeading6LetterSpacing}; + line-height: ${FdsTypographyHeadingLargeHeading6LineHeight}; + } +` + +export const headingSmall1TextClass = css` + .heading-small-1-text { + display: ${FdsTypographyHeadingSmallHeading1Display}; + font-family: ${FdsTypographyHeadingSmallHeading1FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading1FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading1FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading1LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading1LineHeight}; + } +` + +export const headingSmall2TextClass = css` + .heading-small-2-text { + display: ${FdsTypographyHeadingSmallHeading2Display}; + font-family: ${FdsTypographyHeadingSmallHeading2FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading2FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading2FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading2LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading2LineHeight}; + } +` + +export const headingSmall3TextClass = css` + .heading-small-3-text { + display: ${FdsTypographyHeadingSmallHeading3Display}; + font-family: ${FdsTypographyHeadingSmallHeading3FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading3FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading3FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading3LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading3LineHeight}; + } +` + +export const headingSmall4TextClass = css` + .heading-small-4-text { + display: ${FdsTypographyHeadingSmallHeading4Display}; + font-family: ${FdsTypographyHeadingSmallHeading4FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading4FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading4FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading4LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading4LineHeight}; + } +` + +export const headingSmall5TextClass = css` + .heading-small-5-text { + display: ${FdsTypographyHeadingSmallHeading5Display}; + font-family: ${FdsTypographyHeadingSmallHeading5FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading5FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading5FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading5LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading5LineHeight}; + } +` + +export const headingSmall6TextClass = css` + .heading-small-6-text { + display: ${FdsTypographyHeadingSmallHeading6Display}; + font-family: ${FdsTypographyHeadingSmallHeading6FontFamily}; + font-size: ${FdsTypographyHeadingSmallHeading6FontSize}; + font-weight: ${FdsTypographyHeadingSmallHeading6FontWeight}; + letter-spacing: ${FdsTypographyHeadingSmallHeading6LetterSpacing}; + line-height: ${FdsTypographyHeadingSmallHeading6LineHeight}; + } +` + +export const linkDefaultTextClass = css` + .link-default-text { + display: ${FdsTypographyLinkDefaultDisplay}; + font-family: ${FdsTypographyLinkDefaultFontFamily}; + font-size: ${FdsTypographyLinkDefaultFontSize}; + font-weight: ${FdsTypographyLinkDefaultFontWeight}; + letter-spacing: ${FdsTypographyLinkDefaultLetterSpacing}; + line-height: ${FdsTypographyLinkDefaultLineHeight}; + text-decoration: ${FdsTypographyLinkDefaultTextDecoration}; + } +` + +export const linkLargeTextClass = css` + .link-large-text { + display: ${FdsTypographyLinkLargeDisplay}; + font-family: ${FdsTypographyLinkLargeFontFamily}; + font-size: ${FdsTypographyLinkLargeFontSize}; + font-weight: ${FdsTypographyLinkLargeFontWeight}; + letter-spacing: ${FdsTypographyLinkLargeLetterSpacing}; + line-height: ${FdsTypographyLinkLargeLineHeight}; + text-decoration: ${FdsTypographyLinkLargeTextDecoration}; + } +` + +export const linkMicroTextClass = css` + .link-micro-text { + display: ${FdsTypographyLinkMicroDisplay}; + font-family: ${FdsTypographyLinkMicroFontFamily}; + font-size: ${FdsTypographyLinkMicroFontSize}; + font-weight: ${FdsTypographyLinkMicroFontWeight}; + letter-spacing: ${FdsTypographyLinkMicroLetterSpacing}; + line-height: ${FdsTypographyLinkMicroLineHeight}; + text-decoration: ${FdsTypographyLinkMicroTextDecoration}; + } +` + +export const linkSmallTextClass = css` + .link-small-text { + display: ${FdsTypographyLinkSmallDisplay}; + font-family: ${FdsTypographyLinkSmallFontFamily}; + font-size: ${FdsTypographyLinkSmallFontSize}; + font-weight: ${FdsTypographyLinkSmallFontWeight}; + letter-spacing: ${FdsTypographyLinkSmallLetterSpacing}; + line-height: ${FdsTypographyLinkSmallLineHeight}; + text-decoration: ${FdsTypographyLinkSmallTextDecoration}; + } +` + +export const uiHelperTextClass = css` + .ui-helper-text { + display: ${FdsTypographyUiHelperDisplay}; + font-family: ${FdsTypographyUiHelperFontFamily}; + font-size: ${FdsTypographyUiHelperFontSize}; + font-weight: ${FdsTypographyUiHelperFontWeight}; + letter-spacing: ${FdsTypographyUiHelperLetterSpacing}; + line-height: ${FdsTypographyUiHelperLineHeight}; + } +` + +export const uiIdTextClass = css` + .ui-id-text { + display: ${FdsTypographyUiIdDisplay}; + font-family: ${FdsTypographyUiIdFontFamily}; + font-size: ${FdsTypographyUiIdFontSize}; + font-weight: ${FdsTypographyUiIdFontWeight}; + letter-spacing: ${FdsTypographyUiIdLetterSpacing}; + line-height: ${FdsTypographyUiIdLineHeight}; + } +` + +export const uiLabelTextClass = css` + .ui-label-text { + display: ${FdsTypographyUiLabelDisplay}; + font-family: ${FdsTypographyUiLabelFontFamily}; + font-size: ${FdsTypographyUiLabelFontSize}; + font-weight: ${FdsTypographyUiLabelFontWeight}; + letter-spacing: ${FdsTypographyUiLabelLetterSpacing}; + line-height: ${FdsTypographyUiLabelLineHeight}; + } +` + +export const uiPlaceholderTextClass = css` + .ui-placeholder-text { + display: ${FdsTypographyUiPlaceholderDisplay}; + font-family: ${FdsTypographyUiPlaceholderFontFamily}; + font-size: ${FdsTypographyUiPlaceholderFontSize}; + font-weight: ${FdsTypographyUiPlaceholderFontWeight}; + letter-spacing: ${FdsTypographyUiPlaceholderLetterSpacing}; + line-height: ${FdsTypographyUiPlaceholderLineHeight}; + } +` + +export const uiTagTextClass = css` + .ui-tag-text { + display: ${FdsTypographyUiTagDisplay}; + font-family: ${FdsTypographyUiTagFontFamily}; + font-size: ${FdsTypographyUiTagFontSize}; + font-weight: ${FdsTypographyUiTagFontWeight}; + letter-spacing: ${FdsTypographyUiTagLetterSpacing}; + line-height: ${FdsTypographyUiTagLineHeight}; + } +` diff --git a/lib/token-utils.d.ts b/lib/token-utils.d.ts new file mode 100644 index 0000000..debc193 --- /dev/null +++ b/lib/token-utils.d.ts @@ -0,0 +1,4 @@ +import { CSSResult } from 'lit' +import { FdsToken } from './tokens' + +export declare const tokenVar: (token: FdsToken) => CSSResult diff --git a/lib/token-utils.js b/lib/token-utils.js new file mode 100644 index 0000000..3c8bc6a --- /dev/null +++ b/lib/token-utils.js @@ -0,0 +1,9 @@ +import { unsafeCSS } from 'lit' + +export const tokenVar = token => { + if (token == null || token.name == null || token.value == null) { + console.error('invalid FdsToken', token) + return unsafeCSS('') + } + return unsafeCSS(['var(--', token.name, ', ', token.value, ')'].join('')) +} diff --git a/lib/tokens.d.ts b/lib/tokens.d.ts index e9a329b..c3a7fc4 100644 --- a/lib/tokens.d.ts +++ b/lib/tokens.d.ts @@ -1,230 +1,230 @@ export type FdsToken = { name: "fds-size-1", value: "8px" } | { name: "fds-size-2", value: "16px" } | { name: "fds-size-3", value: "24px" } | { name: "fds-size-4", value: "32px" } | { name: "fds-size-6", value: "48px" } | { name: "fds-size-8", value: "64px" } | { name: "fds-size-12", value: "96px" } | { name: "fds-size-16", value: "128px" } | { name: "fds-size-24", value: "192px" } | { name: "fds-size-32", value: "256px" } | { name: "fds-radius-compact", value: "2px" } | { name: "fds-radius-normal", value: "4px" } | { name: "fds-radius-large", value: "8px" } | { name: "fds-radius-rounded", value: "1000px" } | { name: "fds-style-elevation-100", value: "0px 1px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)" } | { name: "fds-style-elevation-200", value: "0px 6px 6px 0px rgba(0, 0, 0, 0.23), 0px 3px 6px 0px rgba(0, 0, 0, 0.16)" } | { name: "fds-style-elevation-300", value: "0px 6px 12px 0px rgba(0, 0, 0, 0.23), 0px 20px 20px 0px rgba(0, 0, 0, 0.19)" } | { name: "fds-style-elevation-400", value: "0px 20px 20px 0px rgba(0, 0, 0, 0.22), 0px 50px 100px 0px rgba(0, 0, 0, 0.25)" } | { name: "fds-typography-body-default-font-family", value: "'Public Sans'" } | { name: "fds-typography-body-default-font-size", value: "16px" } | { name: "fds-typography-body-default-letter-spacing", value: "0px" } | { name: "fds-typography-body-default-line-height", value: "150%" } | { name: "fds-typography-body-default-font-weight", value: "400" } | { name: "fds-typography-body-default-display", value: "inline-block" } | { name: "fds-typography-body-large-font-family", value: "'Public Sans'" } | { name: "fds-typography-body-large-font-size", value: "18px" } | { name: "fds-typography-body-large-letter-spacing", value: "0px" } | { name: "fds-typography-body-large-line-height", value: "150%" } | { name: "fds-typography-body-large-font-weight", value: "400" } | { name: "fds-typography-body-large-display", value: "inline-block" } | { name: "fds-typography-body-micro-font-family", value: "'Public Sans'" } | { name: "fds-typography-body-micro-font-size", value: "12px" } | { name: "fds-typography-body-micro-letter-spacing", value: "0px" } | { name: "fds-typography-body-micro-line-height", value: "150%" } | { name: "fds-typography-body-micro-font-weight", value: "400" } | { name: "fds-typography-body-micro-display", value: "inline-block" } | { name: "fds-typography-body-small-font-family", value: "'Public Sans'" } | { name: "fds-typography-body-small-font-size", value: "14px" } | { name: "fds-typography-body-small-letter-spacing", value: "0px" } | { name: "fds-typography-body-small-line-height", value: "150%" } | { name: "fds-typography-body-small-font-weight", value: "400" } | { name: "fds-typography-body-small-display", value: "inline-block" } | { name: "fds-typography-emphasis-default-font-family", value: "'Public Sans'" } | { name: "fds-typography-emphasis-default-font-size", value: "16px" } | { name: "fds-typography-emphasis-default-letter-spacing", value: "0px" } | { name: "fds-typography-emphasis-default-line-height", value: "150%" } | { name: "fds-typography-emphasis-default-font-weight", value: "700" } | { name: "fds-typography-emphasis-default-display", value: "inline-block" } | { name: "fds-typography-emphasis-large-font-family", value: "'Public Sans'" } | { name: "fds-typography-emphasis-large-font-size", value: "18px" } | { name: "fds-typography-emphasis-large-letter-spacing", value: "0px" } | { name: "fds-typography-emphasis-large-line-height", value: "150%" } | { name: "fds-typography-emphasis-large-font-weight", value: "700" } | { name: "fds-typography-emphasis-large-display", value: "inline-block" } | { name: "fds-typography-emphasis-micro-font-family", value: "'Public Sans'" } | { name: "fds-typography-emphasis-micro-font-size", value: "12px" } | { name: "fds-typography-emphasis-micro-letter-spacing", value: "0px" } | { name: "fds-typography-emphasis-micro-line-height", value: "150%" } | { name: "fds-typography-emphasis-micro-font-weight", value: "700" } | { name: "fds-typography-emphasis-micro-display", value: "inline-block" } | { name: "fds-typography-emphasis-small-font-family", value: "'Public Sans'" } | { name: "fds-typography-emphasis-small-font-size", value: "14px" } | { name: "fds-typography-emphasis-small-letter-spacing", value: "0px" } | { name: "fds-typography-emphasis-small-line-height", value: "150%" } | { name: "fds-typography-emphasis-small-font-weight", value: "700" } | { name: "fds-typography-emphasis-small-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-3-font-size", value: "40px" } | { name: "fds-typography-heading-large-heading-3-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-3-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-3-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-3-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-4-font-size", value: "32px" } | { name: "fds-typography-heading-large-heading-4-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-4-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-4-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-4-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-5-font-size", value: "28px" } | { name: "fds-typography-heading-large-heading-5-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-5-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-5-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-5-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-6-font-size", value: "20px" } | { name: "fds-typography-heading-large-heading-6-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-6-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-6-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-6-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-1-font-size", value: "64px" } | { name: "fds-typography-heading-large-heading-1-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-1-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-1-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-1-display", value: "inline-block" } | { name: "fds-typography-heading-large-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-large-heading-2-font-size", value: "48px" } | { name: "fds-typography-heading-large-heading-2-letter-spacing", value: "0px" } | { name: "fds-typography-heading-large-heading-2-line-height", value: "110%" } | { name: "fds-typography-heading-large-heading-2-font-weight", value: "700" } | { name: "fds-typography-heading-large-heading-2-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-1-font-size", value: "42px" } | { name: "fds-typography-heading-small-heading-1-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-1-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-1-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-1-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-2-font-size", value: "32px" } | { name: "fds-typography-heading-small-heading-2-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-2-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-2-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-2-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-3-font-size", value: "28px" } | { name: "fds-typography-heading-small-heading-3-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-3-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-3-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-3-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-4-font-size", value: "24px" } | { name: "fds-typography-heading-small-heading-4-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-4-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-4-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-4-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-5-font-size", value: "18px" } | { name: "fds-typography-heading-small-heading-5-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-5-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-5-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-5-display", value: "inline-block" } | { name: "fds-typography-heading-small-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-heading-small-heading-6-font-size", value: "16px" } | { name: "fds-typography-heading-small-heading-6-letter-spacing", value: "0px" } | { name: "fds-typography-heading-small-heading-6-line-height", value: "110%" } | { name: "fds-typography-heading-small-heading-6-font-weight", value: "700" } | { name: "fds-typography-heading-small-heading-6-display", value: "inline-block" } | { name: "fds-typography-link-large-font-family", value: "'Public Sans'" } | { name: "fds-typography-link-large-font-size", value: "18px" } | { name: "fds-typography-link-large-letter-spacing", value: "0px" } | { name: "fds-typography-link-large-line-height", value: "150%" } | { name: "fds-typography-link-large-font-weight", value: "400" } | { name: "fds-typography-link-large-text-decoration", value: "underline" } | { name: "fds-typography-link-large-display", value: "inline-block" } | { name: "fds-typography-link-micro-font-family", value: "'Public Sans'" } | { name: "fds-typography-link-micro-font-size", value: "12px" } | { name: "fds-typography-link-micro-letter-spacing", value: "0px" } | { name: "fds-typography-link-micro-line-height", value: "150%" } | { name: "fds-typography-link-micro-font-weight", value: "400" } | { name: "fds-typography-link-micro-text-decoration", value: "underline" } | { name: "fds-typography-link-micro-display", value: "inline-block" } | { name: "fds-typography-link-small-font-family", value: "'Public Sans'" } | { name: "fds-typography-link-small-font-size", value: "14px" } | { name: "fds-typography-link-small-letter-spacing", value: "0px" } | { name: "fds-typography-link-small-line-height", value: "150%" } | { name: "fds-typography-link-small-font-weight", value: "400" } | { name: "fds-typography-link-small-text-decoration", value: "underline" } | { name: "fds-typography-link-small-display", value: "inline-block" } | { name: "fds-typography-link-default-font-family", value: "'Public Sans'" } | { name: "fds-typography-link-default-font-size", value: "16px" } | { name: "fds-typography-link-default-letter-spacing", value: "0px" } | { name: "fds-typography-link-default-line-height", value: "150%" } | { name: "fds-typography-link-default-font-weight", value: "400" } | { name: "fds-typography-link-default-text-decoration", value: "underline" } | { name: "fds-typography-link-default-display", value: "inline-block" } | { name: "fds-typography-ui-helper-font-family", value: "'Public Sans', 'PublicSans-Regular'" } | { name: "fds-typography-ui-helper-font-size", value: "15px" } | { name: "fds-typography-ui-helper-letter-spacing", value: "0px" } | { name: "fds-typography-ui-helper-line-height", value: "100%" } | { name: "fds-typography-ui-helper-font-weight", value: "400" } | { name: "fds-typography-ui-helper-display", value: "inline-block" } | { name: "fds-typography-ui-id-font-family", value: "'Roboto Mono'" } | { name: "fds-typography-ui-id-font-size", value: "13px" } | { name: "fds-typography-ui-id-letter-spacing", value: "0px" } | { name: "fds-typography-ui-id-line-height", value: "100%" } | { name: "fds-typography-ui-id-font-weight", value: "700" } | { name: "fds-typography-ui-id-display", value: "inline-block" } | { name: "fds-typography-ui-label-font-family", value: "'Public Sans', 'PublicSans-Medium'" } | { name: "fds-typography-ui-label-font-size", value: "16px" } | { name: "fds-typography-ui-label-letter-spacing", value: "0px" } | { name: "fds-typography-ui-label-line-height", value: "22px" } | { name: "fds-typography-ui-label-font-weight", value: "500" } | { name: "fds-typography-ui-label-display", value: "inline-block" } | { name: "fds-typography-ui-placeholder-font-family", value: "'Public Sans', 'PublicSans-Medium'" } | { name: "fds-typography-ui-placeholder-font-size", value: "16px" } | { name: "fds-typography-ui-placeholder-letter-spacing", value: "0px" } | { name: "fds-typography-ui-placeholder-line-height", value: "100%" } | { name: "fds-typography-ui-placeholder-font-weight", value: "500" } | { name: "fds-typography-ui-placeholder-display", value: "inline-block" } | { name: "fds-typography-ui-tag-font-family", value: "'Public Sans', 'PublicSans-Bold'" } | { name: "fds-typography-ui-tag-font-size", value: "16px" } | { name: "fds-typography-ui-tag-letter-spacing", value: "0px" } | { name: "fds-typography-ui-tag-line-height", value: "100%" } | { name: "fds-typography-ui-tag-font-weight", value: "700" } | { name: "fds-typography-ui-tag-display", value: "inline-block" } | { name: "fds-color-brand-black", value: "#000000" } | { name: "fds-color-brand-white", value: "#ffffff" } | { name: "fds-color-danger-50", value: "#FFF0ED" } | { name: "fds-color-danger-100", value: "#ff9b87" } | { name: "fds-color-danger-200", value: "#e55636" } | { name: "fds-color-danger-300", value: "#b40000" } | { name: "fds-color-danger-400", value: "#720000" } | { name: "fds-color-interactive-50", value: "#EFF8FF" } | { name: "fds-color-interactive-100", value: "#90cefe" } | { name: "fds-color-interactive-200", value: "#1777f8" } | { name: "fds-color-interactive-300", value: "#0034ac" } | { name: "fds-color-interactive-400", value: "#001c5b" } | { name: "fds-color-neutral-50", value: "#F6F6F6" } | { name: "fds-color-neutral-100", value: "#cdcdd7" } | { name: "fds-color-neutral-200", value: "#9696aa" } | { name: "fds-color-neutral-300", value: "#505064" } | { name: "fds-color-neutral-400", value: "#2c2c44" } | { name: "fds-color-success-50", value: "#EAFFF8" } | { name: "fds-color-success-100", value: "#82e8c3" } | { name: "fds-color-success-200", value: "#25a794" } | { name: "fds-color-success-300", value: "#005f61" } | { name: "fds-color-success-400", value: "#004042" } | { name: "fds-color-text-1", value: "#ffffff" } | { name: "fds-color-text-300", value: "#9696aa" } | { name: "fds-color-text-600", value: "#505064" } | { name: "fds-color-text-1000", value: "#000000" } | { name: "fds-color-warning-50", value: "#FFFADB" } | { name: "fds-color-warning-100", value: "#ffe37f" } | { name: "fds-color-warning-200", value: "#eec200" } | { name: "fds-color-warning-300", value: "#b47324" } | { name: "fds-color-warning-400", value: "#6c3e05" } export type FdsColorToken = { name: "fds-color-brand-black", value: "#000000" } | { name: "fds-color-brand-white", value: "#ffffff" } | { name: "fds-color-danger-50", value: "#FFF0ED" } | { name: "fds-color-danger-100", value: "#ff9b87" } | { name: "fds-color-danger-200", value: "#e55636" } | { name: "fds-color-danger-300", value: "#b40000" } | { name: "fds-color-danger-400", value: "#720000" } | { name: "fds-color-interactive-50", value: "#EFF8FF" } | { name: "fds-color-interactive-100", value: "#90cefe" } | { name: "fds-color-interactive-200", value: "#1777f8" } | { name: "fds-color-interactive-300", value: "#0034ac" } | { name: "fds-color-interactive-400", value: "#001c5b" } | { name: "fds-color-neutral-50", value: "#F6F6F6" } | { name: "fds-color-neutral-100", value: "#cdcdd7" } | { name: "fds-color-neutral-200", value: "#9696aa" } | { name: "fds-color-neutral-300", value: "#505064" } | { name: "fds-color-neutral-400", value: "#2c2c44" } | { name: "fds-color-success-50", value: "#EAFFF8" } | { name: "fds-color-success-100", value: "#82e8c3" } | { name: "fds-color-success-200", value: "#25a794" } | { name: "fds-color-success-300", value: "#005f61" } | { name: "fds-color-success-400", value: "#004042" } | { name: "fds-color-text-1", value: "#ffffff" } | { name: "fds-color-text-300", value: "#9696aa" } | { name: "fds-color-text-600", value: "#505064" } | { name: "fds-color-text-1000", value: "#000000" } | { name: "fds-color-warning-50", value: "#FFFADB" } | { name: "fds-color-warning-100", value: "#ffe37f" } | { name: "fds-color-warning-200", value: "#eec200" } | { name: "fds-color-warning-300", value: "#b47324" } | { name: "fds-color-warning-400", value: "#6c3e05" } export type FdsSizeToken = { name: "fds-size-1", value: "8px" } | { name: "fds-size-2", value: "16px" } | { name: "fds-size-3", value: "24px" } | { name: "fds-size-4", value: "32px" } | { name: "fds-size-6", value: "48px" } | { name: "fds-size-8", value: "64px" } | { name: "fds-size-12", value: "96px" } | { name: "fds-size-16", value: "128px" } | { name: "fds-size-24", value: "192px" } | { name: "fds-size-32", value: "256px" } -export const FdsSize1: FdsSizeToken -export const FdsSize2: FdsSizeToken -export const FdsSize3: FdsSizeToken -export const FdsSize4: FdsSizeToken -export const FdsSize6: FdsSizeToken -export const FdsSize8: FdsSizeToken -export const FdsSize12: FdsSizeToken -export const FdsSize16: FdsSizeToken -export const FdsSize24: FdsSizeToken -export const FdsSize32: FdsSizeToken -export const FdsRadiusCompact: FdsToken -export const FdsRadiusNormal: FdsToken -export const FdsRadiusLarge: FdsToken -export const FdsRadiusRounded: FdsToken -export const FdsStyleElevation100: FdsToken -export const FdsStyleElevation200: FdsToken -export const FdsStyleElevation300: FdsToken -export const FdsStyleElevation400: FdsToken -export const FdsTypographyBodyDefaultFontFamily: FdsToken -export const FdsTypographyBodyDefaultFontSize: FdsToken -export const FdsTypographyBodyDefaultLetterSpacing: FdsToken -export const FdsTypographyBodyDefaultLineHeight: FdsToken -export const FdsTypographyBodyDefaultFontWeight: FdsToken -export const FdsTypographyBodyDefaultDisplay: FdsToken -export const FdsTypographyBodyLargeFontFamily: FdsToken -export const FdsTypographyBodyLargeFontSize: FdsToken -export const FdsTypographyBodyLargeLetterSpacing: FdsToken -export const FdsTypographyBodyLargeLineHeight: FdsToken -export const FdsTypographyBodyLargeFontWeight: FdsToken -export const FdsTypographyBodyLargeDisplay: FdsToken -export const FdsTypographyBodyMicroFontFamily: FdsToken -export const FdsTypographyBodyMicroFontSize: FdsToken -export const FdsTypographyBodyMicroLetterSpacing: FdsToken -export const FdsTypographyBodyMicroLineHeight: FdsToken -export const FdsTypographyBodyMicroFontWeight: FdsToken -export const FdsTypographyBodyMicroDisplay: FdsToken -export const FdsTypographyBodySmallFontFamily: FdsToken -export const FdsTypographyBodySmallFontSize: FdsToken -export const FdsTypographyBodySmallLetterSpacing: FdsToken -export const FdsTypographyBodySmallLineHeight: FdsToken -export const FdsTypographyBodySmallFontWeight: FdsToken -export const FdsTypographyBodySmallDisplay: FdsToken -export const FdsTypographyEmphasisDefaultFontFamily: FdsToken -export const FdsTypographyEmphasisDefaultFontSize: FdsToken -export const FdsTypographyEmphasisDefaultLetterSpacing: FdsToken -export const FdsTypographyEmphasisDefaultLineHeight: FdsToken -export const FdsTypographyEmphasisDefaultFontWeight: FdsToken -export const FdsTypographyEmphasisDefaultDisplay: FdsToken -export const FdsTypographyEmphasisLargeFontFamily: FdsToken -export const FdsTypographyEmphasisLargeFontSize: FdsToken -export const FdsTypographyEmphasisLargeLetterSpacing: FdsToken -export const FdsTypographyEmphasisLargeLineHeight: FdsToken -export const FdsTypographyEmphasisLargeFontWeight: FdsToken -export const FdsTypographyEmphasisLargeDisplay: FdsToken -export const FdsTypographyEmphasisMicroFontFamily: FdsToken -export const FdsTypographyEmphasisMicroFontSize: FdsToken -export const FdsTypographyEmphasisMicroLetterSpacing: FdsToken -export const FdsTypographyEmphasisMicroLineHeight: FdsToken -export const FdsTypographyEmphasisMicroFontWeight: FdsToken -export const FdsTypographyEmphasisMicroDisplay: FdsToken -export const FdsTypographyEmphasisSmallFontFamily: FdsToken -export const FdsTypographyEmphasisSmallFontSize: FdsToken -export const FdsTypographyEmphasisSmallLetterSpacing: FdsToken -export const FdsTypographyEmphasisSmallLineHeight: FdsToken -export const FdsTypographyEmphasisSmallFontWeight: FdsToken -export const FdsTypographyEmphasisSmallDisplay: FdsToken -export const FdsTypographyHeadingLargeHeading3FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading3FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading3LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading3LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading3FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading3Display: FdsToken -export const FdsTypographyHeadingLargeHeading4FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading4FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading4LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading4LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading4FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading4Display: FdsToken -export const FdsTypographyHeadingLargeHeading5FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading5FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading5LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading5LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading5FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading5Display: FdsToken -export const FdsTypographyHeadingLargeHeading6FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading6FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading6LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading6LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading6FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading6Display: FdsToken -export const FdsTypographyHeadingLargeHeading1FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading1FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading1LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading1LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading1FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading1Display: FdsToken -export const FdsTypographyHeadingLargeHeading2FontFamily: FdsToken -export const FdsTypographyHeadingLargeHeading2FontSize: FdsToken -export const FdsTypographyHeadingLargeHeading2LetterSpacing: FdsToken -export const FdsTypographyHeadingLargeHeading2LineHeight: FdsToken -export const FdsTypographyHeadingLargeHeading2FontWeight: FdsToken -export const FdsTypographyHeadingLargeHeading2Display: FdsToken -export const FdsTypographyHeadingSmallHeading1FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading1FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading1LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading1LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading1FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading1Display: FdsToken -export const FdsTypographyHeadingSmallHeading2FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading2FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading2LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading2LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading2FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading2Display: FdsToken -export const FdsTypographyHeadingSmallHeading3FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading3FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading3LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading3LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading3FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading3Display: FdsToken -export const FdsTypographyHeadingSmallHeading4FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading4FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading4LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading4LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading4FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading4Display: FdsToken -export const FdsTypographyHeadingSmallHeading5FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading5FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading5LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading5LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading5FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading5Display: FdsToken -export const FdsTypographyHeadingSmallHeading6FontFamily: FdsToken -export const FdsTypographyHeadingSmallHeading6FontSize: FdsToken -export const FdsTypographyHeadingSmallHeading6LetterSpacing: FdsToken -export const FdsTypographyHeadingSmallHeading6LineHeight: FdsToken -export const FdsTypographyHeadingSmallHeading6FontWeight: FdsToken -export const FdsTypographyHeadingSmallHeading6Display: FdsToken -export const FdsTypographyLinkLargeFontFamily: FdsToken -export const FdsTypographyLinkLargeFontSize: FdsToken -export const FdsTypographyLinkLargeLetterSpacing: FdsToken -export const FdsTypographyLinkLargeLineHeight: FdsToken -export const FdsTypographyLinkLargeFontWeight: FdsToken -export const FdsTypographyLinkLargeTextDecoration: FdsToken -export const FdsTypographyLinkLargeDisplay: FdsToken -export const FdsTypographyLinkMicroFontFamily: FdsToken -export const FdsTypographyLinkMicroFontSize: FdsToken -export const FdsTypographyLinkMicroLetterSpacing: FdsToken -export const FdsTypographyLinkMicroLineHeight: FdsToken -export const FdsTypographyLinkMicroFontWeight: FdsToken -export const FdsTypographyLinkMicroTextDecoration: FdsToken -export const FdsTypographyLinkMicroDisplay: FdsToken -export const FdsTypographyLinkSmallFontFamily: FdsToken -export const FdsTypographyLinkSmallFontSize: FdsToken -export const FdsTypographyLinkSmallLetterSpacing: FdsToken -export const FdsTypographyLinkSmallLineHeight: FdsToken -export const FdsTypographyLinkSmallFontWeight: FdsToken -export const FdsTypographyLinkSmallTextDecoration: FdsToken -export const FdsTypographyLinkSmallDisplay: FdsToken -export const FdsTypographyLinkDefaultFontFamily: FdsToken -export const FdsTypographyLinkDefaultFontSize: FdsToken -export const FdsTypographyLinkDefaultLetterSpacing: FdsToken -export const FdsTypographyLinkDefaultLineHeight: FdsToken -export const FdsTypographyLinkDefaultFontWeight: FdsToken -export const FdsTypographyLinkDefaultTextDecoration: FdsToken -export const FdsTypographyLinkDefaultDisplay: FdsToken -export const FdsTypographyUiHelperFontFamily: FdsToken -export const FdsTypographyUiHelperFontSize: FdsToken -export const FdsTypographyUiHelperLetterSpacing: FdsToken -export const FdsTypographyUiHelperLineHeight: FdsToken -export const FdsTypographyUiHelperFontWeight: FdsToken -export const FdsTypographyUiHelperDisplay: FdsToken -export const FdsTypographyUiIdFontFamily: FdsToken -export const FdsTypographyUiIdFontSize: FdsToken -export const FdsTypographyUiIdLetterSpacing: FdsToken -export const FdsTypographyUiIdLineHeight: FdsToken -export const FdsTypographyUiIdFontWeight: FdsToken -export const FdsTypographyUiIdDisplay: FdsToken -export const FdsTypographyUiLabelFontFamily: FdsToken -export const FdsTypographyUiLabelFontSize: FdsToken -export const FdsTypographyUiLabelLetterSpacing: FdsToken -export const FdsTypographyUiLabelLineHeight: FdsToken -export const FdsTypographyUiLabelFontWeight: FdsToken -export const FdsTypographyUiLabelDisplay: FdsToken -export const FdsTypographyUiPlaceholderFontFamily: FdsToken -export const FdsTypographyUiPlaceholderFontSize: FdsToken -export const FdsTypographyUiPlaceholderLetterSpacing: FdsToken -export const FdsTypographyUiPlaceholderLineHeight: FdsToken -export const FdsTypographyUiPlaceholderFontWeight: FdsToken -export const FdsTypographyUiPlaceholderDisplay: FdsToken -export const FdsTypographyUiTagFontFamily: FdsToken -export const FdsTypographyUiTagFontSize: FdsToken -export const FdsTypographyUiTagLetterSpacing: FdsToken -export const FdsTypographyUiTagLineHeight: FdsToken -export const FdsTypographyUiTagFontWeight: FdsToken -export const FdsTypographyUiTagDisplay: FdsToken -export const FdsColorBrandBlack: FdsColorToken -export const FdsColorBrandWhite: FdsColorToken -export const FdsColorDanger50: FdsColorToken -export const FdsColorDanger100: FdsColorToken -export const FdsColorDanger200: FdsColorToken -export const FdsColorDanger300: FdsColorToken -export const FdsColorDanger400: FdsColorToken -export const FdsColorInteractive50: FdsColorToken -export const FdsColorInteractive100: FdsColorToken -export const FdsColorInteractive200: FdsColorToken -export const FdsColorInteractive300: FdsColorToken -export const FdsColorInteractive400: FdsColorToken -export const FdsColorNeutral50: FdsColorToken -export const FdsColorNeutral100: FdsColorToken -export const FdsColorNeutral200: FdsColorToken -export const FdsColorNeutral300: FdsColorToken -export const FdsColorNeutral400: FdsColorToken -export const FdsColorSuccess50: FdsColorToken -export const FdsColorSuccess100: FdsColorToken -export const FdsColorSuccess200: FdsColorToken -export const FdsColorSuccess300: FdsColorToken -export const FdsColorSuccess400: FdsColorToken -export const FdsColorText1: FdsColorToken -export const FdsColorText300: FdsColorToken -export const FdsColorText600: FdsColorToken -export const FdsColorText1000: FdsColorToken -export const FdsColorWarning50: FdsColorToken -export const FdsColorWarning100: FdsColorToken -export const FdsColorWarning200: FdsColorToken -export const FdsColorWarning300: FdsColorToken -export const FdsColorWarning400: FdsColorToken \ No newline at end of file +export const FdsTokenSize1: FdsSizeToken +export const FdsTokenSize2: FdsSizeToken +export const FdsTokenSize3: FdsSizeToken +export const FdsTokenSize4: FdsSizeToken +export const FdsTokenSize6: FdsSizeToken +export const FdsTokenSize8: FdsSizeToken +export const FdsTokenSize12: FdsSizeToken +export const FdsTokenSize16: FdsSizeToken +export const FdsTokenSize24: FdsSizeToken +export const FdsTokenSize32: FdsSizeToken +export const FdsTokenRadiusCompact: FdsToken +export const FdsTokenRadiusNormal: FdsToken +export const FdsTokenRadiusLarge: FdsToken +export const FdsTokenRadiusRounded: FdsToken +export const FdsTokenStyleElevation100: FdsToken +export const FdsTokenStyleElevation200: FdsToken +export const FdsTokenStyleElevation300: FdsToken +export const FdsTokenStyleElevation400: FdsToken +export const FdsTokenTypographyBodyDefaultFontFamily: FdsToken +export const FdsTokenTypographyBodyDefaultFontSize: FdsToken +export const FdsTokenTypographyBodyDefaultLetterSpacing: FdsToken +export const FdsTokenTypographyBodyDefaultLineHeight: FdsToken +export const FdsTokenTypographyBodyDefaultFontWeight: FdsToken +export const FdsTokenTypographyBodyDefaultDisplay: FdsToken +export const FdsTokenTypographyBodyLargeFontFamily: FdsToken +export const FdsTokenTypographyBodyLargeFontSize: FdsToken +export const FdsTokenTypographyBodyLargeLetterSpacing: FdsToken +export const FdsTokenTypographyBodyLargeLineHeight: FdsToken +export const FdsTokenTypographyBodyLargeFontWeight: FdsToken +export const FdsTokenTypographyBodyLargeDisplay: FdsToken +export const FdsTokenTypographyBodyMicroFontFamily: FdsToken +export const FdsTokenTypographyBodyMicroFontSize: FdsToken +export const FdsTokenTypographyBodyMicroLetterSpacing: FdsToken +export const FdsTokenTypographyBodyMicroLineHeight: FdsToken +export const FdsTokenTypographyBodyMicroFontWeight: FdsToken +export const FdsTokenTypographyBodyMicroDisplay: FdsToken +export const FdsTokenTypographyBodySmallFontFamily: FdsToken +export const FdsTokenTypographyBodySmallFontSize: FdsToken +export const FdsTokenTypographyBodySmallLetterSpacing: FdsToken +export const FdsTokenTypographyBodySmallLineHeight: FdsToken +export const FdsTokenTypographyBodySmallFontWeight: FdsToken +export const FdsTokenTypographyBodySmallDisplay: FdsToken +export const FdsTokenTypographyEmphasisDefaultFontFamily: FdsToken +export const FdsTokenTypographyEmphasisDefaultFontSize: FdsToken +export const FdsTokenTypographyEmphasisDefaultLetterSpacing: FdsToken +export const FdsTokenTypographyEmphasisDefaultLineHeight: FdsToken +export const FdsTokenTypographyEmphasisDefaultFontWeight: FdsToken +export const FdsTokenTypographyEmphasisDefaultDisplay: FdsToken +export const FdsTokenTypographyEmphasisLargeFontFamily: FdsToken +export const FdsTokenTypographyEmphasisLargeFontSize: FdsToken +export const FdsTokenTypographyEmphasisLargeLetterSpacing: FdsToken +export const FdsTokenTypographyEmphasisLargeLineHeight: FdsToken +export const FdsTokenTypographyEmphasisLargeFontWeight: FdsToken +export const FdsTokenTypographyEmphasisLargeDisplay: FdsToken +export const FdsTokenTypographyEmphasisMicroFontFamily: FdsToken +export const FdsTokenTypographyEmphasisMicroFontSize: FdsToken +export const FdsTokenTypographyEmphasisMicroLetterSpacing: FdsToken +export const FdsTokenTypographyEmphasisMicroLineHeight: FdsToken +export const FdsTokenTypographyEmphasisMicroFontWeight: FdsToken +export const FdsTokenTypographyEmphasisMicroDisplay: FdsToken +export const FdsTokenTypographyEmphasisSmallFontFamily: FdsToken +export const FdsTokenTypographyEmphasisSmallFontSize: FdsToken +export const FdsTokenTypographyEmphasisSmallLetterSpacing: FdsToken +export const FdsTokenTypographyEmphasisSmallLineHeight: FdsToken +export const FdsTokenTypographyEmphasisSmallFontWeight: FdsToken +export const FdsTokenTypographyEmphasisSmallDisplay: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading3Display: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading4Display: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading5Display: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading6Display: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading1Display: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2FontFamily: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2FontSize: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2LineHeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2FontWeight: FdsToken +export const FdsTokenTypographyHeadingLargeHeading2Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading1Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading2Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading3Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading4Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading5Display: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6FontFamily: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6FontSize: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6LetterSpacing: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6LineHeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6FontWeight: FdsToken +export const FdsTokenTypographyHeadingSmallHeading6Display: FdsToken +export const FdsTokenTypographyLinkLargeFontFamily: FdsToken +export const FdsTokenTypographyLinkLargeFontSize: FdsToken +export const FdsTokenTypographyLinkLargeLetterSpacing: FdsToken +export const FdsTokenTypographyLinkLargeLineHeight: FdsToken +export const FdsTokenTypographyLinkLargeFontWeight: FdsToken +export const FdsTokenTypographyLinkLargeTextDecoration: FdsToken +export const FdsTokenTypographyLinkLargeDisplay: FdsToken +export const FdsTokenTypographyLinkMicroFontFamily: FdsToken +export const FdsTokenTypographyLinkMicroFontSize: FdsToken +export const FdsTokenTypographyLinkMicroLetterSpacing: FdsToken +export const FdsTokenTypographyLinkMicroLineHeight: FdsToken +export const FdsTokenTypographyLinkMicroFontWeight: FdsToken +export const FdsTokenTypographyLinkMicroTextDecoration: FdsToken +export const FdsTokenTypographyLinkMicroDisplay: FdsToken +export const FdsTokenTypographyLinkSmallFontFamily: FdsToken +export const FdsTokenTypographyLinkSmallFontSize: FdsToken +export const FdsTokenTypographyLinkSmallLetterSpacing: FdsToken +export const FdsTokenTypographyLinkSmallLineHeight: FdsToken +export const FdsTokenTypographyLinkSmallFontWeight: FdsToken +export const FdsTokenTypographyLinkSmallTextDecoration: FdsToken +export const FdsTokenTypographyLinkSmallDisplay: FdsToken +export const FdsTokenTypographyLinkDefaultFontFamily: FdsToken +export const FdsTokenTypographyLinkDefaultFontSize: FdsToken +export const FdsTokenTypographyLinkDefaultLetterSpacing: FdsToken +export const FdsTokenTypographyLinkDefaultLineHeight: FdsToken +export const FdsTokenTypographyLinkDefaultFontWeight: FdsToken +export const FdsTokenTypographyLinkDefaultTextDecoration: FdsToken +export const FdsTokenTypographyLinkDefaultDisplay: FdsToken +export const FdsTokenTypographyUiHelperFontFamily: FdsToken +export const FdsTokenTypographyUiHelperFontSize: FdsToken +export const FdsTokenTypographyUiHelperLetterSpacing: FdsToken +export const FdsTokenTypographyUiHelperLineHeight: FdsToken +export const FdsTokenTypographyUiHelperFontWeight: FdsToken +export const FdsTokenTypographyUiHelperDisplay: FdsToken +export const FdsTokenTypographyUiIdFontFamily: FdsToken +export const FdsTokenTypographyUiIdFontSize: FdsToken +export const FdsTokenTypographyUiIdLetterSpacing: FdsToken +export const FdsTokenTypographyUiIdLineHeight: FdsToken +export const FdsTokenTypographyUiIdFontWeight: FdsToken +export const FdsTokenTypographyUiIdDisplay: FdsToken +export const FdsTokenTypographyUiLabelFontFamily: FdsToken +export const FdsTokenTypographyUiLabelFontSize: FdsToken +export const FdsTokenTypographyUiLabelLetterSpacing: FdsToken +export const FdsTokenTypographyUiLabelLineHeight: FdsToken +export const FdsTokenTypographyUiLabelFontWeight: FdsToken +export const FdsTokenTypographyUiLabelDisplay: FdsToken +export const FdsTokenTypographyUiPlaceholderFontFamily: FdsToken +export const FdsTokenTypographyUiPlaceholderFontSize: FdsToken +export const FdsTokenTypographyUiPlaceholderLetterSpacing: FdsToken +export const FdsTokenTypographyUiPlaceholderLineHeight: FdsToken +export const FdsTokenTypographyUiPlaceholderFontWeight: FdsToken +export const FdsTokenTypographyUiPlaceholderDisplay: FdsToken +export const FdsTokenTypographyUiTagFontFamily: FdsToken +export const FdsTokenTypographyUiTagFontSize: FdsToken +export const FdsTokenTypographyUiTagLetterSpacing: FdsToken +export const FdsTokenTypographyUiTagLineHeight: FdsToken +export const FdsTokenTypographyUiTagFontWeight: FdsToken +export const FdsTokenTypographyUiTagDisplay: FdsToken +export const FdsTokenColorBrandBlack: FdsColorToken +export const FdsTokenColorBrandWhite: FdsColorToken +export const FdsTokenColorDanger50: FdsColorToken +export const FdsTokenColorDanger100: FdsColorToken +export const FdsTokenColorDanger200: FdsColorToken +export const FdsTokenColorDanger300: FdsColorToken +export const FdsTokenColorDanger400: FdsColorToken +export const FdsTokenColorInteractive50: FdsColorToken +export const FdsTokenColorInteractive100: FdsColorToken +export const FdsTokenColorInteractive200: FdsColorToken +export const FdsTokenColorInteractive300: FdsColorToken +export const FdsTokenColorInteractive400: FdsColorToken +export const FdsTokenColorNeutral50: FdsColorToken +export const FdsTokenColorNeutral100: FdsColorToken +export const FdsTokenColorNeutral200: FdsColorToken +export const FdsTokenColorNeutral300: FdsColorToken +export const FdsTokenColorNeutral400: FdsColorToken +export const FdsTokenColorSuccess50: FdsColorToken +export const FdsTokenColorSuccess100: FdsColorToken +export const FdsTokenColorSuccess200: FdsColorToken +export const FdsTokenColorSuccess300: FdsColorToken +export const FdsTokenColorSuccess400: FdsColorToken +export const FdsTokenColorText1: FdsColorToken +export const FdsTokenColorText300: FdsColorToken +export const FdsTokenColorText600: FdsColorToken +export const FdsTokenColorText1000: FdsColorToken +export const FdsTokenColorWarning50: FdsColorToken +export const FdsTokenColorWarning100: FdsColorToken +export const FdsTokenColorWarning200: FdsColorToken +export const FdsTokenColorWarning300: FdsColorToken +export const FdsTokenColorWarning400: FdsColorToken \ No newline at end of file diff --git a/lib/tokens.js b/lib/tokens.js index 145a084..16b12a6 100644 --- a/lib/tokens.js +++ b/lib/tokens.js @@ -1,227 +1,227 @@ -export const FdsSize1 = { name: "fds-size-1", value: "8px" } -export const FdsSize2 = { name: "fds-size-2", value: "16px" } -export const FdsSize3 = { name: "fds-size-3", value: "24px" } -export const FdsSize4 = { name: "fds-size-4", value: "32px" } -export const FdsSize6 = { name: "fds-size-6", value: "48px" } -export const FdsSize8 = { name: "fds-size-8", value: "64px" } -export const FdsSize12 = { name: "fds-size-12", value: "96px" } -export const FdsSize16 = { name: "fds-size-16", value: "128px" } -export const FdsSize24 = { name: "fds-size-24", value: "192px" } -export const FdsSize32 = { name: "fds-size-32", value: "256px" } -export const FdsRadiusCompact = { name: "fds-radius-compact", value: "2px" } -export const FdsRadiusNormal = { name: "fds-radius-normal", value: "4px" } -export const FdsRadiusLarge = { name: "fds-radius-large", value: "8px" } -export const FdsRadiusRounded = { name: "fds-radius-rounded", value: "1000px" } -export const FdsStyleElevation100 = { name: "fds-style-elevation-100", value: "0px 1px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)" } -export const FdsStyleElevation200 = { name: "fds-style-elevation-200", value: "0px 6px 6px 0px rgba(0, 0, 0, 0.23), 0px 3px 6px 0px rgba(0, 0, 0, 0.16)" } -export const FdsStyleElevation300 = { name: "fds-style-elevation-300", value: "0px 6px 12px 0px rgba(0, 0, 0, 0.23), 0px 20px 20px 0px rgba(0, 0, 0, 0.19)" } -export const FdsStyleElevation400 = { name: "fds-style-elevation-400", value: "0px 20px 20px 0px rgba(0, 0, 0, 0.22), 0px 50px 100px 0px rgba(0, 0, 0, 0.25)" } -export const FdsTypographyBodyDefaultFontFamily = { name: "fds-typography-body-default-font-family", value: "'Public Sans'" } -export const FdsTypographyBodyDefaultFontSize = { name: "fds-typography-body-default-font-size", value: "16px" } -export const FdsTypographyBodyDefaultLetterSpacing = { name: "fds-typography-body-default-letter-spacing", value: "0px" } -export const FdsTypographyBodyDefaultLineHeight = { name: "fds-typography-body-default-line-height", value: "150%" } -export const FdsTypographyBodyDefaultFontWeight = { name: "fds-typography-body-default-font-weight", value: "400" } -export const FdsTypographyBodyDefaultDisplay = { name: "fds-typography-body-default-display", value: "inline-block" } -export const FdsTypographyBodyLargeFontFamily = { name: "fds-typography-body-large-font-family", value: "'Public Sans'" } -export const FdsTypographyBodyLargeFontSize = { name: "fds-typography-body-large-font-size", value: "18px" } -export const FdsTypographyBodyLargeLetterSpacing = { name: "fds-typography-body-large-letter-spacing", value: "0px" } -export const FdsTypographyBodyLargeLineHeight = { name: "fds-typography-body-large-line-height", value: "150%" } -export const FdsTypographyBodyLargeFontWeight = { name: "fds-typography-body-large-font-weight", value: "400" } -export const FdsTypographyBodyLargeDisplay = { name: "fds-typography-body-large-display", value: "inline-block" } -export const FdsTypographyBodyMicroFontFamily = { name: "fds-typography-body-micro-font-family", value: "'Public Sans'" } -export const FdsTypographyBodyMicroFontSize = { name: "fds-typography-body-micro-font-size", value: "12px" } -export const FdsTypographyBodyMicroLetterSpacing = { name: "fds-typography-body-micro-letter-spacing", value: "0px" } -export const FdsTypographyBodyMicroLineHeight = { name: "fds-typography-body-micro-line-height", value: "150%" } -export const FdsTypographyBodyMicroFontWeight = { name: "fds-typography-body-micro-font-weight", value: "400" } -export const FdsTypographyBodyMicroDisplay = { name: "fds-typography-body-micro-display", value: "inline-block" } -export const FdsTypographyBodySmallFontFamily = { name: "fds-typography-body-small-font-family", value: "'Public Sans'" } -export const FdsTypographyBodySmallFontSize = { name: "fds-typography-body-small-font-size", value: "14px" } -export const FdsTypographyBodySmallLetterSpacing = { name: "fds-typography-body-small-letter-spacing", value: "0px" } -export const FdsTypographyBodySmallLineHeight = { name: "fds-typography-body-small-line-height", value: "150%" } -export const FdsTypographyBodySmallFontWeight = { name: "fds-typography-body-small-font-weight", value: "400" } -export const FdsTypographyBodySmallDisplay = { name: "fds-typography-body-small-display", value: "inline-block" } -export const FdsTypographyEmphasisDefaultFontFamily = { name: "fds-typography-emphasis-default-font-family", value: "'Public Sans'" } -export const FdsTypographyEmphasisDefaultFontSize = { name: "fds-typography-emphasis-default-font-size", value: "16px" } -export const FdsTypographyEmphasisDefaultLetterSpacing = { name: "fds-typography-emphasis-default-letter-spacing", value: "0px" } -export const FdsTypographyEmphasisDefaultLineHeight = { name: "fds-typography-emphasis-default-line-height", value: "150%" } -export const FdsTypographyEmphasisDefaultFontWeight = { name: "fds-typography-emphasis-default-font-weight", value: "700" } -export const FdsTypographyEmphasisDefaultDisplay = { name: "fds-typography-emphasis-default-display", value: "inline-block" } -export const FdsTypographyEmphasisLargeFontFamily = { name: "fds-typography-emphasis-large-font-family", value: "'Public Sans'" } -export const FdsTypographyEmphasisLargeFontSize = { name: "fds-typography-emphasis-large-font-size", value: "18px" } -export const FdsTypographyEmphasisLargeLetterSpacing = { name: "fds-typography-emphasis-large-letter-spacing", value: "0px" } -export const FdsTypographyEmphasisLargeLineHeight = { name: "fds-typography-emphasis-large-line-height", value: "150%" } -export const FdsTypographyEmphasisLargeFontWeight = { name: "fds-typography-emphasis-large-font-weight", value: "700" } -export const FdsTypographyEmphasisLargeDisplay = { name: "fds-typography-emphasis-large-display", value: "inline-block" } -export const FdsTypographyEmphasisMicroFontFamily = { name: "fds-typography-emphasis-micro-font-family", value: "'Public Sans'" } -export const FdsTypographyEmphasisMicroFontSize = { name: "fds-typography-emphasis-micro-font-size", value: "12px" } -export const FdsTypographyEmphasisMicroLetterSpacing = { name: "fds-typography-emphasis-micro-letter-spacing", value: "0px" } -export const FdsTypographyEmphasisMicroLineHeight = { name: "fds-typography-emphasis-micro-line-height", value: "150%" } -export const FdsTypographyEmphasisMicroFontWeight = { name: "fds-typography-emphasis-micro-font-weight", value: "700" } -export const FdsTypographyEmphasisMicroDisplay = { name: "fds-typography-emphasis-micro-display", value: "inline-block" } -export const FdsTypographyEmphasisSmallFontFamily = { name: "fds-typography-emphasis-small-font-family", value: "'Public Sans'" } -export const FdsTypographyEmphasisSmallFontSize = { name: "fds-typography-emphasis-small-font-size", value: "14px" } -export const FdsTypographyEmphasisSmallLetterSpacing = { name: "fds-typography-emphasis-small-letter-spacing", value: "0px" } -export const FdsTypographyEmphasisSmallLineHeight = { name: "fds-typography-emphasis-small-line-height", value: "150%" } -export const FdsTypographyEmphasisSmallFontWeight = { name: "fds-typography-emphasis-small-font-weight", value: "700" } -export const FdsTypographyEmphasisSmallDisplay = { name: "fds-typography-emphasis-small-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading3FontFamily = { name: "fds-typography-heading-large-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading3FontSize = { name: "fds-typography-heading-large-heading-3-font-size", value: "40px" } -export const FdsTypographyHeadingLargeHeading3LetterSpacing = { name: "fds-typography-heading-large-heading-3-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading3LineHeight = { name: "fds-typography-heading-large-heading-3-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading3FontWeight = { name: "fds-typography-heading-large-heading-3-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading3Display = { name: "fds-typography-heading-large-heading-3-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading4FontFamily = { name: "fds-typography-heading-large-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading4FontSize = { name: "fds-typography-heading-large-heading-4-font-size", value: "32px" } -export const FdsTypographyHeadingLargeHeading4LetterSpacing = { name: "fds-typography-heading-large-heading-4-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading4LineHeight = { name: "fds-typography-heading-large-heading-4-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading4FontWeight = { name: "fds-typography-heading-large-heading-4-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading4Display = { name: "fds-typography-heading-large-heading-4-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading5FontFamily = { name: "fds-typography-heading-large-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading5FontSize = { name: "fds-typography-heading-large-heading-5-font-size", value: "28px" } -export const FdsTypographyHeadingLargeHeading5LetterSpacing = { name: "fds-typography-heading-large-heading-5-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading5LineHeight = { name: "fds-typography-heading-large-heading-5-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading5FontWeight = { name: "fds-typography-heading-large-heading-5-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading5Display = { name: "fds-typography-heading-large-heading-5-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading6FontFamily = { name: "fds-typography-heading-large-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading6FontSize = { name: "fds-typography-heading-large-heading-6-font-size", value: "20px" } -export const FdsTypographyHeadingLargeHeading6LetterSpacing = { name: "fds-typography-heading-large-heading-6-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading6LineHeight = { name: "fds-typography-heading-large-heading-6-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading6FontWeight = { name: "fds-typography-heading-large-heading-6-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading6Display = { name: "fds-typography-heading-large-heading-6-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading1FontFamily = { name: "fds-typography-heading-large-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading1FontSize = { name: "fds-typography-heading-large-heading-1-font-size", value: "64px" } -export const FdsTypographyHeadingLargeHeading1LetterSpacing = { name: "fds-typography-heading-large-heading-1-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading1LineHeight = { name: "fds-typography-heading-large-heading-1-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading1FontWeight = { name: "fds-typography-heading-large-heading-1-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading1Display = { name: "fds-typography-heading-large-heading-1-display", value: "inline-block" } -export const FdsTypographyHeadingLargeHeading2FontFamily = { name: "fds-typography-heading-large-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingLargeHeading2FontSize = { name: "fds-typography-heading-large-heading-2-font-size", value: "48px" } -export const FdsTypographyHeadingLargeHeading2LetterSpacing = { name: "fds-typography-heading-large-heading-2-letter-spacing", value: "0px" } -export const FdsTypographyHeadingLargeHeading2LineHeight = { name: "fds-typography-heading-large-heading-2-line-height", value: "110%" } -export const FdsTypographyHeadingLargeHeading2FontWeight = { name: "fds-typography-heading-large-heading-2-font-weight", value: "700" } -export const FdsTypographyHeadingLargeHeading2Display = { name: "fds-typography-heading-large-heading-2-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading1FontFamily = { name: "fds-typography-heading-small-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading1FontSize = { name: "fds-typography-heading-small-heading-1-font-size", value: "42px" } -export const FdsTypographyHeadingSmallHeading1LetterSpacing = { name: "fds-typography-heading-small-heading-1-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading1LineHeight = { name: "fds-typography-heading-small-heading-1-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading1FontWeight = { name: "fds-typography-heading-small-heading-1-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading1Display = { name: "fds-typography-heading-small-heading-1-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading2FontFamily = { name: "fds-typography-heading-small-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading2FontSize = { name: "fds-typography-heading-small-heading-2-font-size", value: "32px" } -export const FdsTypographyHeadingSmallHeading2LetterSpacing = { name: "fds-typography-heading-small-heading-2-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading2LineHeight = { name: "fds-typography-heading-small-heading-2-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading2FontWeight = { name: "fds-typography-heading-small-heading-2-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading2Display = { name: "fds-typography-heading-small-heading-2-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading3FontFamily = { name: "fds-typography-heading-small-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading3FontSize = { name: "fds-typography-heading-small-heading-3-font-size", value: "28px" } -export const FdsTypographyHeadingSmallHeading3LetterSpacing = { name: "fds-typography-heading-small-heading-3-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading3LineHeight = { name: "fds-typography-heading-small-heading-3-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading3FontWeight = { name: "fds-typography-heading-small-heading-3-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading3Display = { name: "fds-typography-heading-small-heading-3-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading4FontFamily = { name: "fds-typography-heading-small-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading4FontSize = { name: "fds-typography-heading-small-heading-4-font-size", value: "24px" } -export const FdsTypographyHeadingSmallHeading4LetterSpacing = { name: "fds-typography-heading-small-heading-4-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading4LineHeight = { name: "fds-typography-heading-small-heading-4-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading4FontWeight = { name: "fds-typography-heading-small-heading-4-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading4Display = { name: "fds-typography-heading-small-heading-4-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading5FontFamily = { name: "fds-typography-heading-small-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading5FontSize = { name: "fds-typography-heading-small-heading-5-font-size", value: "18px" } -export const FdsTypographyHeadingSmallHeading5LetterSpacing = { name: "fds-typography-heading-small-heading-5-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading5LineHeight = { name: "fds-typography-heading-small-heading-5-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading5FontWeight = { name: "fds-typography-heading-small-heading-5-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading5Display = { name: "fds-typography-heading-small-heading-5-display", value: "inline-block" } -export const FdsTypographyHeadingSmallHeading6FontFamily = { name: "fds-typography-heading-small-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyHeadingSmallHeading6FontSize = { name: "fds-typography-heading-small-heading-6-font-size", value: "16px" } -export const FdsTypographyHeadingSmallHeading6LetterSpacing = { name: "fds-typography-heading-small-heading-6-letter-spacing", value: "0px" } -export const FdsTypographyHeadingSmallHeading6LineHeight = { name: "fds-typography-heading-small-heading-6-line-height", value: "110%" } -export const FdsTypographyHeadingSmallHeading6FontWeight = { name: "fds-typography-heading-small-heading-6-font-weight", value: "700" } -export const FdsTypographyHeadingSmallHeading6Display = { name: "fds-typography-heading-small-heading-6-display", value: "inline-block" } -export const FdsTypographyLinkLargeFontFamily = { name: "fds-typography-link-large-font-family", value: "'Public Sans'" } -export const FdsTypographyLinkLargeFontSize = { name: "fds-typography-link-large-font-size", value: "18px" } -export const FdsTypographyLinkLargeLetterSpacing = { name: "fds-typography-link-large-letter-spacing", value: "0px" } -export const FdsTypographyLinkLargeLineHeight = { name: "fds-typography-link-large-line-height", value: "150%" } -export const FdsTypographyLinkLargeFontWeight = { name: "fds-typography-link-large-font-weight", value: "400" } -export const FdsTypographyLinkLargeTextDecoration = { name: "fds-typography-link-large-text-decoration", value: "underline" } -export const FdsTypographyLinkLargeDisplay = { name: "fds-typography-link-large-display", value: "inline-block" } -export const FdsTypographyLinkMicroFontFamily = { name: "fds-typography-link-micro-font-family", value: "'Public Sans'" } -export const FdsTypographyLinkMicroFontSize = { name: "fds-typography-link-micro-font-size", value: "12px" } -export const FdsTypographyLinkMicroLetterSpacing = { name: "fds-typography-link-micro-letter-spacing", value: "0px" } -export const FdsTypographyLinkMicroLineHeight = { name: "fds-typography-link-micro-line-height", value: "150%" } -export const FdsTypographyLinkMicroFontWeight = { name: "fds-typography-link-micro-font-weight", value: "400" } -export const FdsTypographyLinkMicroTextDecoration = { name: "fds-typography-link-micro-text-decoration", value: "underline" } -export const FdsTypographyLinkMicroDisplay = { name: "fds-typography-link-micro-display", value: "inline-block" } -export const FdsTypographyLinkSmallFontFamily = { name: "fds-typography-link-small-font-family", value: "'Public Sans'" } -export const FdsTypographyLinkSmallFontSize = { name: "fds-typography-link-small-font-size", value: "14px" } -export const FdsTypographyLinkSmallLetterSpacing = { name: "fds-typography-link-small-letter-spacing", value: "0px" } -export const FdsTypographyLinkSmallLineHeight = { name: "fds-typography-link-small-line-height", value: "150%" } -export const FdsTypographyLinkSmallFontWeight = { name: "fds-typography-link-small-font-weight", value: "400" } -export const FdsTypographyLinkSmallTextDecoration = { name: "fds-typography-link-small-text-decoration", value: "underline" } -export const FdsTypographyLinkSmallDisplay = { name: "fds-typography-link-small-display", value: "inline-block" } -export const FdsTypographyLinkDefaultFontFamily = { name: "fds-typography-link-default-font-family", value: "'Public Sans'" } -export const FdsTypographyLinkDefaultFontSize = { name: "fds-typography-link-default-font-size", value: "16px" } -export const FdsTypographyLinkDefaultLetterSpacing = { name: "fds-typography-link-default-letter-spacing", value: "0px" } -export const FdsTypographyLinkDefaultLineHeight = { name: "fds-typography-link-default-line-height", value: "150%" } -export const FdsTypographyLinkDefaultFontWeight = { name: "fds-typography-link-default-font-weight", value: "400" } -export const FdsTypographyLinkDefaultTextDecoration = { name: "fds-typography-link-default-text-decoration", value: "underline" } -export const FdsTypographyLinkDefaultDisplay = { name: "fds-typography-link-default-display", value: "inline-block" } -export const FdsTypographyUiHelperFontFamily = { name: "fds-typography-ui-helper-font-family", value: "'Public Sans', 'PublicSans-Regular'" } -export const FdsTypographyUiHelperFontSize = { name: "fds-typography-ui-helper-font-size", value: "15px" } -export const FdsTypographyUiHelperLetterSpacing = { name: "fds-typography-ui-helper-letter-spacing", value: "0px" } -export const FdsTypographyUiHelperLineHeight = { name: "fds-typography-ui-helper-line-height", value: "100%" } -export const FdsTypographyUiHelperFontWeight = { name: "fds-typography-ui-helper-font-weight", value: "400" } -export const FdsTypographyUiHelperDisplay = { name: "fds-typography-ui-helper-display", value: "inline-block" } -export const FdsTypographyUiIdFontFamily = { name: "fds-typography-ui-id-font-family", value: "'Roboto Mono'" } -export const FdsTypographyUiIdFontSize = { name: "fds-typography-ui-id-font-size", value: "13px" } -export const FdsTypographyUiIdLetterSpacing = { name: "fds-typography-ui-id-letter-spacing", value: "0px" } -export const FdsTypographyUiIdLineHeight = { name: "fds-typography-ui-id-line-height", value: "100%" } -export const FdsTypographyUiIdFontWeight = { name: "fds-typography-ui-id-font-weight", value: "700" } -export const FdsTypographyUiIdDisplay = { name: "fds-typography-ui-id-display", value: "inline-block" } -export const FdsTypographyUiLabelFontFamily = { name: "fds-typography-ui-label-font-family", value: "'Public Sans', 'PublicSans-Medium'" } -export const FdsTypographyUiLabelFontSize = { name: "fds-typography-ui-label-font-size", value: "16px" } -export const FdsTypographyUiLabelLetterSpacing = { name: "fds-typography-ui-label-letter-spacing", value: "0px" } -export const FdsTypographyUiLabelLineHeight = { name: "fds-typography-ui-label-line-height", value: "22px" } -export const FdsTypographyUiLabelFontWeight = { name: "fds-typography-ui-label-font-weight", value: "500" } -export const FdsTypographyUiLabelDisplay = { name: "fds-typography-ui-label-display", value: "inline-block" } -export const FdsTypographyUiPlaceholderFontFamily = { name: "fds-typography-ui-placeholder-font-family", value: "'Public Sans', 'PublicSans-Medium'" } -export const FdsTypographyUiPlaceholderFontSize = { name: "fds-typography-ui-placeholder-font-size", value: "16px" } -export const FdsTypographyUiPlaceholderLetterSpacing = { name: "fds-typography-ui-placeholder-letter-spacing", value: "0px" } -export const FdsTypographyUiPlaceholderLineHeight = { name: "fds-typography-ui-placeholder-line-height", value: "100%" } -export const FdsTypographyUiPlaceholderFontWeight = { name: "fds-typography-ui-placeholder-font-weight", value: "500" } -export const FdsTypographyUiPlaceholderDisplay = { name: "fds-typography-ui-placeholder-display", value: "inline-block" } -export const FdsTypographyUiTagFontFamily = { name: "fds-typography-ui-tag-font-family", value: "'Public Sans', 'PublicSans-Bold'" } -export const FdsTypographyUiTagFontSize = { name: "fds-typography-ui-tag-font-size", value: "16px" } -export const FdsTypographyUiTagLetterSpacing = { name: "fds-typography-ui-tag-letter-spacing", value: "0px" } -export const FdsTypographyUiTagLineHeight = { name: "fds-typography-ui-tag-line-height", value: "100%" } -export const FdsTypographyUiTagFontWeight = { name: "fds-typography-ui-tag-font-weight", value: "700" } -export const FdsTypographyUiTagDisplay = { name: "fds-typography-ui-tag-display", value: "inline-block" } -export const FdsColorBrandBlack = { name: "fds-color-brand-black", value: "#000000" } -export const FdsColorBrandWhite = { name: "fds-color-brand-white", value: "#ffffff" } -export const FdsColorDanger50 = { name: "fds-color-danger-50", value: "#FFF0ED" } -export const FdsColorDanger100 = { name: "fds-color-danger-100", value: "#ff9b87" } -export const FdsColorDanger200 = { name: "fds-color-danger-200", value: "#e55636" } -export const FdsColorDanger300 = { name: "fds-color-danger-300", value: "#b40000" } -export const FdsColorDanger400 = { name: "fds-color-danger-400", value: "#720000" } -export const FdsColorInteractive50 = { name: "fds-color-interactive-50", value: "#EFF8FF" } -export const FdsColorInteractive100 = { name: "fds-color-interactive-100", value: "#90cefe" } -export const FdsColorInteractive200 = { name: "fds-color-interactive-200", value: "#1777f8" } -export const FdsColorInteractive300 = { name: "fds-color-interactive-300", value: "#0034ac" } -export const FdsColorInteractive400 = { name: "fds-color-interactive-400", value: "#001c5b" } -export const FdsColorNeutral50 = { name: "fds-color-neutral-50", value: "#F6F6F6" } -export const FdsColorNeutral100 = { name: "fds-color-neutral-100", value: "#cdcdd7" } -export const FdsColorNeutral200 = { name: "fds-color-neutral-200", value: "#9696aa" } -export const FdsColorNeutral300 = { name: "fds-color-neutral-300", value: "#505064" } -export const FdsColorNeutral400 = { name: "fds-color-neutral-400", value: "#2c2c44" } -export const FdsColorSuccess50 = { name: "fds-color-success-50", value: "#EAFFF8" } -export const FdsColorSuccess100 = { name: "fds-color-success-100", value: "#82e8c3" } -export const FdsColorSuccess200 = { name: "fds-color-success-200", value: "#25a794" } -export const FdsColorSuccess300 = { name: "fds-color-success-300", value: "#005f61" } -export const FdsColorSuccess400 = { name: "fds-color-success-400", value: "#004042" } -export const FdsColorText1 = { name: "fds-color-text-1", value: "#ffffff" } -export const FdsColorText300 = { name: "fds-color-text-300", value: "#9696aa" } -export const FdsColorText600 = { name: "fds-color-text-600", value: "#505064" } -export const FdsColorText1000 = { name: "fds-color-text-1000", value: "#000000" } -export const FdsColorWarning50 = { name: "fds-color-warning-50", value: "#FFFADB" } -export const FdsColorWarning100 = { name: "fds-color-warning-100", value: "#ffe37f" } -export const FdsColorWarning200 = { name: "fds-color-warning-200", value: "#eec200" } -export const FdsColorWarning300 = { name: "fds-color-warning-300", value: "#b47324" } -export const FdsColorWarning400 = { name: "fds-color-warning-400", value: "#6c3e05" } \ No newline at end of file +export const FdsTokenSize1 = { name: "fds-size-1", value: "8px" } +export const FdsTokenSize2 = { name: "fds-size-2", value: "16px" } +export const FdsTokenSize3 = { name: "fds-size-3", value: "24px" } +export const FdsTokenSize4 = { name: "fds-size-4", value: "32px" } +export const FdsTokenSize6 = { name: "fds-size-6", value: "48px" } +export const FdsTokenSize8 = { name: "fds-size-8", value: "64px" } +export const FdsTokenSize12 = { name: "fds-size-12", value: "96px" } +export const FdsTokenSize16 = { name: "fds-size-16", value: "128px" } +export const FdsTokenSize24 = { name: "fds-size-24", value: "192px" } +export const FdsTokenSize32 = { name: "fds-size-32", value: "256px" } +export const FdsTokenRadiusCompact = { name: "fds-radius-compact", value: "2px" } +export const FdsTokenRadiusNormal = { name: "fds-radius-normal", value: "4px" } +export const FdsTokenRadiusLarge = { name: "fds-radius-large", value: "8px" } +export const FdsTokenRadiusRounded = { name: "fds-radius-rounded", value: "1000px" } +export const FdsTokenStyleElevation100 = { name: "fds-style-elevation-100", value: "0px 1px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)" } +export const FdsTokenStyleElevation200 = { name: "fds-style-elevation-200", value: "0px 6px 6px 0px rgba(0, 0, 0, 0.23), 0px 3px 6px 0px rgba(0, 0, 0, 0.16)" } +export const FdsTokenStyleElevation300 = { name: "fds-style-elevation-300", value: "0px 6px 12px 0px rgba(0, 0, 0, 0.23), 0px 20px 20px 0px rgba(0, 0, 0, 0.19)" } +export const FdsTokenStyleElevation400 = { name: "fds-style-elevation-400", value: "0px 20px 20px 0px rgba(0, 0, 0, 0.22), 0px 50px 100px 0px rgba(0, 0, 0, 0.25)" } +export const FdsTokenTypographyBodyDefaultFontFamily = { name: "fds-typography-body-default-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyBodyDefaultFontSize = { name: "fds-typography-body-default-font-size", value: "16px" } +export const FdsTokenTypographyBodyDefaultLetterSpacing = { name: "fds-typography-body-default-letter-spacing", value: "0px" } +export const FdsTokenTypographyBodyDefaultLineHeight = { name: "fds-typography-body-default-line-height", value: "150%" } +export const FdsTokenTypographyBodyDefaultFontWeight = { name: "fds-typography-body-default-font-weight", value: "400" } +export const FdsTokenTypographyBodyDefaultDisplay = { name: "fds-typography-body-default-display", value: "inline-block" } +export const FdsTokenTypographyBodyLargeFontFamily = { name: "fds-typography-body-large-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyBodyLargeFontSize = { name: "fds-typography-body-large-font-size", value: "18px" } +export const FdsTokenTypographyBodyLargeLetterSpacing = { name: "fds-typography-body-large-letter-spacing", value: "0px" } +export const FdsTokenTypographyBodyLargeLineHeight = { name: "fds-typography-body-large-line-height", value: "150%" } +export const FdsTokenTypographyBodyLargeFontWeight = { name: "fds-typography-body-large-font-weight", value: "400" } +export const FdsTokenTypographyBodyLargeDisplay = { name: "fds-typography-body-large-display", value: "inline-block" } +export const FdsTokenTypographyBodyMicroFontFamily = { name: "fds-typography-body-micro-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyBodyMicroFontSize = { name: "fds-typography-body-micro-font-size", value: "12px" } +export const FdsTokenTypographyBodyMicroLetterSpacing = { name: "fds-typography-body-micro-letter-spacing", value: "0px" } +export const FdsTokenTypographyBodyMicroLineHeight = { name: "fds-typography-body-micro-line-height", value: "150%" } +export const FdsTokenTypographyBodyMicroFontWeight = { name: "fds-typography-body-micro-font-weight", value: "400" } +export const FdsTokenTypographyBodyMicroDisplay = { name: "fds-typography-body-micro-display", value: "inline-block" } +export const FdsTokenTypographyBodySmallFontFamily = { name: "fds-typography-body-small-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyBodySmallFontSize = { name: "fds-typography-body-small-font-size", value: "14px" } +export const FdsTokenTypographyBodySmallLetterSpacing = { name: "fds-typography-body-small-letter-spacing", value: "0px" } +export const FdsTokenTypographyBodySmallLineHeight = { name: "fds-typography-body-small-line-height", value: "150%" } +export const FdsTokenTypographyBodySmallFontWeight = { name: "fds-typography-body-small-font-weight", value: "400" } +export const FdsTokenTypographyBodySmallDisplay = { name: "fds-typography-body-small-display", value: "inline-block" } +export const FdsTokenTypographyEmphasisDefaultFontFamily = { name: "fds-typography-emphasis-default-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyEmphasisDefaultFontSize = { name: "fds-typography-emphasis-default-font-size", value: "16px" } +export const FdsTokenTypographyEmphasisDefaultLetterSpacing = { name: "fds-typography-emphasis-default-letter-spacing", value: "0px" } +export const FdsTokenTypographyEmphasisDefaultLineHeight = { name: "fds-typography-emphasis-default-line-height", value: "150%" } +export const FdsTokenTypographyEmphasisDefaultFontWeight = { name: "fds-typography-emphasis-default-font-weight", value: "700" } +export const FdsTokenTypographyEmphasisDefaultDisplay = { name: "fds-typography-emphasis-default-display", value: "inline-block" } +export const FdsTokenTypographyEmphasisLargeFontFamily = { name: "fds-typography-emphasis-large-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyEmphasisLargeFontSize = { name: "fds-typography-emphasis-large-font-size", value: "18px" } +export const FdsTokenTypographyEmphasisLargeLetterSpacing = { name: "fds-typography-emphasis-large-letter-spacing", value: "0px" } +export const FdsTokenTypographyEmphasisLargeLineHeight = { name: "fds-typography-emphasis-large-line-height", value: "150%" } +export const FdsTokenTypographyEmphasisLargeFontWeight = { name: "fds-typography-emphasis-large-font-weight", value: "700" } +export const FdsTokenTypographyEmphasisLargeDisplay = { name: "fds-typography-emphasis-large-display", value: "inline-block" } +export const FdsTokenTypographyEmphasisMicroFontFamily = { name: "fds-typography-emphasis-micro-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyEmphasisMicroFontSize = { name: "fds-typography-emphasis-micro-font-size", value: "12px" } +export const FdsTokenTypographyEmphasisMicroLetterSpacing = { name: "fds-typography-emphasis-micro-letter-spacing", value: "0px" } +export const FdsTokenTypographyEmphasisMicroLineHeight = { name: "fds-typography-emphasis-micro-line-height", value: "150%" } +export const FdsTokenTypographyEmphasisMicroFontWeight = { name: "fds-typography-emphasis-micro-font-weight", value: "700" } +export const FdsTokenTypographyEmphasisMicroDisplay = { name: "fds-typography-emphasis-micro-display", value: "inline-block" } +export const FdsTokenTypographyEmphasisSmallFontFamily = { name: "fds-typography-emphasis-small-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyEmphasisSmallFontSize = { name: "fds-typography-emphasis-small-font-size", value: "14px" } +export const FdsTokenTypographyEmphasisSmallLetterSpacing = { name: "fds-typography-emphasis-small-letter-spacing", value: "0px" } +export const FdsTokenTypographyEmphasisSmallLineHeight = { name: "fds-typography-emphasis-small-line-height", value: "150%" } +export const FdsTokenTypographyEmphasisSmallFontWeight = { name: "fds-typography-emphasis-small-font-weight", value: "700" } +export const FdsTokenTypographyEmphasisSmallDisplay = { name: "fds-typography-emphasis-small-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading3FontFamily = { name: "fds-typography-heading-large-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading3FontSize = { name: "fds-typography-heading-large-heading-3-font-size", value: "40px" } +export const FdsTokenTypographyHeadingLargeHeading3LetterSpacing = { name: "fds-typography-heading-large-heading-3-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading3LineHeight = { name: "fds-typography-heading-large-heading-3-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading3FontWeight = { name: "fds-typography-heading-large-heading-3-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading3Display = { name: "fds-typography-heading-large-heading-3-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading4FontFamily = { name: "fds-typography-heading-large-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading4FontSize = { name: "fds-typography-heading-large-heading-4-font-size", value: "32px" } +export const FdsTokenTypographyHeadingLargeHeading4LetterSpacing = { name: "fds-typography-heading-large-heading-4-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading4LineHeight = { name: "fds-typography-heading-large-heading-4-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading4FontWeight = { name: "fds-typography-heading-large-heading-4-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading4Display = { name: "fds-typography-heading-large-heading-4-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading5FontFamily = { name: "fds-typography-heading-large-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading5FontSize = { name: "fds-typography-heading-large-heading-5-font-size", value: "28px" } +export const FdsTokenTypographyHeadingLargeHeading5LetterSpacing = { name: "fds-typography-heading-large-heading-5-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading5LineHeight = { name: "fds-typography-heading-large-heading-5-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading5FontWeight = { name: "fds-typography-heading-large-heading-5-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading5Display = { name: "fds-typography-heading-large-heading-5-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading6FontFamily = { name: "fds-typography-heading-large-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading6FontSize = { name: "fds-typography-heading-large-heading-6-font-size", value: "20px" } +export const FdsTokenTypographyHeadingLargeHeading6LetterSpacing = { name: "fds-typography-heading-large-heading-6-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading6LineHeight = { name: "fds-typography-heading-large-heading-6-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading6FontWeight = { name: "fds-typography-heading-large-heading-6-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading6Display = { name: "fds-typography-heading-large-heading-6-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading1FontFamily = { name: "fds-typography-heading-large-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading1FontSize = { name: "fds-typography-heading-large-heading-1-font-size", value: "64px" } +export const FdsTokenTypographyHeadingLargeHeading1LetterSpacing = { name: "fds-typography-heading-large-heading-1-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading1LineHeight = { name: "fds-typography-heading-large-heading-1-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading1FontWeight = { name: "fds-typography-heading-large-heading-1-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading1Display = { name: "fds-typography-heading-large-heading-1-display", value: "inline-block" } +export const FdsTokenTypographyHeadingLargeHeading2FontFamily = { name: "fds-typography-heading-large-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingLargeHeading2FontSize = { name: "fds-typography-heading-large-heading-2-font-size", value: "48px" } +export const FdsTokenTypographyHeadingLargeHeading2LetterSpacing = { name: "fds-typography-heading-large-heading-2-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingLargeHeading2LineHeight = { name: "fds-typography-heading-large-heading-2-line-height", value: "110%" } +export const FdsTokenTypographyHeadingLargeHeading2FontWeight = { name: "fds-typography-heading-large-heading-2-font-weight", value: "700" } +export const FdsTokenTypographyHeadingLargeHeading2Display = { name: "fds-typography-heading-large-heading-2-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading1FontFamily = { name: "fds-typography-heading-small-heading-1-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading1FontSize = { name: "fds-typography-heading-small-heading-1-font-size", value: "42px" } +export const FdsTokenTypographyHeadingSmallHeading1LetterSpacing = { name: "fds-typography-heading-small-heading-1-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading1LineHeight = { name: "fds-typography-heading-small-heading-1-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading1FontWeight = { name: "fds-typography-heading-small-heading-1-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading1Display = { name: "fds-typography-heading-small-heading-1-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading2FontFamily = { name: "fds-typography-heading-small-heading-2-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading2FontSize = { name: "fds-typography-heading-small-heading-2-font-size", value: "32px" } +export const FdsTokenTypographyHeadingSmallHeading2LetterSpacing = { name: "fds-typography-heading-small-heading-2-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading2LineHeight = { name: "fds-typography-heading-small-heading-2-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading2FontWeight = { name: "fds-typography-heading-small-heading-2-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading2Display = { name: "fds-typography-heading-small-heading-2-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading3FontFamily = { name: "fds-typography-heading-small-heading-3-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading3FontSize = { name: "fds-typography-heading-small-heading-3-font-size", value: "28px" } +export const FdsTokenTypographyHeadingSmallHeading3LetterSpacing = { name: "fds-typography-heading-small-heading-3-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading3LineHeight = { name: "fds-typography-heading-small-heading-3-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading3FontWeight = { name: "fds-typography-heading-small-heading-3-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading3Display = { name: "fds-typography-heading-small-heading-3-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading4FontFamily = { name: "fds-typography-heading-small-heading-4-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading4FontSize = { name: "fds-typography-heading-small-heading-4-font-size", value: "24px" } +export const FdsTokenTypographyHeadingSmallHeading4LetterSpacing = { name: "fds-typography-heading-small-heading-4-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading4LineHeight = { name: "fds-typography-heading-small-heading-4-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading4FontWeight = { name: "fds-typography-heading-small-heading-4-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading4Display = { name: "fds-typography-heading-small-heading-4-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading5FontFamily = { name: "fds-typography-heading-small-heading-5-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading5FontSize = { name: "fds-typography-heading-small-heading-5-font-size", value: "18px" } +export const FdsTokenTypographyHeadingSmallHeading5LetterSpacing = { name: "fds-typography-heading-small-heading-5-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading5LineHeight = { name: "fds-typography-heading-small-heading-5-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading5FontWeight = { name: "fds-typography-heading-small-heading-5-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading5Display = { name: "fds-typography-heading-small-heading-5-display", value: "inline-block" } +export const FdsTokenTypographyHeadingSmallHeading6FontFamily = { name: "fds-typography-heading-small-heading-6-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyHeadingSmallHeading6FontSize = { name: "fds-typography-heading-small-heading-6-font-size", value: "16px" } +export const FdsTokenTypographyHeadingSmallHeading6LetterSpacing = { name: "fds-typography-heading-small-heading-6-letter-spacing", value: "0px" } +export const FdsTokenTypographyHeadingSmallHeading6LineHeight = { name: "fds-typography-heading-small-heading-6-line-height", value: "110%" } +export const FdsTokenTypographyHeadingSmallHeading6FontWeight = { name: "fds-typography-heading-small-heading-6-font-weight", value: "700" } +export const FdsTokenTypographyHeadingSmallHeading6Display = { name: "fds-typography-heading-small-heading-6-display", value: "inline-block" } +export const FdsTokenTypographyLinkLargeFontFamily = { name: "fds-typography-link-large-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyLinkLargeFontSize = { name: "fds-typography-link-large-font-size", value: "18px" } +export const FdsTokenTypographyLinkLargeLetterSpacing = { name: "fds-typography-link-large-letter-spacing", value: "0px" } +export const FdsTokenTypographyLinkLargeLineHeight = { name: "fds-typography-link-large-line-height", value: "150%" } +export const FdsTokenTypographyLinkLargeFontWeight = { name: "fds-typography-link-large-font-weight", value: "400" } +export const FdsTokenTypographyLinkLargeTextDecoration = { name: "fds-typography-link-large-text-decoration", value: "underline" } +export const FdsTokenTypographyLinkLargeDisplay = { name: "fds-typography-link-large-display", value: "inline-block" } +export const FdsTokenTypographyLinkMicroFontFamily = { name: "fds-typography-link-micro-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyLinkMicroFontSize = { name: "fds-typography-link-micro-font-size", value: "12px" } +export const FdsTokenTypographyLinkMicroLetterSpacing = { name: "fds-typography-link-micro-letter-spacing", value: "0px" } +export const FdsTokenTypographyLinkMicroLineHeight = { name: "fds-typography-link-micro-line-height", value: "150%" } +export const FdsTokenTypographyLinkMicroFontWeight = { name: "fds-typography-link-micro-font-weight", value: "400" } +export const FdsTokenTypographyLinkMicroTextDecoration = { name: "fds-typography-link-micro-text-decoration", value: "underline" } +export const FdsTokenTypographyLinkMicroDisplay = { name: "fds-typography-link-micro-display", value: "inline-block" } +export const FdsTokenTypographyLinkSmallFontFamily = { name: "fds-typography-link-small-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyLinkSmallFontSize = { name: "fds-typography-link-small-font-size", value: "14px" } +export const FdsTokenTypographyLinkSmallLetterSpacing = { name: "fds-typography-link-small-letter-spacing", value: "0px" } +export const FdsTokenTypographyLinkSmallLineHeight = { name: "fds-typography-link-small-line-height", value: "150%" } +export const FdsTokenTypographyLinkSmallFontWeight = { name: "fds-typography-link-small-font-weight", value: "400" } +export const FdsTokenTypographyLinkSmallTextDecoration = { name: "fds-typography-link-small-text-decoration", value: "underline" } +export const FdsTokenTypographyLinkSmallDisplay = { name: "fds-typography-link-small-display", value: "inline-block" } +export const FdsTokenTypographyLinkDefaultFontFamily = { name: "fds-typography-link-default-font-family", value: "'Public Sans'" } +export const FdsTokenTypographyLinkDefaultFontSize = { name: "fds-typography-link-default-font-size", value: "16px" } +export const FdsTokenTypographyLinkDefaultLetterSpacing = { name: "fds-typography-link-default-letter-spacing", value: "0px" } +export const FdsTokenTypographyLinkDefaultLineHeight = { name: "fds-typography-link-default-line-height", value: "150%" } +export const FdsTokenTypographyLinkDefaultFontWeight = { name: "fds-typography-link-default-font-weight", value: "400" } +export const FdsTokenTypographyLinkDefaultTextDecoration = { name: "fds-typography-link-default-text-decoration", value: "underline" } +export const FdsTokenTypographyLinkDefaultDisplay = { name: "fds-typography-link-default-display", value: "inline-block" } +export const FdsTokenTypographyUiHelperFontFamily = { name: "fds-typography-ui-helper-font-family", value: "'Public Sans', 'PublicSans-Regular'" } +export const FdsTokenTypographyUiHelperFontSize = { name: "fds-typography-ui-helper-font-size", value: "15px" } +export const FdsTokenTypographyUiHelperLetterSpacing = { name: "fds-typography-ui-helper-letter-spacing", value: "0px" } +export const FdsTokenTypographyUiHelperLineHeight = { name: "fds-typography-ui-helper-line-height", value: "100%" } +export const FdsTokenTypographyUiHelperFontWeight = { name: "fds-typography-ui-helper-font-weight", value: "400" } +export const FdsTokenTypographyUiHelperDisplay = { name: "fds-typography-ui-helper-display", value: "inline-block" } +export const FdsTokenTypographyUiIdFontFamily = { name: "fds-typography-ui-id-font-family", value: "'Roboto Mono'" } +export const FdsTokenTypographyUiIdFontSize = { name: "fds-typography-ui-id-font-size", value: "13px" } +export const FdsTokenTypographyUiIdLetterSpacing = { name: "fds-typography-ui-id-letter-spacing", value: "0px" } +export const FdsTokenTypographyUiIdLineHeight = { name: "fds-typography-ui-id-line-height", value: "100%" } +export const FdsTokenTypographyUiIdFontWeight = { name: "fds-typography-ui-id-font-weight", value: "700" } +export const FdsTokenTypographyUiIdDisplay = { name: "fds-typography-ui-id-display", value: "inline-block" } +export const FdsTokenTypographyUiLabelFontFamily = { name: "fds-typography-ui-label-font-family", value: "'Public Sans', 'PublicSans-Medium'" } +export const FdsTokenTypographyUiLabelFontSize = { name: "fds-typography-ui-label-font-size", value: "16px" } +export const FdsTokenTypographyUiLabelLetterSpacing = { name: "fds-typography-ui-label-letter-spacing", value: "0px" } +export const FdsTokenTypographyUiLabelLineHeight = { name: "fds-typography-ui-label-line-height", value: "22px" } +export const FdsTokenTypographyUiLabelFontWeight = { name: "fds-typography-ui-label-font-weight", value: "500" } +export const FdsTokenTypographyUiLabelDisplay = { name: "fds-typography-ui-label-display", value: "inline-block" } +export const FdsTokenTypographyUiPlaceholderFontFamily = { name: "fds-typography-ui-placeholder-font-family", value: "'Public Sans', 'PublicSans-Medium'" } +export const FdsTokenTypographyUiPlaceholderFontSize = { name: "fds-typography-ui-placeholder-font-size", value: "16px" } +export const FdsTokenTypographyUiPlaceholderLetterSpacing = { name: "fds-typography-ui-placeholder-letter-spacing", value: "0px" } +export const FdsTokenTypographyUiPlaceholderLineHeight = { name: "fds-typography-ui-placeholder-line-height", value: "100%" } +export const FdsTokenTypographyUiPlaceholderFontWeight = { name: "fds-typography-ui-placeholder-font-weight", value: "500" } +export const FdsTokenTypographyUiPlaceholderDisplay = { name: "fds-typography-ui-placeholder-display", value: "inline-block" } +export const FdsTokenTypographyUiTagFontFamily = { name: "fds-typography-ui-tag-font-family", value: "'Public Sans', 'PublicSans-Bold'" } +export const FdsTokenTypographyUiTagFontSize = { name: "fds-typography-ui-tag-font-size", value: "16px" } +export const FdsTokenTypographyUiTagLetterSpacing = { name: "fds-typography-ui-tag-letter-spacing", value: "0px" } +export const FdsTokenTypographyUiTagLineHeight = { name: "fds-typography-ui-tag-line-height", value: "100%" } +export const FdsTokenTypographyUiTagFontWeight = { name: "fds-typography-ui-tag-font-weight", value: "700" } +export const FdsTokenTypographyUiTagDisplay = { name: "fds-typography-ui-tag-display", value: "inline-block" } +export const FdsTokenColorBrandBlack = { name: "fds-color-brand-black", value: "#000000" } +export const FdsTokenColorBrandWhite = { name: "fds-color-brand-white", value: "#ffffff" } +export const FdsTokenColorDanger50 = { name: "fds-color-danger-50", value: "#FFF0ED" } +export const FdsTokenColorDanger100 = { name: "fds-color-danger-100", value: "#ff9b87" } +export const FdsTokenColorDanger200 = { name: "fds-color-danger-200", value: "#e55636" } +export const FdsTokenColorDanger300 = { name: "fds-color-danger-300", value: "#b40000" } +export const FdsTokenColorDanger400 = { name: "fds-color-danger-400", value: "#720000" } +export const FdsTokenColorInteractive50 = { name: "fds-color-interactive-50", value: "#EFF8FF" } +export const FdsTokenColorInteractive100 = { name: "fds-color-interactive-100", value: "#90cefe" } +export const FdsTokenColorInteractive200 = { name: "fds-color-interactive-200", value: "#1777f8" } +export const FdsTokenColorInteractive300 = { name: "fds-color-interactive-300", value: "#0034ac" } +export const FdsTokenColorInteractive400 = { name: "fds-color-interactive-400", value: "#001c5b" } +export const FdsTokenColorNeutral50 = { name: "fds-color-neutral-50", value: "#F6F6F6" } +export const FdsTokenColorNeutral100 = { name: "fds-color-neutral-100", value: "#cdcdd7" } +export const FdsTokenColorNeutral200 = { name: "fds-color-neutral-200", value: "#9696aa" } +export const FdsTokenColorNeutral300 = { name: "fds-color-neutral-300", value: "#505064" } +export const FdsTokenColorNeutral400 = { name: "fds-color-neutral-400", value: "#2c2c44" } +export const FdsTokenColorSuccess50 = { name: "fds-color-success-50", value: "#EAFFF8" } +export const FdsTokenColorSuccess100 = { name: "fds-color-success-100", value: "#82e8c3" } +export const FdsTokenColorSuccess200 = { name: "fds-color-success-200", value: "#25a794" } +export const FdsTokenColorSuccess300 = { name: "fds-color-success-300", value: "#005f61" } +export const FdsTokenColorSuccess400 = { name: "fds-color-success-400", value: "#004042" } +export const FdsTokenColorText1 = { name: "fds-color-text-1", value: "#ffffff" } +export const FdsTokenColorText300 = { name: "fds-color-text-300", value: "#9696aa" } +export const FdsTokenColorText600 = { name: "fds-color-text-600", value: "#505064" } +export const FdsTokenColorText1000 = { name: "fds-color-text-1000", value: "#000000" } +export const FdsTokenColorWarning50 = { name: "fds-color-warning-50", value: "#FFFADB" } +export const FdsTokenColorWarning100 = { name: "fds-color-warning-100", value: "#ffe37f" } +export const FdsTokenColorWarning200 = { name: "fds-color-warning-200", value: "#eec200" } +export const FdsTokenColorWarning300 = { name: "fds-color-warning-300", value: "#b47324" } +export const FdsTokenColorWarning400 = { name: "fds-color-warning-400", value: "#6c3e05" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3564cce..70aa4cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "@fintraffic-design/coreui-css", "version": "0.0.1", + "dependencies": { + "lit": "^2.8.0" + }, "devDependencies": { "cz-conventional-changelog": "^3.3.0", "sass": "^1.57.1", @@ -241,6 +244,19 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -283,6 +299,11 @@ "dev": true, "optional": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" + }, "node_modules/acorn": { "version": "8.8.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", @@ -1441,6 +1462,34 @@ "dev": true, "optional": true }, + "node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -2462,6 +2511,19 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -2504,6 +2566,11 @@ "dev": true, "optional": true }, + "@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" + }, "acorn": { "version": "8.8.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", @@ -3385,6 +3452,34 @@ "dev": true, "optional": true }, + "lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", diff --git a/package.json b/package.json index 4c37644..a78cdaa 100644 --- a/package.json +++ b/package.json @@ -3,15 +3,22 @@ "private": true, "version": "0.0.1", "type": "module", - "files": ["dist", "lib", "src"], - "main": "./lib/tokens.js", - "types": "./lib/tokens.d.ts", + "files": [ + "dist", + "lib", + "src" + ], + "main": "./lib/index.js", + "types": "./lib/index.d.ts", "scripts": { "sass:min": "sass --no-source-map --style=compressed src/scss/coreui.scss:dist/coreui.min.css", "sass": "sass src/scss/coreui.scss:dist/coreui.css", "tokens": "style-dictionary build --config tokens-config.cjs", "build": "npm run sass && npm run sass:min && npm run tokens" }, + "dependencies": { + "lit": "^2.8.0" + }, "devDependencies": { "cz-conventional-changelog": "^3.3.0", "sass": "^1.57.1", diff --git a/tokens-config.cjs b/tokens-config.cjs index 2eb05ed..660f243 100644 --- a/tokens-config.cjs +++ b/tokens-config.cjs @@ -16,6 +16,48 @@ function fdsTokenString(token) { return `{ name: "fds-${paramCase(token.name)}", value: "${token.value}" }`; } +function capitalize(word) { + return `${word.charAt(0).toUpperCase()}${word.slice(1)}` +} + +function uncapitalize(word) { + return `${word.charAt(0).toLowerCase()}${word.slice(1)}` +} + +function indent(size = 2) { + return function(line) { + return `${' '.repeat(size)}${line}` + } +} + +function getStylesForPropertyGroup(propertyGroup, classNameSuffix = '') { + return Object.entries(propertyGroup).flatMap(([groupName, group]) => ( + Object.entries(group).map(([styleName, style]) => ({ + className: Array.from( + new Set( + [groupName, styleName, classNameSuffix] + .join(' ') + .split(' ') + ) + ) + .join('-') + .toLowerCase(), + properties: Object.entries(style).map(([propertyName, { name }]) => ({ propertyName, fdsName: `Fds${name}` })), + })) + )) +} + +function getExportedClassName(className, exportedNameSuffix = 'Class') { + return `${ + uncapitalize( + className + .split('-') + .map(capitalize) + .join('') + ) + }${exportedNameSuffix}` +} + module.exports = { source: ['src/tokens/**/*.json'], format: { @@ -37,7 +79,7 @@ module.exports = { const tokens = dictionary .allTokens - .map(token => `export const Fds${token.name}: ${fdsType(token)}`); + .map(token => `export const FdsToken${token.name}: ${fdsType(token)}`); return [ `export type FdsToken = ${allType}`, @@ -49,7 +91,7 @@ module.exports = { 'fds/javascript': ({ dictionary }) => { return dictionary .allTokens - .map(token => `export const Fds${token.name} = ${fdsTokenString(token)}`) + .map(token => `export const FdsToken${token.name} = ${fdsTokenString(token)}`) .join("\n") }, 'fds/css-variables': ({ dictionary }) => { @@ -59,6 +101,72 @@ module.exports = { .join(";\n") return `:root {\n${variables}\n}` + }, + 'fds/style-template-typings': ({ dictionary }) => { + const { Typography } = dictionary.properties + const styles = getStylesForPropertyGroup(Typography, 'text') + + return [ + `import { CSSResult } from 'lit'\n`, + `${styles.flatMap(style => [ + `// .${style.className}`, + `export const ${getExportedClassName(style.className)}: CSSResult\n` + ]).join('\n')}` + ] + .join('\n') + }, + 'fds/style-templates': ({ dictionary }) => { + const { Typography } = dictionary.properties + const styles = getStylesForPropertyGroup(Typography, 'text') + + return [ + 'import {', + styles + .flatMap(style => style.properties.map(property => property.fdsName)) + .sort() + .map(indent()) + .join(',\n'), + `} from './style-properties'\n`, + `import { css } from 'lit'\n`, + ...styles + .sort((a, b) => a.className.localeCompare(b.className)) + .map(style => ( + [ + `export const ${getExportedClassName(style.className)} = css\``, + ` .${style.className} {`, + style.properties + .sort((a, b) => a.propertyName.localeCompare(b.propertyName)) + .map(({ propertyName, fdsName }) => `${propertyName}: \${${fdsName}};`) + .map(indent(4)) + .join('\n'), + ' }\n`\n' + ] + .join('\n') + )), + ] + .join('\n') + }, + 'fds/style-property-typings': ({ dictionary }) => { + const { allTokens } = dictionary + + return [ + `import { CSSResult } from 'lit'\n`, + ...allTokens.map(({ name }) => `export const Fds${name}: CSSResult`), + '' + ] + .join('\n') + }, + 'fds/style-properties': ({ dictionary }) => { + const { allTokens } = dictionary + + return [ + `import { unsafeCSS } from 'lit'\n`, + ...allTokens.map(({ name, value }) => ( + `export const Fds${name} = /*#__PURE__*/ unsafeCSS("var(--fds-${paramCase(name)}, ${value})")` + )), + '' + ] + .join('\n') } }, @@ -95,6 +203,22 @@ module.exports = { destination: 'tokens.js', format: 'fds/javascript' }, + { + destination: 'style-templates.d.ts', + format: 'fds/style-template-typings' + }, + { + destination: 'style-templates.js', + format: 'fds/style-templates' + }, + { + destination: 'style-properties.d.ts', + format: 'fds/style-property-typings' + }, + { + destination: 'style-properties.js', + format: 'fds/style-properties' + } ] } }