@tacc/core-styles 2.49.0 → 2.50.1

package/src/lib/_imports/bootstrap4/utilities/color/config.yml

@@ -0,0 +1,63 @@
+variants:
+  - name: default
+    hidden: True
+  - name: text
+context:
+  shouldLoadBootstrap: true
+  supportStyles:
+    - ../../assets/components/cortal-icon.css
+  groups:
+    - title: Types
+      types:
+      - type: primary
+        text: Primary
+      - type: primary
+        text: Primary (Link)
+        asLink: true
+      - type: secondary
+        text: Secondary
+      - type: secondary
+        text: Secondary (Link)
+        asLink: true
+      - type: muted
+        text: Muted
+      - type: muted
+        text: Muted (Link)
+        asLink: true
+      - type: success
+        text: Success
+      - type: warning
+        text: Warning
+      - type: danger
+        text: Danger
+    - title: Brightness
+      types:
+      - type: dark
+        text: Dark
+      - type: light
+        text: Light
+      - type: black
+        text: Black
+      - type: white
+        text: White
+      - type: black-50
+        text: Black 50%
+      - type: white-50
+        text: White 50%
+    - title: With Icons
+      types:
+      - type: primary
+        hasIconBefore: true
+        text: Before
+      - type: success
+        hasIconAfter: true
+        text: After
+      - type: danger
+        hasIconBefore: true
+        hasIconAfter: true
+        text: Before & After
+      - type: info
+        size: sm
+        hasIconBefore: true
+        text: Small
+

package/src/lib/_imports/bootstrap4/utilities/color/demo.css

@@ -0,0 +1,14 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+#demo {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+
+.text-light,
+.text-white,
+.text-white-50 {
+  background-color: var(--global-color-primary--xx-dark) !important;
+  outline: 0.25em solid var(--global-color-primary--xx-dark);
+}

package/src/lib/_imports/bootstrap4/utilities/color/readme.md

