From 7eb036c834d0eefd708ea3a6189a34f4a8834668 Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 11 Jul 2024 12:09:00 -0500 Subject: [PATCH 1/4] chore(tokens): get latest from figma --- .../module/build/css/tokens-charts-dark.scss | 2 +- packages/module/build/css/tokens-charts.scss | 2 +- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 32 ++- packages/module/build/css/tokens-palette.scss | 2 +- .../module/tokens/default/base.dimension.json | 50 +++- .../tokens/default/semantic.dimension.json | 244 ++++++++++++------ 7 files changed, 237 insertions(+), 97 deletions(-) diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index b0c3f4b..ec84209 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 02 Jul 2024 18:11:52 GMT +// Generated on Thu, 11 Jul 2024 17:07:32 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index f6f1e29..949cd56 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 02 Jul 2024 18:11:52 GMT +// Generated on Thu, 11 Jul 2024 17:07:32 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index ae5918d..a2999ac 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 02 Jul 2024 18:11:52 GMT +// Generated on Thu, 11 Jul 2024 17:07:32 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 40340e0..337bdaa 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 02 Jul 2024 18:11:52 GMT +// Generated on Thu, 11 Jul 2024 17:07:32 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); @@ -55,9 +55,9 @@ --pf-t--global--duration--50: 50ms; --pf-t--global--duration--500: 500ms; --pf-t--global--duration--600: 600ms; - --pf-t--global--font--family--100: Red Hat Text VF; - --pf-t--global--font--family--200: Red Hat Display VF; - --pf-t--global--font--family--300: Red Hat Mono VF; + --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; + --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; + --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; --pf-t--global--font--line-height--100: 1.2999999523162842; --pf-t--global--font--line-height--200: 1.5; --pf-t--global--font--size--100: 0.75rem; @@ -86,6 +86,10 @@ --pf-t--global--spacer--600: 3rem; --pf-t--global--spacer--700: 4rem; --pf-t--global--spacer--800: 5rem; + --pf-t--global--text-decoration--line--100: none; + --pf-t--global--text-decoration--line--200: underline; + --pf-t--global--text-decoration--style--100: solid; + --pf-t--global--text-decoration--style--200: dashed; --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); @@ -236,8 +240,8 @@ --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); - --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100); - --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200); + --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); + --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); @@ -286,6 +290,18 @@ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); + --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); + --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); @@ -454,6 +470,8 @@ --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl); --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100); @@ -467,6 +485,8 @@ --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); + --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs); + --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular); --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index 1a96c99..ae13be7 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 02 Jul 2024 18:11:52 GMT +// Generated on Thu, 11 Jul 2024 17:07:32 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; diff --git a/packages/module/tokens/default/base.dimension.json b/packages/module/tokens/default/base.dimension.json index 35eaf6b..fbc32e9 100644 --- a/packages/module/tokens/default/base.dimension.json +++ b/packages/module/tokens/default/base.dimension.json @@ -106,20 +106,6 @@ } }, "font": { - "family": { - "100": { - "type": "string", - "value": "Red Hat Text VF" - }, - "200": { - "type": "string", - "value": "Red Hat Display VF" - }, - "300": { - "type": "string", - "value": "Red Hat Mono VF" - } - }, "weight": { "100": { "type": "number", @@ -181,6 +167,20 @@ "type": "number", "value": 36 } + }, + "family": { + "100": { + "type": "string", + "value": "\"Red Hat Text\", \"RedHatText\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif" + }, + "200": { + "type": "string", + "value": "\"Red Hat Display\", \"RedHatDisplay\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif" + }, + "300": { + "type": "string", + "value": "\"Red Hat Mono\", \"RedHatMono\", \"Courier New\", Courier, monospace" + } } }, "z-index": { @@ -328,6 +328,28 @@ "type": "number", "value": 1450 } + }, + "text-decoration": { + "line": { + "100": { + "type": "string", + "value": "none" + }, + "200": { + "type": "string", + "value": "underline" + } + }, + "style": { + "100": { + "type": "string", + "value": "solid" + }, + "200": { + "type": "string", + "value": "dashed" + } + } } } } \ No newline at end of file diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index 4411216..cd64e8e 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -214,6 +214,47 @@ } } }, + "action": { + "horizontal": { + "default": { + "description": "Use to set the horizontal padding inside a default action, like buttons.", + "type": "number", + "value": "{global.spacer.lg}" + }, + "plain": { + "description": "Use to set the horizontal padding inside a plain action, like plain buttons.", + "type": "number", + "value": "{global.spacer.sm}", + "compact": { + "description": "Use to set the horizontal padding inside a compact, plain action/button.", + "type": "number", + "value": "{global.spacer.xs}" + } + }, + "compact": { + "description": "Use to set the horizontal padding inside a compact action, like compact buttons.", + "type": "number", + "value": "{global.spacer.md}" + }, + "spacious": { + "description": "Use to set the horizontal padding inside a large/display action, like CTAs.", + "type": "number", + "value": "{global.spacer.xl}" + } + }, + "vertical": { + "compact": { + "description": "Use to set the vertical padding inside a compact action, like compact buttons.", + "type": "number", + "value": "{global.spacer.xs}" + }, + "spacious": { + "description": "Use to set the vertical padding inside a large/display action, like CTAs.", + "type": "number", + "value": "{global.spacer.md}" + } + } + }, "gap": { "text-to-element": { "default": { @@ -266,45 +307,16 @@ } } }, - "action": { - "horizontal": { - "default": { - "description": "Use to set the horizontal padding inside a default action, like buttons.", - "type": "number", - "value": "{global.spacer.lg}" - }, - "plain": { - "description": "Use to set the horizontal padding inside a plain action, like plain buttons.", - "type": "number", - "value": "{global.spacer.sm}", - "compact": { - "description": "Use to set the horizontal padding inside a compact, plain action/button.", - "type": "number", - "value": "{global.spacer.xs}" - } - }, - "compact": { - "description": "Use to set the horizontal padding inside a compact action, like compact buttons.", - "type": "number", - "value": "{global.spacer.md}" - }, - "spacious": { - "description": "Use to set the horizontal padding inside a large/display action, like CTAs.", - "type": "number", - "value": "{global.spacer.xl}" - } - }, - "vertical": { - "compact": { - "description": "Use to set the vertical padding inside a compact action, like compact buttons.", - "type": "number", - "value": "{global.spacer.xs}" - }, - "spacious": { - "description": "Use to set the vertical padding inside a large/display action, like CTAs.", - "type": "number", - "value": "{global.spacer.md}" - } + "inset": { + "page-chrome": { + "type": "number", + "value": "{global.spacer.lg}" + } + }, + "gutter": { + "default": { + "type": "number", + "value": "{global.spacer.md}" } } }, @@ -335,12 +347,24 @@ "type": "number", "value": "{global.icon.size.400}" }, - "3xl": { - "description": "Use for triple extra large icons.", - "type": "number", - "value": "{global.icon.size.500}" - }, "font": { + "body": { + "sm": { + "description": "Use for icons that are placed inline with small body text", + "type": "number", + "value": "{global.font.size.body.sm}" + }, + "default": { + "description": "Use for icons that are placed inline with default body text", + "type": "number", + "value": "{global.font.size.body.default}" + }, + "lg": { + "description": "Use for icons that are placed inline with large body text", + "type": "number", + "value": "{global.font.size.body.lg}" + } + }, "heading": { "h1": { "description": "Use for icons that are placed inline with first level headings", @@ -373,23 +397,6 @@ "value": "{global.font.size.heading.h6}" } }, - "body": { - "sm": { - "description": "Use for icons that are placed inline with small body text", - "type": "number", - "value": "{global.font.size.body.sm}" - }, - "default": { - "description": "Use for icons that are placed inline with default body text", - "type": "number", - "value": "{global.font.size.body.default}" - }, - "lg": { - "description": "Use for icons that are placed inline with large body text", - "type": "number", - "value": "{global.font.size.body.lg}" - } - }, "xs": { "description": "Use for icons that are placed inline with font–size–xs text", "type": "number", @@ -430,10 +437,27 @@ "type": "number", "value": "{global.font.size.4xl}" } + }, + "3xl": { + "description": "Use for triple extra large icons.", + "type": "number", + "value": "{global.icon.size.500}" } } }, "font": { + "line-height": { + "body": { + "description": "Use to define the line height for body text", + "type": "number", + "value": "{global.font.line-height.200}" + }, + "heading": { + "description": "Use to define the line height for heading text", + "type": "number", + "value": "{global.font.line-height.100}" + } + }, "weight": { "body": { "description": "Use to define the default weight for body text", @@ -456,18 +480,6 @@ } } }, - "line-height": { - "body": { - "description": "Use to define the line height for body text", - "type": "number", - "value": "{global.font.line-height.100}" - }, - "heading": { - "description": "Use to define the line height for heading text", - "type": "number", - "value": "{global.font.line-height.200}" - } - }, "family": { "body": { "description": "Use to define the font family for body text", @@ -578,26 +590,32 @@ }, "z-index": { "xs": { + "description": "Use to set an extra small z-index, to display an element below other elements with a larger z-index. Use for smaller parts of a component that need to overlap adjacent elements, like box shadows of hovered elements.", "type": "number", "value": "{global.z-index.100}" }, "sm": { + "description": "Use to set a small z-index, to display an element above other elements with smaller z-indexes. Use for components that need to appear above surrounding elements, like menus/dropdowns.", "type": "number", "value": "{global.z-index.200}" }, "md": { + "description": "Use to set a medium z-index, to display an element above other elements with smaller z-indexes Use for sticky elements, like banners and page sections.", "type": "number", "value": "{global.z-index.300}" }, "lg": { + "description": "Use to set a large z-index, to display an element above other elements with smaller z-indexes Use for the backdrop component, which appears beneath an open modal.", "type": "number", "value": "{global.z-index.400}" }, "xl": { + "description": "Use to set an extra large z-index, to display an element above other elements with smaller z-indexes. Use for modals.", "type": "number", "value": "{global.z-index.500}" }, "2xl": { + "description": "Use to set a double extra large z-index, to display an element above all other page elements. Use for elements that should appear on top of all others, like toast alert groups.", "type": "number", "value": "{global.z-index.600}" } @@ -862,6 +880,86 @@ "value": "{global.breakpoint.550}" } } + }, + "text-decoration": { + "width": { + "default": { + "type": "number", + "value": "{global.border.width.regular}" + } + }, + "offset": { + "default": { + "type": "number", + "value": "{global.spacer.xs}" + } + }, + "editable-text": { + "line": { + "default": { + "type": "number", + "value": "{global.text-decoration.line.200}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.line.200}" + } + }, + "style": { + "default": { + "type": "number", + "value": "{global.text-decoration.style.200}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.style.200}" + } + } + }, + "link": { + "line": { + "default": { + "type": "number", + "value": "{global.text-decoration.style.200}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.style.200}" + } + }, + "style": { + "default": { + "type": "number", + "value": "{global.text-decoration.style.100}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.style.100}" + } + } + }, + "help-text": { + "line": { + "default": { + "type": "number", + "value": "{global.text-decoration.line.200}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.line.200}" + } + }, + "style": { + "default": { + "type": "number", + "value": "{global.text-decoration.style.200}" + }, + "hover": { + "type": "number", + "value": "{global.text-decoration.style.200}" + } + } + } } } } \ No newline at end of file From a15afb8b7b527cbc7633328a143bc79e79481861 Mon Sep 17 00:00:00 2001 From: mcoker Date: Fri, 12 Jul 2024 10:41:19 -0500 Subject: [PATCH 2/4] chore(tokens): font-weight fix, build script, use corepack --- package.json | 4 +++- .../module/build/css/tokens-charts-dark.scss | 2 +- packages/module/build/css/tokens-charts.scss | 2 +- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 8 +++++--- packages/module/build/css/tokens-palette.scss | 2 +- .../tokens/default/semantic.dimension.json | 16 ++++++++++------ 7 files changed, 22 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 49ea312..7d3bb60 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "build:docs": "yarn workspace @patternfly/design-tokens docs:build", "build:fed:packages": "yarn workspace @patternfly/design-tokens build:fed:packages", "build:scss": "yarn workspace @patternfly/design-tokens build:scss", + "build:scss:core": "yarn build:scss -s '@mixin pf-v6-tokens'", "build:plugin": "yarn workspace @patternfly/design-tokens build:plugin", "start": "yarn build && concurrently --kill-others \"yarn workspace @patternfly/design-tokens docs:develop\"", "serve:docs": "yarn workspace @patternfly/design-tokens docs:serve", @@ -45,5 +46,6 @@ "@babel/preset-flow": "^7.18.6", "@babel/preset-typescript": "^7.18.6", "serve": "^14.1.2" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index ec84209..d06d3cb 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 11 Jul 2024 17:07:32 GMT +// Generated on Fri, 12 Jul 2024 15:40:40 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index 949cd56..fcd8417 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 11 Jul 2024 17:07:32 GMT +// Generated on Fri, 12 Jul 2024 15:40:40 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index a2999ac..b9d81d2 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 11 Jul 2024 17:07:32 GMT +// Generated on Fri, 12 Jul 2024 15:40:40 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 337bdaa..19cdd7b 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 11 Jul 2024 17:07:32 GMT +// Generated on Fri, 12 Jul 2024 15:40:40 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); @@ -250,8 +250,10 @@ --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); - --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--100); - --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--300); + --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); + --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); + --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); + --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--300: var(--pf-t--color--white); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index ae13be7..dca7271 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 11 Jul 2024 17:07:32 GMT +// Generated on Fri, 12 Jul 2024 15:40:40 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index cd64e8e..75a63b2 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -460,9 +460,11 @@ }, "weight": { "body": { - "description": "Use to define the default weight for body text", - "type": "number", - "value": "{global.font.weight.100}", + "default": { + "description": "Use to define the default weight for body text", + "type": "number", + "value": "{global.font.weight.100}" + }, "bold": { "description": "Use to define the bold weight for body text, often used to field labels or to add emphasis.", "type": "number", @@ -470,9 +472,11 @@ } }, "heading": { - "description": "Use to define the default weight for heading text", - "type": "number", - "value": "{global.font.weight.300}", + "default": { + "description": "Use to define the default weight for heading text", + "type": "number", + "value": "{global.font.weight.300}" + }, "bold": { "description": "Use to define the bold weight for heading text, often used to add emphasis.", "type": "number", From 9a812d6917dd25e9a3ed73632b14d5a96d5d735e Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 16 Jul 2024 18:45:21 -0500 Subject: [PATCH 3/4] chore(tokens): semantic spacer updates --- .../module/build/css/tokens-charts-dark.scss | 2 +- packages/module/build/css/tokens-charts.scss | 2 +- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 8 +++--- packages/module/build/css/tokens-palette.scss | 2 +- .../tokens/default/semantic.dimension.json | 27 ++++++++----------- 6 files changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index d06d3cb..575a9b2 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 12 Jul 2024 15:40:40 GMT +// Generated on Tue, 16 Jul 2024 23:44:44 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index fcd8417..933e53d 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 12 Jul 2024 15:40:40 GMT +// Generated on Tue, 16 Jul 2024 23:44:44 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index b9d81d2..bb94f20 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 12 Jul 2024 15:40:40 GMT +// Generated on Tue, 16 Jul 2024 23:44:44 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 19cdd7b..aa18f82 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 12 Jul 2024 15:40:40 GMT +// Generated on Tue, 16 Jul 2024 23:44:44 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); @@ -453,10 +453,9 @@ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg); --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); - --pf-t--global--spacer--action--horizontal--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); - --pf-t--global--spacer--action--vertical--compact: var(--pf-t--global--spacer--xs); - --pf-t--global--spacer--action--vertical--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); @@ -464,6 +463,7 @@ --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index dca7271..d820167 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 12 Jul 2024 15:40:40 GMT +// Generated on Tue, 16 Jul 2024 23:44:44 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index 75a63b2..2d3560d 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -186,9 +186,14 @@ "value": "{global.spacer.xs}" }, "plain": { - "description": "Use to set the vertical padding inside of plain controls, like in plain menu toggles.", + "description": "Use to set the vertical padding inside of plain controls, like in plain menu toggles and plain buttons.", "type": "number", "value": "{global.spacer.sm}" + }, + "spacious": { + "description": "Use to set the vertical padding inside a large/display controls. This is used across buttons, text inputs, menu toggles, etc.", + "type": "number", + "value": "{global.spacer.md}" } }, "horizontal": { @@ -222,9 +227,11 @@ "value": "{global.spacer.lg}" }, "plain": { - "description": "Use to set the horizontal padding inside a plain action, like plain buttons.", - "type": "number", - "value": "{global.spacer.sm}", + "default": { + "description": "Use to set the horizontal padding inside a plain action, like plain buttons.", + "type": "number", + "value": "{global.spacer.sm}" + }, "compact": { "description": "Use to set the horizontal padding inside a compact, plain action/button.", "type": "number", @@ -241,18 +248,6 @@ "type": "number", "value": "{global.spacer.xl}" } - }, - "vertical": { - "compact": { - "description": "Use to set the vertical padding inside a compact action, like compact buttons.", - "type": "number", - "value": "{global.spacer.xs}" - }, - "spacious": { - "description": "Use to set the vertical padding inside a large/display action, like CTAs.", - "type": "number", - "value": "{global.spacer.md}" - } } }, "gap": { From f9073d1829d28df16eb42312ce26bf2e5fa04e8e Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 18 Jul 2024 17:28:15 -0500 Subject: [PATCH 4/4] chore(tokens): change to link text decoration --- packages/module/build/css/tokens-charts-dark.scss | 2 +- packages/module/build/css/tokens-charts.scss | 2 +- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 6 +++--- packages/module/build/css/tokens-palette.scss | 2 +- packages/module/tokens/default/semantic.dimension.json | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 575a9b2..8d31c3a 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 16 Jul 2024 23:44:44 GMT +// Generated on Thu, 18 Jul 2024 22:27:54 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index 933e53d..778939e 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 16 Jul 2024 23:44:44 GMT +// Generated on Thu, 18 Jul 2024 22:27:54 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index bb94f20..8bc6668 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 16 Jul 2024 23:44:44 GMT +// Generated on Thu, 18 Jul 2024 22:27:54 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index aa18f82..1820062 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 16 Jul 2024 23:44:44 GMT +// Generated on Thu, 18 Jul 2024 22:27:54 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); @@ -300,8 +300,8 @@ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); - --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200); - --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index d820167..6b10762 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 16 Jul 2024 23:44:44 GMT +// Generated on Thu, 18 Jul 2024 22:27:54 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json index 2d3560d..056e976 100644 --- a/packages/module/tokens/default/semantic.dimension.json +++ b/packages/module/tokens/default/semantic.dimension.json @@ -919,11 +919,11 @@ "line": { "default": { "type": "number", - "value": "{global.text-decoration.style.200}" + "value": "{global.text-decoration.line.200}" }, "hover": { "type": "number", - "value": "{global.text-decoration.style.200}" + "value": "{global.text-decoration.line.200}" } }, "style": {