diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json index 91938544c3e3..d498b3a86195 100644 --- a/packages/foundations/tailwind/tailwind-tokens.json +++ b/packages/foundations/tailwind/tailwind-tokens.json @@ -101,82 +101,25 @@ "head": "var(--db-font-family-head)" }, "fontSize": { - "base": [ - "var(--db-type-body-font-size-md)", - "var(--db-type-body-line-height-md)" - ], - "body-3xs": [ - "var(--db-type-body-font-size-3xs)", - "var(--db-type-body-line-height-3xs)" - ], - "body-2xs": [ - "var(--db-type-body-font-size-2xs)", - "var(--db-type-body-line-height-2xs)" - ], - "body-2xl": [ - "var(--db-type-body-font-size-2xl)", - "var(--db-type-body-line-height-2xl)" - ], - "body-3xl": [ - "var(--db-type-body-font-size-3xl)", - "var(--db-type-body-line-height-3xl)" - ], - "body-xs": [ - "var(--db-type-body-font-size-xs)", - "var(--db-type-body-line-height-xs)" - ], - "body-sm": [ - "var(--db-type-body-font-size-sm)", - "var(--db-type-body-line-height-sm)" - ], - "body-md": [ - "var(--db-type-body-font-size-md)", - "var(--db-type-body-line-height-md)" - ], - "body-lg": [ - "var(--db-type-body-font-size-lg)", - "var(--db-type-body-line-height-lg)" - ], - "body-xl": [ - "var(--db-type-body-font-size-xl)", - "var(--db-type-body-line-height-xl)" - ], - "head-3xs": [ - "var(--db-type-headline-font-size-3xs)", - "var(--db-type-headline-line-height-3xs)" - ], - "head-2xs": [ - "var(--db-type-headline-font-size-2xs)", - "var(--db-type-headline-line-height-2xs)" - ], - "head-2xl": [ - "var(--db-type-headline-font-size-2xl)", - "var(--db-type-headline-line-height-2xl)" - ], - "head-3xl": [ - "var(--db-type-headline-font-size-3xl)", - "var(--db-type-headline-line-height-3xl)" - ], - "head-xs": [ - "var(--db-type-headline-font-size-xs)", - "var(--db-type-headline-line-height-xs)" - ], - "head-sm": [ - "var(--db-type-headline-font-size-sm)", - "var(--db-type-headline-line-height-sm)" - ], - "head-md": [ - "var(--db-type-headline-font-size-md)", - "var(--db-type-headline-line-height-md)" - ], - "head-lg": [ - "var(--db-type-headline-font-size-lg)", - "var(--db-type-headline-line-height-lg)" - ], - "head-xl": [ - "var(--db-type-headline-font-size-xl)", - "var(--db-type-headline-line-height-xl)" - ] + "base": "var(--db-type-body-md)", + "body-3xs": "var(--db-type-body-3xs)", + "body-2xs": "var(--db-type-body-2xs)", + "body-xs": "var(--db-type-body-xs)", + "body-sm": "var(--db-type-body-sm)", + "body-md": "var(--db-type-body-md)", + "body-lg": "var(--db-type-body-lg)", + "body-xl": "var(--db-type-body-xl)", + "body-2xl": "var(--db-type-body-2xl)", + "body-3xl": "var(--db-type-body-3xl)", + "head-3xs": "var(--db-type-headline-3xs)", + "head-2xs": "var(--db-type-headline-2xs)", + "head-xs": "var(--db-type-headline-xs)", + "head-sm": "var(--db-type-headline-sm)", + "head-md": "var(--db-type-headline-md)", + "head-lg": "var(--db-type-headline-lg)", + "head-xl": "var(--db-type-headline-xl)", + "head-2xl": "var(--db-type-headline-2xl)", + "head-3xl": "var(--db-type-headline-3xl)" }, "borderRadius": { "DEFAULT": "var(--db-border-radius-xs)", diff --git a/packages/foundations/tailwind/theme/index.css b/packages/foundations/tailwind/theme/index.css index 52cf2913a678..5785263e700e 100644 --- a/packages/foundations/tailwind/theme/index.css +++ b/packages/foundations/tailwind/theme/index.css @@ -11,44 +11,25 @@ --font-head: var(--db-font-family-head); --text-*: initial; /* Font size utilities like text-body-xl */ - --text-base: var(--db-type-body-font-size-md); - --text-base--line-height: var(--db-type-body-line-height-md); - --text-body-3xs: var(--db-type-body-font-size-3xs); - --text-body-3xs--line-height: var(--db-type-body-line-height-3xs); - --text-body-2xs: var(--db-type-body-font-size-2xs); - --text-body-2xs--line-height: var(--db-type-body-line-height-2xs); - --text-body-xs: var(--db-type-body-font-size-xs); - --text-body-xs--line-height: var(--db-type-body-line-height-xs); - --text-body-sm: var(--db-type-body-font-size-sm); - --text-body-sm--line-height: var(--db-type-body-line-height-sm); - --text-body-md: var(--db-type-body-font-size-md); - --text-body-md--line-height: var(--db-type-body-line-height-md); - --text-body-lg: var(--db-type-body-font-size-lg); - --text-body-lg--line-height: var(--db-type-body-line-height-lg); - --text-body-xl: var(--db-type-body-font-size-xl); - --text-body-xl--line-height: var(--db-type-body-line-height-xl); - --text-body-2xl: var(--db-type-body-font-size-2xl); - --text-body-2xl--line-height: var(--db-type-body-line-height-2xl); - --text-body-3xl: var(--db-type-body-font-size-3xl); - --text-body-3xl--line-height: var(--db-type-body-line-height-3xl); - --text-head-3xs: var(--db-type-headline-font-size-3xs); - --text-head-3xs--line-height: var(--db-type-headline-line-height-3xs); - --text-head-2xs: var(--db-type-headline-font-size-2xs); - --text-head-2xs--line-height: var(--db-type-headline-line-height-2xs); - --text-head-xs: var(--db-type-headline-font-size-xs); - --text-head-xs--line-height: var(--db-type-headline-line-height-xs); - --text-head-sm: var(--db-type-headline-font-size-sm); - --text-head-sm--line-height: var(--db-type-headline-line-height-sm); - --text-head-md: var(--db-type-headline-font-size-md); - --text-head-md--line-height: var(--db-type-headline-line-height-md); - --text-head-lg: var(--db-type-headline-font-size-lg); - --text-head-lg--line-height: var(--db-type-headline-line-height-lg); - --text-head-xl: var(--db-type-headline-font-size-xl); - --text-head-xl--line-height: var(--db-type-headline-line-height-xl); - --text-head-2xl: var(--db-type-headline-font-size-2xl); - --text-head-2xl--line-height: var(--db-type-headline-line-height-2xl); - --text-head-3xl: var(--db-type-headline-font-size-3xl); - --text-head-3xl--line-height: var(--db-type-headline-line-height-3xl); + --text-base: var(--db-type-body-md); + --text-body-3xs: var(--db-type-body-3xs); + --text-body-2xs: var(--db-type-body-2xs); + --text-body-xs: var(--db-type-body-xs); + --text-body-sm: var(--db-type-body-sm); + --text-body-md: var(--db-type-body-md); + --text-body-lg: var(--db-type-body-lg); + --text-body-xl: var(--db-type-body-xl); + --text-body-2xl: var(--db-type-body-2xl); + --text-body-3xl: var(--db-type-body-3xl); + --text-head-3xs: var(--db-type-headline-3xs); + --text-head-2xs: var(--db-type-headline-2xs); + --text-head-xs: var(--db-type-headline-xs); + --text-head-sm: var(--db-type-headline-sm); + --text-head-md: var(--db-type-headline-md); + --text-head-lg: var(--db-type-headline-lg); + --text-head-xl: var(--db-type-headline-xl); + --text-head-2xl: var(--db-type-headline-2xl); + --text-head-3xl: var(--db-type-headline-3xl); --breakpoint-*: initial; /* Responsive breakpoint variants like sm:* */ --breakpoint-xs: 360px;