feat: add custom properties for desktop

.gitignore

@@ -26,7 +26,9 @@ storybook-static
 public/svgs
 src/components/Atoms/Svgs
 src/styles/_token-custom-properties.scss
+src/styles/_token-custom-properties-desktop.scss
 src/styles/abstracts/variables/_token-variables.scss
 src/styles/abstracts/variables/_variables.scss
 src/styles/_fonts.scss
 src/constants/tokenVariables.ts
+src/constants/tokenVariablesDesktop.ts

bin/build-design-tokens/formats/css/variables.ts

@@ -0,0 +1,38 @@
+import StyleDictionary from 'style-dictionary';
+
+StyleDictionary.registerFormat({
+ name: 'css/variables',
+ formatter: ({ dictionary, file, options = {} }) => {
+ let output = '';
+ if (options?.showFileHeader !== false) {
+ output += StyleDictionary.formatHelpers.fileHeader({ file });
+ }
+
+ const variables = StyleDictionary.formatHelpers.formattedVariables({
+ dictionary,
+ outputReferences: options.outputReferences,
+ format: 'css',
+ formatting: {
+ prefix: '--',
+ indentation: '\t\t',
+ separator: ':'
+ }
+ });
+
+ if (options.mediaQuery) {
+ output += `@use './abstracts' as *;\n\n`;
+ }
+
+ output += [
+ `${options.selector ? options.selector : `:root`} {`,
+ options.mediaQuery ? [
+ `\t@include create-media-queries('${options.mediaQuery}') {`,
+ variables,
+ `\t}`,
+ ].join('\n') : variables,
+ '}'
+ ].join('\n');
+
+ return output;
+ },
+});

bin/build-design-tokens/formats/register.ts

@@ -1,2 +1,3 @@
+import './css/variables';
 import './scss/map-deep-with-css-variables';
 import './typescript/object';

bin/build-design-tokens/index.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import type { File, TransformedToken } from 'style-dictionary';
+import { Config, File, TransformedToken } from 'style-dictionary';
 import StyleDictionary from 'style-dictionary';
 
 import './formats/register';
@@ -9,57 +9,92 @@ import './transforms/register';
 const filterExcludesCategories = (token: TransformedToken, categories: string[]): boolean =>
  token?.attributes?.category ? !categories.includes(token.attributes.category) : false;
 
