@openedx/paragon 23.0.0-alpha.1 → 23.0.0-alpha.2

package/README.md

@@ -39,29 +39,39 @@ In your React project:
 import { ComponentName } from '@openedx/paragon';
 ```
 
-#### SCSS Foundation
+#### CSS Foundation
 
-Usage for Open edX and others:
+**Usage with no theme:**
 
-**index.scss**
+The Paragon CSS Foundation offers a collection of fundamental styles, encompassing padding, typography, and sizing.
+When applied, these styles contribute to the creation of a straightforward and neat appearance for your application.
+
+To integrate these foundational styles into your project, include the following import:
 
 ```
-// ... Any custom SCSS variables should be defined here
-@import '~@openedx/paragon/styles/scss/core/core.scss';
+@use "@openedx/paragon/dist/core.min.css";
 ```
 
-Usage on with `@edx/brand`:
+**Usage with a theme:**
+
+In addition to the basic styles, you can provide a theme layer that includes styles for colors, shadows, backgrounds
+and transparency of elements. This allows you to visually represent a specific theme in your application.
 
-**index.scss**
+To apply these theme-specific styles, include the following import:
 
 ```
-@import '~@edx/brand/paragon/fonts.scss';
-@import '~@edx/brand/paragon/variables.scss';
-@import '~@openedx/paragon/styles/scss/core/core.scss';
-@import '~@edx/brand/paragon/overrides.scss';
+@use "@openedx/paragon/dist/core.min.css";
+@use "@my-brand/light.min.css";
 ```
 
-Note that including fonts will affect performance.  In some applications may choose not to load the custom font to keep it highly performant.
+**CDN links:**
+
+Alternative style integration is available when using CDN links:
+
+```
+@import url("https://cdn.jsdelivr.net/npm/@my-brand/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@my-brand/light.min.css");
+```
 
 ## Paragon CLI
 
@@ -69,7 +79,8 @@ The Paragon CLI (Command Line Interface) is a tool that provides various utility
 
 ### Available Commands
 
-- `paragon install-theme [theme]`: Installs the specific [brand package](https://github.com/openedx/brand-openedx).
+- `paragon install-theme`: Install a [brand package](https://github.com/openedx/brand-openedx).
+- `paragon migrate-to-openedx-scope`: Migrate from "@edx/paragon" to "@openedx/paragon".
 - `paragon build-tokens`: Build Paragon's design tokens.
 - `paragon replace-variables`: Replace SCSS variables usages or definitions to CSS variables and vice versa in `.scss` files.
 - `paragon build-scss`: Compile Paragon's core and themes SCSS into CSS.
@@ -161,7 +172,7 @@ module.exports = {
 };
 ```
 
-Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/styles/scss/core";`
+Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/styles/scss/core/core.scss";`
 
 #### Internationalization
 
@@ -274,8 +285,7 @@ This will create a directory in `/src/` that will contain templates for all nece
 MyComponent
 ├── index.jsx
 ├── README.md
