diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index e4fd4fdef7..8111709a07 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 09 May 2024 13:33:11 GMT + * Generated on Mon, 13 May 2024 08:42:31 GMT */ :root { @@ -73,6 +73,7 @@ --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --pgn-typography-font-family-serif: serif; --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --pgn-typography-print-page-size: a3; --pgn-typography-display-mobile: 3.25rem; --pgn-typography-display-line-height-mobile: 3.5rem; --pgn-typography-display-line-height-base: 1; @@ -364,7 +365,7 @@ --pgn-size-data-table-dropdown-pagination-max-height: 60vh; --pgn-size-data-table-border: 1px; --pgn-size-container-max-width-xl: 1440px; - --pgn-size-container-max-width-lg: 1192px; + --pgn-size-container-max-width-lg: 1196px; --pgn-size-container-max-width-md: 952px; --pgn-size-container-max-width-sm: 708px; --pgn-size-container-max-width-xs: 464px; @@ -406,9 +407,9 @@ --pgn-size-annotation-arrow-border-width: .5rem; --pgn-size-alert-border-width: 0; --pgn-size-rounded-pill: 50rem; - --pgn-size-border-radius-sm: 4px; - --pgn-size-border-radius-lg: 7px; - --pgn-size-border-radius-base: 6px; + --pgn-size-border-radius-sm: .25rem; + --pgn-size-border-radius-lg: .425rem; + --pgn-size-border-radius-base: .375rem; --pgn-size-border-width: 1px; --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 2fda4ab1f7..b2abf4595e 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 09 May 2024 13:33:11 GMT + * Generated on Mon, 13 May 2024 08:42:31 GMT */ :root { @@ -453,11 +453,13 @@ --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base); --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base); + --pgn-color-yiq-light: var(--pgn-color-white); --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200); --pgn-color-list-group-action-base: var(--pgn-color-gray-700); --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600); --pgn-color-list-group-border: #00000020; --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100); + --pgn-color-list-group-bg-base: var(--pgn-color-white); --pgn-color-hr-border: #0000001A; --pgn-color-headings-base: var(--pgn-color-black); --pgn-color-body-base: var(--pgn-color-gray-700); @@ -896,11 +898,12 @@ --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base); --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent); --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base); + --pgn-color-blockquote-small: var(--pgn-color-gray-500); --pgn-color-text-muted: var(--pgn-color-gray-500); --pgn-color-list-group-action-active-base: var(--pgn-color-body-base); --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base); + --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base); --pgn-color-list-group-active-base: var(--pgn-color-active); - --pgn-color-list-group-bg-base: var(--pgn-color-bg-base); --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500); --pgn-color-link-brand-base: var(--pgn-color-brand-500); --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500); @@ -1233,7 +1236,6 @@ --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base); --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base); --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base); - --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base); --pgn-color-list-group-active-bg: var(--pgn-color-bg-active); --pgn-color-link-brand-inline-hover-base: #51002BFF; --pgn-color-link-brand-inline-decoration: #9D00544D; @@ -1468,7 +1470,7 @@ --pgn-color-theme-bg-success: var(--pgn-color-success-100); --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); --pgn-color-table-caption: var(--pgn-color-text-muted); - --pgn-color-input-btn-focus: var(--pgn-color-input-focus); + --pgn-color-input-btn-focus: var(--pgn-color-bg-active); --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,'); --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e"); --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e"); diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index 26261f9485..5e1f358f1a 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -282,7 +282,7 @@ $element-color-levels: map-merge( "border": 200, "icon": 300, "active-border": 300, - "focus": 300, + "focus": 500, "graphic": 300, "default": 500, "light-text": 500, @@ -303,7 +303,7 @@ $yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. $yiq-text-dark: theme-color("gray", "text") !default; -$yiq-text-light: $white !default; +$yiq-text-light: var(--pgn-color-yiq-light) !default; // Characters which are escaped by the escape-svg function $escaped-characters: ( @@ -323,7 +323,6 @@ $enable-rounded: true !default; $enable-gradients: false !default; $enable-transitions: true !default; $enable-prefers-reduced-motion-media-query: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS $enable-grid-classes: true !default; $enable-pointer-cursor-for-buttons: true !default; $enable-print-styles: true !default; @@ -750,7 +749,7 @@ $micro-line-height: var(--pgn-typography-line-height-micro); $text-muted: var(--pgn-color-text-muted) !default; -$blockquote-small-color: theme-color("gray", "light-text") !default; +$blockquote-small-color: var(--pgn-color-blockquote-small) !default; $blockquote-small-font-size: var(--pgn-typography-blockquote-small-font-size) !default; $blockquote-font-size: var(--pgn-typography-blockquote-font-size) !default; @@ -837,7 +836,7 @@ $user-selects: all, auto, none !default; // Printing -$print-page-size: a3 !default; +$print-page-size: var(--pgn-typography-print-page-size) !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default; // List group diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss index 32bb8a63ca..bf494f1da6 100644 --- a/styles/scss/core/core.scss +++ b/styles/scss/core/core.scss @@ -18,4 +18,4 @@ @import "../../css/core/custom-media-breakpoints"; // Paragon components -@import "../../../src/index"; +@import "../../../src"; diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index 838f3cb683..c4ad933cec 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -3,9 +3,9 @@ "border": { "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." }, "radius": { - "base": { "value": "6px", "type": "dimension", "source": "$border-radius", "description": "Default border radius." }, - "lg": { "value": "7px", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." }, - "sm": { "value": "4px", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." } + "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." }, + "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." }, + "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." } } }, "rounded": { diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json index 4f9b676d6a..d71dbf1756 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -5,7 +5,7 @@ "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" }, "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" }, "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" }, - "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" }, + "lg": { "value": "1196px", "type": "dimension", "source": "$max-width-lg" }, "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" } } } diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json index 20e114d511..3f892d460b 100644 --- a/tokens/src/core/global/display.json +++ b/tokens/src/core/global/display.json @@ -16,6 +16,7 @@ "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." }, "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." } } - } + }, + "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" } } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index c94d33e2b8..0e4cbb5e76 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -16,13 +16,15 @@ "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" } }, "label": { - "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." } + "margin-bottom": { + "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label." + } }, "table": { "cell": { "padding": { - "base": { "value": "75rem", "type": "dimension", "description": "Padding for tables." }, - "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." } + "base": { "value": "75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." }, + "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." } } } }, diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index 58d1299348..58e1b3753e 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -29,10 +29,10 @@ }, "table": { "caption": { - "value": "{color.text-muted}", "type": "color", "description": "Table caption color." + "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color." }, "border": { - "value": "{color.border}", "type": "color", "description": "Table border color." + "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color." } }, "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." }, diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index d661e658f7..f62b15e999 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -1,7 +1,7 @@ { "color": { "input": { - "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" } + "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" } } }, "elevation": { diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index e6bc07eb82..5a990dcb38 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -37,7 +37,7 @@ "value": "{color.link.muted.base}", "type": "color", "source": "$muted-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15}] + "modify": [{ "type": "darken", "amount": 0.15 }] }, "inline": { "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" }, diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index bfd9e824cd..516b93c479 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -3,7 +3,7 @@ "list-group": { "base": { "value": "inherit", "type": "color", "source": "$list-group-color" }, "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$list-group-bg" }, + "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" }, "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" } }, "border": { diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json index 7532d0e261..ab01882469 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,6 +1,12 @@ { "color": { "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, - "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" } + "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }, + "blockquote": { + "small": { + "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color" + } + }, + "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" } } }