-const styleDictionary = StyleDictionary.extend({
- source: ['src/designTokens/**/*.tokens.json'],
- platforms: {
- 'css/variables': {
- buildPath: './src/styles/',
- transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'],
- files: [
- {
- format: 'css/variables',
- filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']),
- destination: '_token-custom-properties.scss',
- },
- ],
- },
- 'scss/variables': {
- buildPath: './src/styles/',
- transforms: ['attribute/cti'],
- files: [
- {
- format: 'scss/map-deep',
- filter: (token): boolean => token?.attributes?.category === 'color',
- destination: 'abstracts/variables/_variables.scss',
- mapName: 'variables',
- } as File,
- ],
- },
- 'scss/token-variables': {
- buildPath: './src/styles/',
- transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'],
- files: [
- {
- format: 'scss/map-deep-with-css-variables',
- filter: (token): boolean => filterExcludesCategories(token, ['asset']),
- destination: 'abstracts/variables/_token-variables.scss',
+const sdConfigs: Config[] = [
+ {
+ source: ['src/designTokens/**/!(*.desktop).tokens.json'],
+ platforms: {
+ 'css/variables': {
+ buildPath: './src/styles/',
+ transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'],
+ files: [
+ {
+ format: 'css/variables',
+ filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']),
+ destination: '_token-custom-properties.scss',
+ },
+ ],
+ },
+ 'scss/variables': {
+ buildPath: './src/styles/',
+ transforms: ['attribute/cti'],
+ files: [
+ {
+ format: 'scss/map-deep',
+ filter: (token): boolean => token?.attributes?.category === 'color',
+ destination: 'abstracts/variables/_variables.scss',
+ mapName: 'variables',
+ } as File,
+ ],
+ },
+ 'scss/token-variables': {
+ buildPath: './src/styles/',
+ transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'],
+ files: [
+ {
+ format: 'scss/map-deep-with-css-variables',
+ filter: (token): boolean => filterExcludesCategories(token, ['asset']),
+ destination: 'abstracts/variables/_token-variables.scss',
+ },
+ ],
+ options: {
+ categoriesWithNotCssVariables: ['breakpoint'],
  },
- ],
- options: {
- categoriesWithNotCssVariables: ['breakpoint'],
+ },
+ 'typescript/token-variables': {
+ buildPath: './src/',
+ transforms: ['attribute/cti', 'math', 'size/px'],
+ files: [
+ {
+ format: 'typescript/object',
+ destination: 'constants/tokenVariables.ts',
+ },
+ ],
  },
  },
- 'typescript/token-variables': {
- buildPath: './src/',
- transforms: ['attribute/cti', 'math', 'size/px'],
- files: [
- {
- format: 'typescript/object',
- destination: 'constants/tokenVariables.ts',
- },
- ],
+ },
+ {
+ include: ['src/designTokens/**/!(*.desktop).tokens.json'],
+ source: ['src/designTokens/**/*.desktop.tokens.json'],
+ platforms: {
+ 'css/variables': {
+ buildPath: './src/styles/',
+ transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'],
+ files: [
+ {
+ format: 'css/variables',
+ filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']) && token.filePath.indexOf(`.desktop`) > -1,
+ destination: '_token-custom-properties-desktop.scss',
+ options: {
+ mediaQuery: 'md',
+ },
+ },
+ ],
+ },
+ 'typescript/token-variables': {
+ buildPath: './src/',
+ transforms: ['attribute/cti', 'math', 'size/px'],
+ files: [
+ {
+ format: 'typescript/object',
+ filter: (token): boolean => token.filePath.indexOf(`.desktop`) > -1,
+ destination: 'constants/tokenVariablesDesktop.ts',
+ },
+ ],
+ },
  },
  },
-});
+];
 
-styleDictionary.buildAllPlatforms();
+for (const sdConfig of sdConfigs) {
+ StyleDictionary.extend(sdConfig).buildAllPlatforms();
+}

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@eleven-labs/design-system",
  "description": "Design System for Eleven Labs",
- "version": "0.28.0",
+ "version": "0.29.0",
  "repository": {
  "type": "git",
  "url": "https://github.com/eleven-labs/design-system.git"

src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx

@@ -29,7 +29,7 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
  ml={{ xs: '0', md: 'xxl' }}
  className="home-intro-block__container"
  >
- <Heading size="s" color="info">
+ <Heading size="s" color="info" textTransform="uppercase">
  {intro}
  </Heading>
  <Heading size="xl" color="primary">

src/components/Molecules/SearchField/SearchField.scss

@@ -18,10 +18,6 @@
  border-radius: 22px;
  background-color: #{map-get-strict($token-variables, 'color', 'secondary')};
 
- @include create-media-queries('md') {
- --font-size-input: #{map-get-strict($token-variables, 'desktop', 'typography', 'text', 'xs', 'font-size')};
- }
-
  &, &::placeholder {
  color: #{map-get-strict($token-variables, 'color', 'primary')};
  }

src/constants/index.ts

@@ -1,4 +1,5 @@
 export * from './tokenVariables';
+export { tokenVariables as tokenVariablesDesktop } from './tokenVariablesDesktop';
 export * from './tokenNameList';
 export * from './cssProperties';
 export * from './cssPropertyNameList';

src/constants/tokenNameList.ts

@@ -23,8 +23,6 @@ export const fontWeightTokenNameList = Object.keys(tokenVariables['font-weight']
 export const iconTokenNameList = Object.keys(tokenVariables['asset']['icon']) as ReadonlyArray<IconNameType>;
 
 export const headingSizeTokenNameList = Object.keys(
- tokenVariables['typography']['heading'] || tokenVariables['desktop']['typography']['heading']
+ tokenVariables['typography']['heading']
 ) as ReadonlyArray<HeadingSizeType>;
-export const textSizeTokenNameList = Object.keys(
- tokenVariables['typography']['text'] || tokenVariables['desktop']['typography']['text']
-) as ReadonlyArray<TextSizeType>;
+export const textSizeTokenNameList = Object.keys(tokenVariables['typography']['text']) as ReadonlyArray<TextSizeType>;

src/designTokens/typography/heading-markup.desktop.tokens.json

@@ -0,0 +1,26 @@
+{
+ "typography": {
+ "heading-markup": {
+ "s": {
+ "font-size": {
+ "value": "24px"
+ }
+ },
+ "m": {
+ "font-size": {
+ "value": "{typography.heading-markup.s.font-size.value} + 2"
+ }
+ },
+ "l": {
+ "font-size": {
+ "value": "{typography.heading-markup.m.font-size.value} + 2"
+ }
+ },
+ "xl": {
+ "font-size": {
+ "value": "{typography.heading-markup.m.font-size.value} + 2"
+ }
+ }
+ }
+ }
+}

src/designTokens/typography/heading-markup.tokens.json

@@ -51,31 +51,5 @@
  }
  }
  }
- },
- "desktop": {
- "typography": {
- "heading-markup": {
- "s": {
- "font-size": {
- "value": "24px"
- }
- },
- "m": {
- "font-size": {
- "value": "{desktop.typography.heading-markup.s.font-size.value} + 2"
- }
- },
- "l": {
- "font-size": {
- "value": "{desktop.typography.heading-markup.m.font-size.value} + 2"
- }
- },
- "xl": {
- "font-size": {
- "value": "{desktop.typography.heading-markup.m.font-size.value} + 2"
- }
- }
- }
- }
  }
 }

src/designTokens/typography/heading.desktop.tokens.json

@@ -0,0 +1,34 @@
+{
+ "typography": {
+ "base": {
+ "letter-spacing": {
+ "value": "2px"
+ }
+ },
+ "heading": {
+ "s": {
+ "font-size": {
+ "value": "24px"
+ }
+ },
+ "m": {
+ "font-size": {
+ "value": "{typography.heading.s.font-size.value} + 8"
+ }
+ },
+ "l": {
+ "font-size": {
+ "value": "{typography.heading.m.font-size.value} + 8"
+ }
+ },
+ "xl": {
+ "font-size": {
+ "value": "{typography.heading.m.font-size.value} * 2"
+ },
+ "letter-spacing": {
+ "value": "3px"
+ }
+ }
+ }
+ }
+}