Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Figma variables integration #41

Merged
merged 16 commits into from
Aug 9, 2024
Merged

Figma variables integration #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f77c2e2
basic setup for themes
hitschman May 22, 2024
ab592c6
update design-tokens.json and fix fonts
hitschman May 22, 2024
0917c02
add missing class to mapButtonTypeToSpinnerType
hitschman May 22, 2024
8f586e3
refactor figma variables formatter
juliocastrodev Jul 5, 2024
e352f96
use official storybook theme manager
juliocastrodev Jul 8, 2024
74278cb
use media queries to consider viewports
juliocastrodev Jul 11, 2024
fc9587a
use retro compatible figma variables export
juliocastrodev Jul 12, 2024
d2a213e
update with main
juliocastrodev Jul 12, 2024
b71866a
change formatting back to single quotes
lukecore Jul 15, 2024
2617664
add link to github issue for todo
lukecore Jul 15, 2024
35b6c7a
fix broken design-tokens page, change font-face to suggested import i…
lukecore Jul 16, 2024
1361325
fix npm issue
lukecore Jul 16, 2024
370d050
fix failing check
lukecore Jul 16, 2024
2301790
change font-family to Inter, since this is the font-family name extra…
lukecore Jul 16, 2024
26e4635
Merge remote-tracking branch 'origin/main' into features/figma-variab…
lukecore Aug 9, 2024
481665d
adapt styling to figma design
lukecore Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 9 additions & 2 deletions web-components/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,21 @@ import { StorybookConfig } from '@storybook/web-components-vite';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials')],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-themes'),
],
framework: {
name: '@storybook/web-components-vite',
options: {},
},
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: configType === 'PRODUCTION' ? [turbosnap({ rootDir: config.root ?? process.cwd() })] : [],
plugins:
configType === 'PRODUCTION'
? [turbosnap({ rootDir: config.root ?? process.cwd() })]
: [],
});
},
};
Expand Down
24 changes: 19 additions & 5 deletions web-components/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import 'element-internals-polyfill';
import { setCustomElementsManifest } from '@storybook/web-components';
import { withThemeByClassName } from '@storybook/addon-themes';
import customElements from '../dist/custom-elements.json';
import designTokens from '../src/rootStyles/design-tokens.json';
import '../src/rootStyles/style.css';

