diff --git a/src/Button/index.scss b/src/Button/index.scss index 22c6b07fa2..62e5635271 100644 --- a/src/Button/index.scss +++ b/src/Button/index.scss @@ -91,8 +91,6 @@ opacity: var(--pgn-other-btn-disabled-opacity); } - // Button Icon Sizes - .btn-icon-before { margin-inline-end: .5rem; margin-left: -.25em; diff --git a/src/Chip/index.scss b/src/Chip/index.scss index c305d738ec..69960d370a 100644 --- a/src/Chip/index.scss +++ b/src/Chip/index.scss @@ -93,11 +93,12 @@ background-color: var(--pgn-color-chip-bg-dark); &.selected { - @include chip-outline(var(--pgn-color-chip-outline-dark), - calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1), - calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)), - var(--pgn-spacing-chip-outline-selected-distance-dark) - ); + @include chip-outline( + var(--pgn-color-chip-outline-dark), + calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1), + calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)), + var(--pgn-spacing-chip-outline-selected-distance-dark) + ); &:focus { border: 1px solid var(--pgn-color-chip-border-focus-selected-dark); diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss index 1038adeb7a..7e3fd8b4d9 100644 --- a/src/Chip/mixins.scss +++ b/src/Chip/mixins.scss @@ -1,8 +1,8 @@ @mixin chip-outline( $outline-color: var(--pgn-color-white), $distance-to-border: 0, - $border-radius: 50%, - $border-width-value: .125rem + $outline-border-radius: 50%, + $outline-border-width: .125rem ) { &::before { content: ""; @@ -11,8 +11,8 @@ right: $distance-to-border; bottom: $distance-to-border; left: $distance-to-border; - border: solid $border-width-value $outline-color; - border-radius: var(--pgn-size-border-radius-base); + border: solid $outline-border-width $outline-color; + border-radius: $outline-border-radius; } } diff --git a/src/Collapsible/index.scss b/src/Collapsible/index.scss index acfb619d14..4ab345dd3f 100644 --- a/src/Collapsible/index.scss +++ b/src/Collapsible/index.scss @@ -6,7 +6,7 @@ .collapsible-trigger { padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base); - border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); + border-radius: var(--pgn-size-card-border-radius-inner); border-bottom: var(--pgn-size-card-border-width) solid transparent; transition: border-color 100ms ease 150ms; cursor: pointer; @@ -22,8 +22,8 @@ &[aria-expanded="true"] { border-radius: - calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) - calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0; + var(--pgn-size-card-border-radius-inner) + var(--pgn-size-card-border-radius-inner) 0 0; border-color: var(--pgn-color-card-border-base); transition: none; text-align: start; diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index b6709119c3..0215d3daad 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -112,7 +112,6 @@ --pgn-typography-headings-font-family: inherit; --pgn-typography-dropdown-item-text-decoration: none; --pgn-typography-code-font-size: 87.5%; - --pgn-typography-breadcrumb-font-size: inherit; --pgn-typography-badge-font-size: 75%; --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; @@ -225,10 +224,8 @@ --pgn-spacing-chip-outline-focus-distance-light: .313rem; --pgn-spacing-chip-outline-selected-distance-dark: 3px; --pgn-spacing-chip-outline-selected-distance-light: 3px; - --pgn-spacing-chip-padding-to-icon: 3px; - --pgn-spacing-chip-padding-icon: .25rem; --pgn-spacing-chip-padding-x: .5rem; - --pgn-spacing-chip-padding-y: .125rem; + --pgn-spacing-chip-padding-y: 1px; --pgn-spacing-chip-margin-icon: .25rem; --pgn-spacing-chip-margin-base: .125rem; --pgn-spacing-carousel-indicator-spacer: 3px; @@ -248,10 +245,6 @@ --pgn-spacing-bubble-expandable-padding-x: .25rem; --pgn-spacing-bubble-expandable-padding-y: 0; --pgn-spacing-breadcrumb-margin-left: .5rem; - --pgn-spacing-breadcrumb-margin-bottom: 1rem; - --pgn-spacing-breadcrumb-padding-item: .5rem; - --pgn-spacing-breadcrumb-padding-x: 1rem; - --pgn-spacing-breadcrumb-padding-y: .75rem; --pgn-spacing-badge-padding-y: .125rem; --pgn-spacing-badge-padding-x-pill: .6em; --pgn-spacing-badge-padding-x-base: .5rem; @@ -370,8 +363,8 @@ --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px); --pgn-size-color-picker-sm: 2rem; --pgn-size-code-pre-scrollable-max-height: 340px; - --pgn-size-chip-icon: 1.25rem; - --pgn-size-chip-border-radius: .25rem; + --pgn-size-chip-icon: 1.5rem; + --pgn-size-chip-border-radius: .375rem; --pgn-size-carousel-caption-width: 70%; --pgn-size-carousel-indicator-height-area-hit: 10px; --pgn-size-carousel-indicator-height-base: 3px; @@ -549,7 +542,6 @@ --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base); --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); @@ -589,6 +581,7 @@ --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base); + --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)); --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base); --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 1bae2b7833..7965168e70 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -257,8 +257,7 @@ --pgn-elevation-code-kbd-box-shadow: none; --pgn-elevation-btn-box-shadow-active: none; --pgn-elevation-btn-box-shadow-base: none; - --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-popover-box-shadow: none; --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); @@ -565,7 +564,6 @@ --pgn-color-bubble-text-warning: var(--pgn-color-white); --pgn-color-bubble-text-success: var(--pgn-color-white); --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white); - --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200); --pgn-color-badge-bg-dark: var(--pgn-color-dark-base); --pgn-color-badge-bg-light: var(--pgn-color-light-base); --pgn-color-badge-bg-primary: var(--pgn-color-primary-base); @@ -940,7 +938,7 @@ --pgn-color-chip-border-base: var(--pgn-color-light-800); --pgn-color-chip-bg-dark: var(--pgn-color-primary-300); --pgn-color-card-divider-bg: var(--pgn-color-light-400); - --pgn-color-card-border-focus-base: #0A305580; + --pgn-color-card-border-focus-base: var(--pgn-color-primary-500); --pgn-color-card-bg-muted: var(--pgn-color-light-200); --pgn-color-card-bg-dark: var(--pgn-color-primary-500); --pgn-color-card-bg-base: var(--pgn-color-bg-base); diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index c950f1df9b..89b11c9c22 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -1,18 +1,7 @@ { - "typography": { - "breadcrumb": { - "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" } - } - }, "spacing": { "breadcrumb": { - "padding": { - "y": { "value": ".75rem", "type": "dimension", "source": "$breadcrumb-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-padding-x" }, - "item": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-item-padding" } - }, "margin": { - "bottom": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-margin-bottom" }, "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" } } } @@ -21,9 +10,6 @@ "breadcrumb": { "border": { "radius": { - "base": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$breadcrumb-border-radius" - }, "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" } }, "axis": { diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index ebad10d279..7419bfb6a5 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -44,7 +44,12 @@ "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" }, "radius": { "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" }, - "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" } + "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }, + "inner": { + "value": "calc({size.card.border.radius.base} - {size.card.border.width})", + "type": "dimension", + "source": "$card-inner-border-radius" + } } }, "focus": { diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index 6db61cc898..d22606c1dd 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -8,10 +8,8 @@ "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" } }, "padding": { - "y": { "value": ".125rem", "type": "dimension", "source": "$chip-padding-y" }, - "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }, - "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-padding" }, - "to-icon": { "value": "3px", "type": "dimension", "source": "$chip-padding-to-icon" } + "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" }, + "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" } }, "outline": { "selected-distance": { @@ -36,8 +34,8 @@ }, "size": { "chip": { - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" }, - "icon": { "value": "1.25rem", "type": "dimension", "source": "$chip-icon-size" } + "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" }, + "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" } } } } diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json index 1ccd3bbfac..723ab050b5 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -34,14 +34,5 @@ } } } - }, - "elevation": { - "alert": { - "box-shadow": { - "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$alert-box-shadow" - } - } } } diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 24db7e10c9..868e08e3d4 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -2,7 +2,7 @@ "elevation": { "annotation": { "box-shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", "type": "shadow", "source": "$annotation-box-shadow" } @@ -11,18 +11,18 @@ "color": { "annotation": { "text": { - "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color"}, - "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color"}, - "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color"}, - "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color"}, - "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color"} + "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" }, + "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" }, + "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" }, + "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" }, + "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg"}, - "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg"}, - "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg"}, - "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg"}, - "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"} + "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" }, + "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" }, + "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" }, + "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" }, + "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" } } } } diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json index 0e48a0a4d5..614960f5f8 100644 --- a/tokens/src/themes/light/components/Avatar.json +++ b/tokens/src/themes/light/components/Avatar.json @@ -1,7 +1,7 @@ { "color": { "avatar": { - "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" } + "border": { "value": "{color.light.300}", "type": "color" } } } } diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index e49229d148..25ec20acef 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -1,7 +1,6 @@ { "color": { "breadcrumb": { - "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" }, "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, "inverse": { diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index 338a4c65a5..c7deddea25 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -8,7 +8,7 @@ "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" } }, "border": { - "base": { + "base": { "value": "{color.black}", "type": "color", "source": "$card-border-color", @@ -21,11 +21,7 @@ "base": { "value": "{color.primary.500}", "type": "color", - "source": "$card-border-focus-color", - "modify": [{ - "type": "alpha", - "amount": 0.5 - }] + "source": "$card-border-focus-color" }, "dark": { "value": "{color.theme.focus.primary}",