@@ -0,0 +1,3 @@
+To skin [Bootstrap v4+ Colors](https://getbootstrap.com/docs/5.2/utilities/colors/).
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/bootstrap4/utilities/color-text.css

@@ -0,0 +1,72 @@
+/* Not Links */
+
+.text-primary:not(a) {
+  color: inherit !important;
+}
+.text-secondary:not(a) {
+  color: var(--global-color-accent--secondary) !important;
+}
+
+.text-muted {
+  color: inherit !important;
+  opacity: 0.5;
+}
+
+.text-dark:not(a),
+.text-black:not(a) {
+  color: var(--global-color-primary--xx-dark) !important;
+}
+.text-light:not(a),
+.text-white:not(a) {
+  color: var(--global-color-primary--xx-light) !important;
+}
+
+[class*="text-"]:not(a):not(
+  .text-primary,
+  .text-secondary,
+  .text-muted,
+  .text-dark,
+  .text-light,
+  .text-black,
+  .text-white,
+  .text-black-50,
+  .text-white-50
+) {
+  color: inherit !important;
+}
+
+/* Links */
+
+a.text-primary:is(
+  :link,
+  :visited,
+  :hover,
+  :focus
+) {
+  color: var(--global-color-accent--normal) !important;
+}
+a.text-secondary:is(
+  :link,
+  :visited,
+  :hover,
+  :focus
+) {
+  color: var(--global-color-accent--secondary) !important;
+}
+a[class*="text-"]:not(
+  .text-primary,
+  .text-secondary
+):is(
+  :link,
+  :visited,
+  :hover,
+  :focus
+) {
+  color: var(--global-color-accent--normal) !important;
+}
+
+/* Child Elements */
+
+[class*="text-"] .icon {
+  vertical-align: middle;
+}

package/src/lib/_imports/bootstrap4/utilities/color.css

@@ -0,0 +1 @@
+@import url("./color-text.css");

package/src/lib/_imports/bootstrap4/utilities/config.yml

@@ -0,0 +1,2 @@
+context:
+  subdir: bootstrap4/utilities

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -6,13 +6,13 @@
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--secondary</span>
+          --secondary
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--primary</span>
+          --primary
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--tertiary</span>
+          --tertiary
         </button>
       </dd>
 
@@ -21,15 +21,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--secondary</span>
+          --secondary
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--primary</span>
+          --primary
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--tertiary</span>
+          --tertiary
         </a>
       </dd>
       {{/if}}
@@ -45,15 +45,15 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">default</span>
+          default
         </button>
         <button class="c-button c-button--{{this._self.name}} 
         {{#if type}}{{type}}{{/if}}" disabled>
-          <span class="c-button__text">disabled-attr</span>
+          disabled-attr
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--is-busy
         {{#if type}}{{type}}{{/if}}" disabled>
-          <span class="c-button__text">--is-busy</span>
+          --is-busy
       </dd>
 
       {{#if supports.link-tag}}
@@ -61,15 +61,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">default</span>
+          default
         </a>
         <a disabled tabindex="-1" href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}">
-          <span class="c-button__text">disabled-attr</span>
+          disabled-attr
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
         {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
-          <span class="c-button__text">--is-busy</span>
+          --is-busy
         </a>
       </dd>
       {{/if}}
@@ -85,13 +85,13 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
-          <span class="c-button__text">__icon--before</span>
+          <i class="icon icon-push-right" aria-description="validate input">…</i>
+          __icon--before
         </button>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
+          __icon--after
+          <i class="icon icon-new-browser" aria-description="exit page">X</i>
       </dd>
 
       {{#if supports.link-tag}}
@@ -99,13 +99,13 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
-          <span class="c-button__text">__icon--before</span>
+          <i class="icon icon-push-right" aria-description="validate input">…</i>
+          __icon--before
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
+          __icon--after
+          <i class="icon icon-new-browser" aria-description="exit page">X</i>
         </a>
       </dd>
       {{/if}}
@@ -121,15 +121,15 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-short</span>
+          --width-short
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-medium</span>
+          --width-medium
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-long</span>
+          --width-long
       </dd>
 
       {{#if supports.link-tag}}
@@ -137,15 +137,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-short</span>
+          --width-short
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-medium</span>
+          --width-medium
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-long</span>
+          --width-long
         </a>
       </dd>
       {{/if}}
@@ -162,7 +162,7 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
           {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--size-small</span>
+          --size-small
         </button>
       </dd>
 
@@ -171,7 +171,7 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
           {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1"{{/if}}>
-          <span class="c-button__text">--size-small</span>
+          --size-small
         </a>
       </dd>
       {{/if}}

package/src/lib/_imports/components/c-button.css

@@ -23,6 +23,9 @@
   align-items: center;
   justify-content: center;
 
+  line-height: 1; /* to make consistent vertical alignment of icons */
+  gap: 0.5ch; /* to add space between icons and text */
+
   /* To ensure identical <button> and <a> instances have same width */
   box-sizing: border-box;
 
@@ -32,7 +35,9 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:has(:--c-button__icon) {
+/* To align buttons that have icons */
+/* FAQ: Doing for all buttons, for consistent behavior in possible edge case */
+:--c-button/*:has(.icon)*/ {
   vertical-align: middle;
 }
 
@@ -292,12 +297,11 @@ a:--c-button--is-busy {
   opacity: 0.5;
   pointer-events: none;
 }
-:--c-button--is-busy :--c-button__text {
+:--c-button--is-busy * {
   opacity: 0.5;
 }
 
 
-
 /* Modifiers: Sizes */
 
 :--c-button:where(:not(
@@ -331,15 +335,7 @@ a:--c-button--is-busy {
 
 /* Elements */
 
-:--c-button__icon--before {
-  margin-right: 0.5em;
-}
-:--c-button__icon--after {
-  margin-left: 0.5em;
-}
-
 /* To position Bootstrap spinner inside TACC's flex-based button */
 :--c-button .spinner-border {
   align-self: center;
-  margin-left: 0.5ch;
 }

package/src/lib/_imports/components/c-button.selectors.css

@@ -56,13 +56,3 @@
     [class*="button--size-small"],
     /* WARN: borrowing file to support Bootstrap */
     .btn-sm;
-
-@custom-selector :--c-button__text
-    [class*="button__text"];
-
-@custom-selector :--c-button__icon
-    [class*="button__icon"];
-@custom-selector :--c-button__icon--before
-    [class*="button__icon--before"];
-@custom-selector :--c-button__icon--after
-    [class*="button__icon--after"];

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -27,7 +27,7 @@
 
     <a href="#" class="c-button c-button--primary">Action</a>
     <a href="#" class="c-button c-button--primary">
-        <i class="c-button__icon--before icon icon-push-right">&gt;</i>
+        <i class="icon icon-push-right">&gt;</i>
         Action + Icon
     </a>
 </article>

package/src/lib/_imports/components/cortal-icon/cortal-icon.hbs

@@ -88,8 +88,8 @@
         <div class="demo-list">
           {{#each in_buttons}}
           <button class="c-button c-button--{{this.type}}">
-            <i class="icon icon-{{this.icon}} c-button__icon--before"></i>
-            <span class="c-button__text">{{this.text}}</span>
+            <i class="icon icon-{{this.icon}}"></i>
+            {{this.text}}
           </button>
           {{/each}}
         </div>

package/src/lib/_imports/core-styles.bootstrap4.css

@@ -0,0 +1,6 @@
+/*! core-styles.bootstrap4.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("./bootstrap4/components/btn.css");
+@import url("./bootstrap4/components/card.css");
+@import url("./bootstrap4/utilities/color.css");

package/src/lib/_imports/core-styles.cms.css

@@ -34,7 +34,6 @@
 @import url("./components/bootstrap.col.css");
 @import url("./components/bootstrap.modal--cms.css");
 @import url("./components/bootstrap.row.css");
-@import url("./components/btn.css");
 @import url("./components/c-content-block.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/c-button--cms.css");

package/dist/components/btn/demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.49.0+ | MIT | github.com/TACC/Core-Styles */#demo{display:flex;flex-wrap:wrap;gap:1em}

package/dist/components/btn.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.49.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.x-link{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled{opacity:.5;pointer-events:none}.x-link--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.x-link--active{text-decoration-line:underline;text-decoration-style:dotted}.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-line:underline;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--irregular--disabled{opacity:.5;pointer-events:none}.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-style:dashed;text-decoration-thickness:var(--global-border-width--normal)}.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted;text-decoration-style:dotted}:is(.c-button,[class*=button--],.btn){--min-width:75px;--mid-width:110px;--max-width:130px;align-items:center;border-style:solid;border-width:var(--global-border-width--normal);box-sizing:border-box;display:inline-flex;justify-content:center}:is(.c-button,[class*=button--],.btn):where(:not(:is(:disabled,:where(a[disabled])))){cursor:pointer}:is(.c-button,[class*=button--],.btn):has(:is([class*=button__icon])){vertical-align:middle}a:is(.c-button,[class*=button--],.btn){text-align:center;text-decoration:none}a:is([class*=button--is-busy],[data-state=busy]){cursor:default}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])){-webkit-user-select:none;-moz-user-select:none;user-select:none}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy])){border-color:var(--global-color-primary--dark);color:var(--global-color-primary--dark)}:is(.c-button,[class*=button--],.btn):is(:disabled,:where(a[disabled])):not(:is([class*=button--is-busy],[data-state=busy]),:is([class*=button--as-link],.btn-link)){background-color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger),:is([class*=button--is-active],.btn.active){max-width:var(--max-width);min-width:var(--min-width);padding:6px 18px}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):hover{background-color:var(--global-color-accent--dark);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):active:not(:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-dark);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--normal);border-color:var(--global-color-primary--xx-light);color:var(--global-color-primary--xx-light);outline:var(--global-border-width--normal) solid var(--global-color-accent--light)}:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--primary,.button--1,.btn-primary,.btn-dark):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--normal);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):hover{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--normal);color:var(--global-color-primary--xx-dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):active:not(:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-primary--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}:is(.c-button,[class*=button--],.btn):is(.c-button--secondary,.button--2,.btn-secondary,.btn-light):is(:disabled,:where(a[disabled])){background-color:var(--global-color-primary--x-light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):hover{background-color:var(--global-color-primary--light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):active:not(:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):focus:not(:active,:is([class*=button--is-busy],[data-state=busy])){background-color:var(--global-color-primary--light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):is([class*=button--is-busy],[data-state=busy]),:is(.c-button--tertiary,.button--3,.btn-info,.btn-success,.btn-warning,.btn-danger):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-primary--xx-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}:is(.c-button--can-truncate,.button--truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is([class*=button--is-active],.btn.active):hover{background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-accent--dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--is-active],.btn.active):active{background-color:var(--global-color-accent--x-light);border-color:var(--global-color-accent--dark);border-width:var(--global-border-width--normal);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--normal) solid var(--global-color-accent--dark)}:is([class*=button--is-active],.btn.active):focus:not(:active){background-color:var(--global-color-accent--xx-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark);outline:var(--global-border-width--thick) solid var(--global-color-accent--light)}:is([class*=button--is-active],.btn.active):is([class*=button--is-busy],[data-state=busy]),:is([class*=button--is-active],.btn.active):not(:hover,:focus,:active,:is(:disabled,:where(a[disabled]))){background-color:var(--global-color-accent--x-light);border-color:var(--global-color-primary--xx-dark);color:var(--global-color-primary--xx-dark)}:is([class*=button--as-link],.btn-link){background:unset;border:unset;color:var(--global-color-accent--normal);font-family:inherit;font-size:inherit;font-weight:inherit;padding-inline:unset;text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}:is([class*=button--as-link],.btn-link):where(:not(:is(:disabled,:where(a[disabled])))):active{text-decoration-line:underline;text-decoration-style:dotted}:is([class*=button--is-busy],[data-state=busy]){opacity:.5;pointer-events:none}:is([class*=button--is-busy],[data-state=busy]) :is([class*=button__text]){opacity:.5}:is(.c-button,[class*=button--],.btn):where(:not(:is([class*=button--width-short]),:is([class*=button--width-medium]),:is([class*=button--width-long]),:is([class*=button--size-small],.btn-sm),:is([class*=button--as-link],.btn-link))){--max-width:auto;width:auto}:is([class*=button--width-short]){width:var(--min-width)}:is([class*=button--width-medium]){width:var(--mid-width)}:is([class*=button--width-long]){width:var(--max-width)}:is([class*=button--size-small],.btn-sm){line-height:1;min-width:0;padding:4px 9px}:is([class*=button__icon--before]){margin-right:.5em}:is([class*=button__icon--after]){margin-left:.5em}:is(.c-button,[class*=button--],.btn) .spinner-border{align-self:center;margin-left:.5ch}.btn{border-radius:unset}

package/src/lib/_imports/components/btn.css

@@ -1,6 +0,0 @@
-/* FAQ: c-button.css also styles Bootstrap btn */
-@import url("../components/c-button.css");
-
-.btn {
-    border-radius: unset; /* to undo bootstrap */
-}