customElements?.modules?.forEach((module) => {
module?.declarations?.forEach(declaration => {
Object.entries(declaration).forEach(([key, value]) => {
if (Array.isArray(value)) {
// @ts-ignore
declaration[key] = value.filter((member) => !member.privacy?.includes('private'));
module?.declarations?.forEach((declaration: any) => {
Object.keys(declaration).forEach((key) => {
if (Array.isArray(declaration[key])) {
declaration[key] = declaration[key].filter(
(member: { privacy: string }) => !member.privacy?.includes('private'),
);
}
});
});
Expand All @@ -32,4 +35,15 @@ export const parameters = {
},
},
};

const themes = Object.keys(designTokens['semantic-tokens']);
const themesObject = Object.fromEntries(themes.map((theme) => [theme, theme]));

export const decorators = [
withThemeByClassName({
themes: themesObject,
defaultTheme: themes[0],
}),
];

export const tags = ['autodocs'];
2 changes: 1 addition & 1 deletion web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@
"@storybook/addon-actions": "8.1.6",
"@storybook/addon-essentials": "8.1.6",
"@storybook/addon-links": "8.1.6",
"@storybook/addon-themes": "8.1.6",
"@storybook/blocks": "8.1.6",
"@storybook/manager-api": "8.1.6",
"@storybook/preview-api": "8.1.6",
"@storybook/theming": "8.1.6",
"@storybook/web-components": "8.1.6",
"@storybook/web-components-vite": "8.1.6",
"@testing-library/dom": "9.3.4",
Expand Down
2 changes: 2 additions & 0 deletions web-components/src/components/button/button.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,8 @@ export default class Button extends BaseElement {
private mapButtonTypeToSpinnerType(): SpinnerType {
if (this.type === 'primary') {
return 'primary';
} else if (this.type === 'ghost'){
return 'ghost';
}
return 'secondary';
}
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/components/button/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ button {
cursor: pointer;
border: var(--border-medium) solid;
border-radius: var(--radius-4);
line-height: var(--typography-main-line-height);
line-height: var(--typography-body-main-line-height);
}

button:disabled {
Expand Down
6 changes: 3 additions & 3 deletions web-components/src/components/buttongroup/buttongroup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@

label {
color: var(--color-brand-interaction-100);
font-size: var(--typography-small-font-size);
line-height: var(--typography-small-line-height);
font-weight: var(--typography-small-font-weight);
font-size: var(--typography-body-small-font-size);
line-height: var(--typography-body-small-line-height);
font-weight: var(--typography-body-small-font-weight);
display: block;
padding-left: var(--size-1);
margin-bottom: var(--size-0-5);
Expand Down
14 changes: 7 additions & 7 deletions web-components/src/components/chart/chart.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@

.highcharts-data-label text {
fill: var(--color-brand-white-100);
font-size: var(--typography-main-font-size);
line-height: var(--typography-main-line-height);
font-weight: var(--typography-main-font-weight);
font-size: var(--typography-body-main-font-size);
line-height: var(--typography-body-main-line-height);
font-weight: var(--typography-body-main-font-weight);
}

.highcharts-grid-line {
Expand All @@ -33,9 +33,9 @@

.highcharts-legend-item > text {
fill: var(--color-brand-text-100);
font-size: var(--typography-main-font-size);
line-height: var(--typography-main-line-height);
font-weight: var(--typography-main-font-weight);
font-size: var(--typography-body-main-font-size);
line-height: var(--typography-body-main-line-height);
font-weight: var(--typography-body-main-font-weight);
}

:is(.highcharts-bar-series, .highcharts-column-series) .highcharts-point-hover {
Expand Down Expand Up @@ -64,5 +64,5 @@
}

.highcharts-y-axis-labels {
font-size: var(--typography-main-font-size);
font-size: var(--typography-body-main-font-size);
}
4 changes: 2 additions & 2 deletions web-components/src/components/checkbox/checkbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ label, input {
cursor: pointer;
}

label:has(input:disabled),
input:disabled {
label:has(input:disabled), input:disabled {
cursor: not-allowed;
color:var(--text-cta-disabled);
}

/* default */
Expand Down
4 changes: 2 additions & 2 deletions web-components/src/components/datepicker/customize-ease.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
.container {
display: block;
font-family: inherit;
font-size: var(--typography-main-font-size);
line-height: var(--typography-main-line-height);
font-size: var(--typography-body-main-font-size);
line-height: var(--typography-body-main-line-height);
}

.container.inline {
Expand Down
16 changes: 8 additions & 8 deletions web-components/src/components/icon/icon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@
}

:host([size="xsmall"]) {
height: var(--typography-small-font-size);
width: var(--typography-small-font-size);
height: var(--typography-body-small-font-size);
width: var(--typography-body-small-font-size);
}

:host([size="small"]) {
height: var(--typography-main-font-size);
width: var(--typography-main-font-size);
height: var(--typography-body-main-font-size);
width: var(--typography-body-main-font-size);
}

:host([size="medium"]), :host {
width: var(--typography-h3-font-size);
height: var(--typography-h3-font-size);
width: var(--typography-header-h3-font-size);
height: var(--typography-header-h3-font-size);
}

:host([size="large"]) {
height: var(--typography-h2-font-size);
width: var(--typography-h2-font-size);
height: var(--typography-header-h2-font-size);
width: var(--typography-header-h2-font-size);
}

:host([size="huge"]) {
Expand Down
6 changes: 3 additions & 3 deletions web-components/src/components/input/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ dss-spinner {
.count {
display: block;
margin-top: var(--size-0-5);
font-size: var(--typography-small-font-size);
line-height: var(--typography-small-line-height);
font-weight: var(--typography-small-font-weight);
font-size: var(--typography-body-small-font-size);
line-height: var(--typography-body-small-line-height);
font-weight: var(--typography-body-small-font-weight);
}

.count--invalid {
Expand Down
8 changes: 4 additions & 4 deletions web-components/src/components/input/input.lightDOM.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ dss-input :is(input, textarea) {
border: var(--border-small) solid var(--color-brand-interaction-75);
border-radius: var(--radius-4);
padding: calc(var(--size-0-5) + var(--border-small)) var(--size-1);
font-size: var(--typography-main-font-size);
line-height: var(--typography-main-line-height);
font-size: var(--typography-body-main-font-size);
line-height: var(--typography-body-main-line-height);
}

dss-input:has(:is(input,textarea):required)::part(required) {
Expand All @@ -32,8 +32,8 @@ dss-input:has(dss-button:hover) :is(input,textarea):not(:disabled) {
}

dss-input[size="compact"] input {
font-size: var(--typography-small-font-size);
line-height: var(--typography-small-line-height);
font-size: var(--typography-body-small-font-size);
line-height: var(--typography-body-small-line-height);
}

dss-input :is(input,textarea):focus-visible {
Expand Down
4 changes: 2 additions & 2 deletions web-components/src/components/label/label.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
label {
color: var(--color-brand-interaction-100);
font-size: var(--typography-small-font-size);
font-weight: var(--typography-small-font-weight);
font-size: var(--typography-body-small-font-size);
font-weight: var(--typography-body-small-font-weight);
display: block;
}

Expand Down
9 changes: 5 additions & 4 deletions web-components/src/components/radio/radio.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ label:not(.checked,.disabled,:active):hover .basic-radio {

.disabled {
cursor: not-allowed;
color:var(--text-cta-disabled);
}

.disabled .basic-radio {
Expand Down Expand Up @@ -97,13 +98,13 @@ label:not(.checked,.disabled,:active):hover .basic-radio {
}

.compact {
width: var(--typography-main-line-height);
height: var(--typography-main-line-height);
width: var(--typography-body-main-line-height);
height: var(--typography-body-main-line-height);
}

.comfortable {
height: var(--typography-h3-line-height);
width: var(--typography-h3-line-height);
height: var(--typography-header-h3-line-height);
width: var(--typography-header-h3-line-height);
}

.focused .basic-radio {
Expand Down
4 changes: 2 additions & 2 deletions web-components/src/components/tab/tab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
justify-content: space-between;
cursor: pointer;
gap: var(--size-2);
font-size: var(--typography-h3-font-size);
line-height: var(--typography-h3-line-height);
font-size: var(--typography-header-h3-font-size);
line-height: var(--typography-header-h3-line-height);
}

.visible {
Expand Down
4 changes: 2 additions & 2 deletions web-components/src/components/tabGroup/tabGroup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

.show-more-text {
font-size: var(--typography-h3-font-size);
line-height: var(--typography-h3-line-height);
font-size: var(--typography-header-h3-font-size);
line-height: var(--typography-header-h3-line-height);
margin-left: var(--size-1-5);
}
16 changes: 8 additions & 8 deletions web-components/src/components/table/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--typography-small-font-size);
line-height: var(--typography-small-line-height);
font-size: var(--typography-body-small-font-size);
line-height: var(--typography-body-small-line-height);
text-align: left;
}

Expand All @@ -31,7 +31,7 @@ thead {

thead th {
padding: var(--size-1) var(--horizontal-cell-padding) var(--size-0-5);
font-weight: var(--typography-main-font-weight);
font-weight: var(--typography-body-main-font-weight);
position: relative;
white-space: nowrap;
}
Expand Down Expand Up @@ -78,7 +78,7 @@ dss-loading-placeholder {
}

.group-header td {
font-weight: var(--typography-h4-font-weight);
font-weight: var(--typography-header-h4-font-weight);
}

.group-header .first-content {
Expand All @@ -96,7 +96,7 @@ dss-loading-placeholder {
tbody td,
tr.column-footer td {
padding: var(--size-0-25) var(--horizontal-cell-padding);
font-weight: var(--typography-small-font-weight);
font-weight: var(--typography-body-small-font-weight);
white-space: nowrap;
}

Expand All @@ -113,7 +113,7 @@ tbody tr:hover {
}

.sortable-header:has(dss-icon) {
font-weight: var(--typography-h4-font-weight);
font-weight: var(--typography-header-h4-font-weight);
}

.sort-icon {
Expand Down Expand Up @@ -151,8 +151,8 @@ tfoot {
justify-content: space-between;
align-items: flex-start;
padding-top: var(--size-0-5);
font-size: var(--typography-small-font-size);
line-height: var(--typography-small-line-height);
font-size: var(--typography-body-small-font-size);
line-height: var(--typography-body-small-line-height);
}

.footer-information {
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/components/tag/tag.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
}

.tag-container {
border-radius: calc((var(--typography-main-line-height) + (2 * var(--vertical-padding))) / 2);
border-radius: calc((var(--typography-body-main-line-height) + (2 * var(--vertical-padding))) / 2);
border-width: var(--size-px);
border-style: solid;
padding: var(--vertical-padding) var(--size-2);
Expand Down
2 changes: 1 addition & 1 deletion web-components/src/htmlTags/link/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
a {
text-decoration: none;
color: var(--color-brand-interaction-100);
font-weight: var(--typography-h4-font-weight);
font-weight: var(--typography-header-h4-font-weight);
font-size: var(--typography-main-font-size);
display: inline-flex;
gap: var(--size-1);
Expand Down
Loading