Skip to content

Commit

Permalink
feat: provide composed css variables (#495)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeripeierSBB
jeripeierSBB authored Apr 2, 2024
1 parent f7dd176 commit 3a97857
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 2 deletions.
13 changes: 11 additions & 2 deletions build.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { FormatterArguments } from 'style-dictionary/types/Format';
import { config } from './config';
import StyleDictionaryBase, { TransformedToken } from 'style-dictionary';
import * as fs from 'fs';

const StyleDictionary = StyleDictionaryBase.extend(config);
const fileHeader = StyleDictionary.formatHelpers.fileHeader;
Expand All @@ -11,7 +12,15 @@ console.log('\n==============================================');
StyleDictionary.registerFormat({
formatter: ({ file, dictionary, options }: FormatterArguments) => {
const symbols = dictionary.allProperties.map(cssTemplate).join('') + '\n';
return fileHeader({ file }) + `${options.selector ?? ':root'} {\n${symbols}\n}\n`;

const composedVars = fs
.readFileSync('./composed-variables/composed-variables.css', 'utf-8')
.match(/\/\* EXTRACTING_CSS_VARS_START \*\/([\S\s]*)\/\* EXTRACTING_CSS_VARS_END \*\//m)![1];

return (
fileHeader({ file }) +
`${options.selector ?? ':root'} {\n${symbols}\n /* Composed variables */\n\n ${composedVars.trim()}\n}\n`
);
},
name: 'css/variables',
});
Expand All @@ -35,7 +44,7 @@ StyleDictionary.registerFormat({
const { allTokens } = dictionary;

allTokens.forEach((token) => {
// if a token uses a refernce token, we add the original token object
// if a token uses a reference token, we add the original token object
const usesReference = dictionary.usesReference(token);

if (usesReference) {
Expand Down
187 changes: 187 additions & 0 deletions composed-variables/composed-variables.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
:root {
/* EXTRACTING_CSS_VARS_START */

/**
* We provide an extended collection of css variables which are mainly breakpoint
* dependant or simply referencing other variables.
* Due to technical limitations these variables are only provided as CSS variables.
*/

/* Font Color */
--sbb-font-default-color: var(--sbb-color-charcoal);

/* Focus outline */
--sbb-focus-outline-color-default: var(--sbb-color-black);
--sbb-focus-outline-color-dark: var(--sbb-color-white);
--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
--sbb-focus-outline-width: var(--sbb-border-width-1x);

/* Title */
--sbb-font-size-title-1: var(--sbb-typo-scale-2-5x);
--sbb-font-size-title-2: var(--sbb-typo-scale-2x);
--sbb-font-size-title-3: var(--sbb-typo-scale-1-5x);
--sbb-font-size-title-4: var(--sbb-typo-scale-1-25x);
--sbb-font-size-title-5: var(--sbb-typo-scale-1-125x);
--sbb-font-size-title-6: var(--sbb-typo-scale-0-875x);
--sbb-font-size-text-xl: var(--sbb-typo-scale-1-25x);
--sbb-font-size-text-l: var(--sbb-typo-scale-1-125x);
--sbb-font-size-text-m: var(--sbb-typo-scale-default);
--sbb-font-size-text-s: var(--sbb-typo-scale-0-875x);
--sbb-font-size-text-xs: var(--sbb-typo-scale-0-75x);
--sbb-font-size-text-xxs: var(--sbb-typo-scale-0-75x);

/* Spacing */
--sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
--sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
--sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-zero);
--sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-zero);
--sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-zero);
--sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-zero);
--sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-zero);
--sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-zero);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-zero);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-zero);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);

/* Button */
--sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-zero);
--sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-zero);

/* Form */
--sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-zero);
--sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-zero);

@media (forced-colors: active) {
/* Focus outline */
--sbb-focus-outline-color-default: Highlight;
--sbb-focus-outline-color-dark: Highlight;
--sbb-focus-outline-width: var(--sbb-border-width-2x);
}

/**
* Micro (value corresponds to --sbb-breakpoint-micro-min)
*/
@media (min-width: 22.5rem) {
/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-micro);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-micro);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-micro);
}

/**
* Small (value corresponds to --sbb-breakpoint-small-min)
*/
@media (min-width: 37.5rem) {
/* Title */
--sbb-font-size-title-1: var(--sbb-typo-scale-3x);

/* Spacing */
--sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
--sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
--sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-small);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
}

/**
* Medium (value corresponds to --sbb-breakpoint-medium-min)
*/
@media (min-width: 52.5rem) {
/* Title */
--sbb-font-size-title-2: var(--sbb-typo-scale-2-5x);
--sbb-font-size-title-3: var(--sbb-typo-scale-2x);
--sbb-font-size-title-4: var(--sbb-typo-scale-1-5x);
--sbb-font-size-title-5: var(--sbb-typo-scale-1-25x);
--sbb-font-size-title-6: var(--sbb-typo-scale-default);
--sbb-font-size-text-xl: var(--sbb-typo-scale-1-5x);
--sbb-font-size-text-l: var(--sbb-typo-scale-1-25x);
--sbb-font-size-text-m: var(--sbb-typo-scale-1-125x);
--sbb-font-size-text-s: var(--sbb-typo-scale-default);
--sbb-font-size-text-xs: var(--sbb-typo-scale-0-875x);

/* Spacing */
--sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-medium);
--sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-medium);
--sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-medium);
--sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-medium);
--sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-medium);
--sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-medium);
--sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-medium);
--sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-medium);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-medium);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-medium);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-medium);

/* Button */
--sbb-size-button-m-min-height: var(--sbb-size-button-m-min-height-medium);
--sbb-size-button-l-min-height: var(--sbb-size-button-l-min-height-medium);

/* Form */
--sbb-size-form-element-m-min-height: var(--sbb-size-form-element-m-min-height-medium);
--sbb-size-form-element-l-min-height: var(--sbb-size-form-element-l-min-height-medium);

/* Header */
--sbb-header-height: var(--sbb-spacing-fixed-24x);

/* Time Input */
--sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
}

/**
* Large (value corresponds to --sbb-breakpoint-large-min)
*/
@media (min-width: 64rem) {
/* Title */
--sbb-font-size-title-1: var(--sbb-typo-scale-3-5x);

/* Spacing */
--sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-large);
--sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-large);
--sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-large);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-large);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-large);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
}

/**
* Wide (value corresponds to --sbb-breakpoint-wide-min)
*/
@media (min-width: 80rem) {
/* Spacing */
--sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-wide);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-wide);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-wide);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-wide);
}

/**
* Ultra (value corresponds to --sbb-breakpoint-ultra-min)
*/
@media (min-width: 90rem) {
/* Title */
--sbb-font-size-title-1: var(--sbb-typo-scale-4x);

/* Spacing */
--sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
--sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-ultra);
--sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-ultra);

/* Layout */
--sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
--sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
--sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
}

/* EXTRACTING_CSS_VARS_END */
}

0 comments on commit 3a97857

Please sign in to comment.