-├── MyComponent.scss
-├── _variables.scss
+├── index.scss
 └── MyComponent.test.jsx
 ```
 
@@ -314,11 +324,10 @@ export default MyComponent;
 ##### 4. (Optional) Add styles to your component.
 
 If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component.
 
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+If you wish to use CSS variables (which is the preferred way of styling the components since values can be
+easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).
 
 **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).**
 
@@ -502,9 +511,9 @@ Paragon uses [style-dictionary](https://github.com/amzn/style-dictionary) to bui
 6. Consuming applications would inject the `core.css` and `light.css` theme files into their applications via a mechanism similar to https://github.com/openedx/frontend-platform/pull/440 (ideally pulling from a public CDN for NPM packages, but falling back to locally installed copies, if needed).
 
 #### Compiling CSS from design tokens for `@edx/brand` theme authors (in `@edx/brand` repos)
-1. **`npm install`.** Install dependencies, including `@edx/paragon`.
+1. **`npm install`.** Install dependencies, including `@openedx/paragon`.
 2. Create tokens that will override Paragon's default tokens (matching same JSON schema).
-3. **`npm run build-scss`.** This `@edx/brand` repo will have a new NPM script that utilizes a new CLI exported by `@edx/paragon` which exposes the `build-tokens.js` script (or possibly another if we end up needing one for the brand packages to run specifically, TBD) for `@edx/brand` consumers.
+3. **`npm run build-scss`.** This `@edx/brand` repo will have a new NPM script that utilizes a new CLI exported by `@openedx/paragon` which exposes the `build-tokens.js` script (or possibly another if we end up needing one for the brand packages to run specifically, TBD) for `@edx/brand` consumers.
     - The intent of running this command is to effectively deep merge the tokens defined in Paragon's default tokens with the override tokens defined by `@edx/brand`, generating its own `core.css` and `light.css` output files (exact output files still a TBD) containing CSS variable overrides based on the token overrides.
 5. Ensure any changes to the generated `core.css` and `light.css` files are committed & released to NPM (which also "releases" them on versioned public CDNs for NPM packages).
     - _Note: It is a bit unclear still in the above linked implementation POC for `@edx/frontend-platform` how it would integrate with `@edx/brand` in this way. Open to suggestions/feedback/ideas here._

package/dist/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;

package/dist/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);

package/dist/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;
   }
 }
 

package/dist/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;

package/dist/Stepper/index.scss

@@ -8,8 +8,9 @@
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x);
+    padding:
+      var(--pgn-spacing-stepper-header-step-list-padding-y)
+      var(--pgn-spacing-stepper-header-step-list-padding-x);
     display: flex;
     align-items: center;
     margin: var(--pgn-spacing-stepper-header-step-list-margin);

package/dist/Tabs/index.scss

@@ -30,8 +30,9 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
-        // stylelint-disable-next-line max-line-length
-        padding: var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
+        padding:
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x)
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 
         &:focus {
           background-color: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
@@ -62,8 +63,9 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
-      // stylelint-disable-next-line max-line-length
-      padding: var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
+      padding:
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x)
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
       border: none;
 
       &:focus {
@@ -97,8 +99,9 @@
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
+    padding:
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x)
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
 
     &:hover {
       background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover);

package/dist/core.css

@@ -154,6 +154,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;
@@ -192,13 +193,12 @@
   --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;
   --pgn-spacing-grid-gutter-width: 24px;
   --pgn-spacing-table-cell-padding-sm: .3rem;
-  --pgn-spacing-table-cell-padding-base: 75rem;
+  --pgn-spacing-table-cell-padding-base: .75rem;
   --pgn-spacing-label-margin-bottom: .5rem;
   --pgn-spacing-spacer-base: 1rem;
   --pgn-spacing-spacer-0: 0;
@@ -228,7 +228,6 @@
   --pgn-spacing-popover-icon-margin-right: .5rem;
   --pgn-spacing-popover-header-padding-x: 1rem;
   --pgn-spacing-popover-header-padding-y: .5rem;
-  --pgn-spacing-pagination-margin-x: .5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
   --pgn-spacing-pagination-padding-x-sm: .6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
@@ -306,10 +305,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;
@@ -329,10 +326,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;
@@ -386,7 +379,6 @@
   --pgn-size-popover-icon-height: 1rem;
   --pgn-size-popover-max-width: 480px;
   --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-focus-border-width: .125rem;
   --pgn-size-pagination-toggle-border-sm: .25rem;
   --pgn-size-pagination-toggle-border-base: .3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
@@ -443,7 +435,7 @@
   --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
   --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
-  --pgn-size-data-table-border: 1px;
+  --pgn-size-data-table-border: 2px;
   --pgn-size-container-max-width-xl: 1440px;
   --pgn-size-container-max-width-lg: 1192px;
   --pgn-size-container-max-width-md: 952px;
@@ -452,8 +444,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;
@@ -487,9 +479,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);
@@ -562,7 +554,6 @@
   --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
   --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
   --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
   --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -593,7 +584,6 @@
   --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border);
   --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
   --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
@@ -617,7 +607,6 @@
   --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
   --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
   --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
@@ -633,7 +622,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);
@@ -673,6 +661,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);
@@ -1044,7 +1033,7 @@ mark,
 .blockquote-footer {
   display: block;
   font-size: var(--pgn-typography-blockquote-small-font-size);
-  color: var(--pgn-color-gray-500);
+  color: var(--pgn-color-blockquote-small);
 }
 .blockquote-footer::before {
   content: "— ";
@@ -8468,7 +8457,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
     page-break-after: avoid;
   }
   @page {
-    size: a3;
+    size: var(--pgn-typography-print-page-size);
   }
   body {
     min-width: 992px !important;
@@ -8510,7 +8499,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
 /**
  * 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 Wed, 15 May 2024 12:30:36 GMT
  */
 /**
  * IMPORTANT: This file is the result of assembling design tokens
@@ -11059,7 +11048,7 @@ a.pgn__card {
 }
 .collapsible-card .collapsible-trigger, .collapsible-card-lg .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;
@@ -11073,7 +11062,7 @@ a.pgn__card {
   margin-top: 0;
 }
 .collapsible-card .collapsible-trigger[aria-expanded=true], .collapsible-card-lg .collapsible-trigger[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;
+  border-radius: 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;
@@ -11190,7 +11179,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1);
   left: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1);
   border: solid var(--pgn-spacing-chip-outline-selected-distance-light) var(--pgn-color-chip-outline-light);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-light.selected:focus {
   border: 1px solid var(--pgn-color-chip-border-focus-selected-light);
@@ -11233,7 +11222,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1);
   left: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1);
   border: solid 0.125rem var(--pgn-color-chip-border-focus-selected-light);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-dark {
   background-color: var(--pgn-color-chip-bg-dark);
@@ -11246,7 +11235,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1);
   left: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1);
   border: solid var(--pgn-spacing-chip-outline-selected-distance-dark) var(--pgn-color-chip-outline-dark);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-dark.selected:focus {
   border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);
@@ -11292,7 +11281,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1);
   left: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1);
   border: solid 0.125rem var(--pgn-color-chip-outline-dark);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.disabled, .pgn__chip:disabled {
   opacity: var(--pgn-other-chip-opacity-disabled);