diff --git a/.gitignore b/.gitignore
index e2bc0f3d..f148e7f5 100644
--- a/.gitignore
+++ b/.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
diff --git a/bin/build-design-tokens/formats/css/variables.ts b/bin/build-design-tokens/formats/css/variables.ts
new file mode 100644
index 00000000..cb53e268
--- /dev/null
+++ b/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;
+ },
+});
diff --git a/bin/build-design-tokens/formats/register.ts b/bin/build-design-tokens/formats/register.ts
index c367c727..b9ac68ec 100644
--- a/bin/build-design-tokens/formats/register.ts
+++ b/bin/build-design-tokens/formats/register.ts
@@ -1,2 +1,3 @@
+import './css/variables';
import './scss/map-deep-with-css-variables';
import './typescript/object';
diff --git a/bin/build-design-tokens/index.ts b/bin/build-design-tokens/index.ts
index ce5c85ea..01912d64 100644
--- a/bin/build-design-tokens/index.ts
+++ b/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();
+}
diff --git a/package-lock.json b/package-lock.json
index d29584e3..405d735d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@eleven-labs/design-system",
- "version": "0.28.0",
+ "version": "0.29.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@eleven-labs/design-system",
- "version": "0.28.0",
+ "version": "0.29.0",
"license": "MIT",
"dependencies": {
"autosuggest-highlight": "^3.3.4",
diff --git a/package.json b/package.json
index 20c55ccc..19e4739e 100644
--- a/package.json
+++ b/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"
diff --git a/src/assets/svgs/rss.svg b/src/assets/svgs/rss.svg
index 6f12fb19..cbde54d7 100644
--- a/src/assets/svgs/rss.svg
+++ b/src/assets/svgs/rss.svg
@@ -1,6 +1,6 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
index 715de3a2..595c3535 100644
--- a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
+++ b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -29,7 +29,7 @@ export const HomeIntroBlock: React.FC = ({
ml={{ xs: '0', md: 'xxl' }}
className="home-intro-block__container"
>
-
+
{intro}
diff --git a/src/components/Molecules/SearchField/SearchField.scss b/src/components/Molecules/SearchField/SearchField.scss
index 6c704332..66e3cde3 100644
--- a/src/components/Molecules/SearchField/SearchField.scss
+++ b/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')};
}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 49b8c25e..a6aaedfb 100644
--- a/src/constants/index.ts
+++ b/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';
diff --git a/src/constants/tokenNameList.ts b/src/constants/tokenNameList.ts
index 4852217f..def7131d 100644
--- a/src/constants/tokenNameList.ts
+++ b/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;
export const headingSizeTokenNameList = Object.keys(
- tokenVariables['typography']['heading'] || tokenVariables['desktop']['typography']['heading']
+ tokenVariables['typography']['heading']
) as ReadonlyArray;
-export const textSizeTokenNameList = Object.keys(
- tokenVariables['typography']['text'] || tokenVariables['desktop']['typography']['text']
-) as ReadonlyArray;
+export const textSizeTokenNameList = Object.keys(tokenVariables['typography']['text']) as ReadonlyArray;
diff --git a/src/designTokens/typography/heading-markup.desktop.tokens.json b/src/designTokens/typography/heading-markup.desktop.tokens.json
new file mode 100644
index 00000000..39bbf921
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+ }
+}
diff --git a/src/designTokens/typography/heading-markup.tokens.json b/src/designTokens/typography/heading-markup.tokens.json
index 1809da5b..b77fb535 100644
--- a/src/designTokens/typography/heading-markup.tokens.json
+++ b/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"
- }
- }
- }
- }
}
}
diff --git a/src/designTokens/typography/heading.desktop.tokens.json b/src/designTokens/typography/heading.desktop.tokens.json
new file mode 100644
index 00000000..ea6be47c
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+ }
+}
diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json
index 0e178f60..9df69a3c 100644
--- a/src/designTokens/typography/heading.tokens.json
+++ b/src/designTokens/typography/heading.tokens.json
@@ -18,9 +18,6 @@
},
"font-weight": {
"value": "{font-weight.bold.value}"
- },
- "text-transform": {
- "value": "uppercase"
}
},
"m": {
@@ -51,39 +48,5 @@
}
}
}
- },
- "desktop": {
- "base": {
- "letter-spacing": {
- "value": "2px"
- }
- },
- "typography": {
- "heading": {
- "s": {
- "font-size": {
- "value": "24px"
- }
- },
- "m": {
- "font-size": {
- "value": "{desktop.typography.heading.s.font-size.value} + 8"
- }
- },
- "l": {
- "font-size": {
- "value": "{desktop.typography.heading.m.font-size.value} + 8"
- }
- },
- "xl": {
- "font-size": {
- "value": "{desktop.typography.heading.m.font-size.value} * 2"
- },
- "letter-spacing": {
- "value": "3px"
- }
- }
- }
- }
}
}
diff --git a/src/designTokens/typography/text.tokens.json b/src/designTokens/typography/text.tokens.json
index 764b2f34..aa29a656 100644
--- a/src/designTokens/typography/text.tokens.json
+++ b/src/designTokens/typography/text.tokens.json
@@ -31,35 +31,5 @@
}
}
}
- },
- "desktop": {
- "typography": {
- "text": {
- "xs": {
- "font-size": {
- "value": "14px"
- },
- "icon-size": {
- "value": "{desktop.typography.text.s.font-size.value} + 2"
- }
- },
- "s": {
- "font-size": {
- "value": "{desktop.typography.text.xs.font-size.value} + 2"
- },
- "icon-size": {
- "value": "{desktop.typography.text.s.font-size.value} + 2"
- }
- },
- "m": {
- "font-size": {
- "value": "{desktop.typography.text.s.font-size.value} + 4"
- },
- "icon-size": {
- "value": "{desktop.typography.text.m.font-size.value} + 2"
- }
- }
- }
- }
}
}
diff --git a/src/designTokens/typography/texts.desktop.tokens.json b/src/designTokens/typography/texts.desktop.tokens.json
new file mode 100644
index 00000000..cf077187
--- /dev/null
+++ b/src/designTokens/typography/texts.desktop.tokens.json
@@ -0,0 +1,30 @@
+{
+ "typography": {
+ "text": {
+ "xs": {
+ "font-size": {
+ "value": "14px"
+ },
+ "icon-size": {
+ "value": "{typography.text.s.font-size.value} + 2"
+ }
+ },
+ "s": {
+ "font-size": {
+ "value": "{typography.text.xs.font-size.value} + 2"
+ },
+ "icon-size": {
+ "value": "{typography.text.s.font-size.value} + 2"
+ }
+ },
+ "m": {
+ "font-size": {
+ "value": "{typography.text.s.font-size.value} + 4"
+ },
+ "icon-size": {
+ "value": "{typography.text.m.font-size.value} + 2"
+ }
+ }
+ }
+ }
+}
diff --git a/src/helpers/storybookHelper.ts b/src/helpers/storybookHelper.ts
index ef9ff094..02db8034 100644
--- a/src/helpers/storybookHelper.ts
+++ b/src/helpers/storybookHelper.ts
@@ -1,7 +1,7 @@
import type { ControlType } from '@storybook/blocks';
import type { ArgTypes, InputType } from '@storybook/csf';
-import { tokenVariables } from '@/constants';
+import { tokenVariables, tokenVariablesDesktop } from '@/constants';
import { get } from '@/helpers/objectHelper';
import { kebabCase } from './stringHelper';
@@ -78,8 +78,8 @@ export const getValueOfCssPropertyInDesignTokens = (options: {
isDesktop?: boolean;
}): number | string =>
get(
- tokenVariables,
- `${options.isDesktop ? 'desktop.' : ''}${options.path}.${options.tokenName}.${options.propertyCSS}.value`
+ options.isDesktop ? tokenVariablesDesktop : tokenVariables,
+ `${options.path}.${options.tokenName}.${options.propertyCSS}.value`
) ||
get(tokenVariables, `${options.path}.${options.tokenName}.${options.propertyCSS}.value`) ||
get(tokenVariables, `${options.path}.base.${options.propertyCSS}.value`);
diff --git a/src/pages/PostPage/PostPage.stories.tsx b/src/pages/PostPage/PostPage.stories.tsx
index 97b0dc3f..775fe31d 100644
--- a/src/pages/PostPage/PostPage.stories.tsx
+++ b/src/pages/PostPage/PostPage.stories.tsx
@@ -50,6 +50,48 @@ const meta: Meta = {
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+
+ I just love bold text .
+
+
+ Italicized text is the cat's meow .
+
+
+ Use `code` in your Markdown file.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+ ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+
+ Dorothy followed her through many of the beautiful rooms in her castle.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt erat sit amet justo maximus, gravida
+ ultricies lorem vestibulum. Nullam scelerisque erat non est blandit, a tincidunt enim laoreet.
+
+
+ First item
+ Second item
+
+ Third item
+
+ Indented item
+ Indented item
+
+
+ Fourth item
+
+
+ First item
+ Second item
+
+ Third item
+
+ Indented item
+ Indented item
+
+
+ Fourth item
+
>
),
footer: PostFooterStories.args as PostPageProps['footer'],
diff --git a/src/pages/PostPage/PostPageContent.scss b/src/pages/PostPage/PostPageContent.scss
index bef0e959..b61b5acf 100644
--- a/src/pages/PostPage/PostPageContent.scss
+++ b/src/pages/PostPage/PostPageContent.scss
@@ -2,7 +2,6 @@
@use '@/styles/abstracts' as *;
$heading-markup-config: map-get-strict($token-variables, 'typography', 'heading-markup');
-$heading-markup-desktop-config: map-get-strict($token-variables, 'desktop', 'typography', 'heading-markup');
$headings-by-compoent-variant-name: (
's': 'h5',
'm': 'h4',
@@ -45,11 +44,38 @@ $headings-by-compoent-variant-name: (
@include heading($heading-markup-config);
- @include create-media-queries('md') {
- @include heading($heading-markup-desktop-config);
+ p, ul, ol, blockquote {
+ margin: 0 0 #{map-get-strict($token-variables, 'spacing', 'xs')} 0;
}
- p {
- margin-bottom: #{map-get-strict($token-variables, 'spacing', 'xs')};
+ blockquote {
+ padding: 0 var(--spacing-xxl);
+ font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')};
+ font-size: #{map-get-strict($token-variables, 'typography', 'text', 'm', 'font-size')};
+ font-style: italic;
+ line-height: #{map-get-strict($token-variables, 'line-height', 'base')};
+
+ &::before, &::after {
+ content: "“";
+ display: block;
+ height: 3rem;
+ line-height: 6rem;
+ font-size: 8rem;
+ font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')};
+ color: #{map-get-strict($token-variables, 'color', 'primary')};
+ }
+
+ &::before {
+ margin-left: calc(var(--spacing-xxl) * -1);
+ }
+
+ &::after {
+ margin-right: calc(var(--spacing-xxl) * -1);
+ transform: rotate(180deg);
+ }
+ }
+
+ figure {
+ text-align: center;
}
}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 5bd8f37c..fd9608d4 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -31,8 +31,3 @@ button {
a {
text-decoration: none;
}
-
-ol {
- margin: 0;
- padding: 0;
-}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index d01981c7..0658194e 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,4 +1,5 @@
@use 'reset';
@use 'token-custom-properties';
+@use 'token-custom-properties-desktop';
@use 'base';
@use 'utilities';
diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss
index 02e0dd6d..2b95a1d3 100644
--- a/src/styles/utilities/_typography.scss
+++ b/src/styles/utilities/_typography.scss
@@ -67,18 +67,7 @@ $typography-prop-list-with-breakpoints: (
}
$heading-config: map.get($token-variables, 'typography', 'heading');
-$heading-desktop-config: map.get($token-variables, 'desktop', 'typography', 'heading');
$text-config: map.get($token-variables, 'typography', 'text');
-$text-desktop-config: map.get($token-variables, 'desktop', 'typography', 'text');
@include component('heading', $heading-config);
-
-@include create-media-queries('md') {
- @include component('heading', map.merge($heading-config, $heading-desktop-config));
-}
-
@include text-component($text-config);
-
-@include create-media-queries('md') {
- @include text-component(map.merge($text-config, $text-desktop-config));
-}
diff --git a/src/types/tokenTypes.ts b/src/types/tokenTypes.ts
index a7fdb653..0c70febe 100644
--- a/src/types/tokenTypes.ts
+++ b/src/types/tokenTypes.ts
@@ -11,11 +11,5 @@ export type FontWeightType = keyof (typeof tokenVariables)['font-weight'];
export type IconNameType = keyof (typeof tokenVariables)['asset']['icon'];
-export type HeadingSizeType = keyof (
- | (typeof tokenVariables)['typography']['heading']
- | (typeof tokenVariables)['desktop']['typography']['heading']
-);
-export type TextSizeType = keyof (
- | (typeof tokenVariables)['typography']['text']
- | (typeof tokenVariables)['desktop']['typography']['text']
-);
+export type HeadingSizeType = keyof (typeof tokenVariables)['typography']['heading'];
+export type TextSizeType = keyof (typeof tokenVariables)['typography']['text'];