@cobre-npm/ds-v3 0.115.3 → 0.116.0

package/dist/tokens/_components.scss

@@ -434,6 +434,18 @@
   --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-50);
   --cobre-btn-v3-secondary-cloudy-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
 
+  // Secondary Cloudy Warning
+  --cobre-btn-v3-secondary-cloudy-warning-bg: transparent;
+  --cobre-btn-v3-secondary-cloudy-warning-border: var(--cobre-border-stroke-M) solid var(--cobre-red-50);
+  --cobre-btn-v3-secondary-cloudy-warning-color: var(--cobre-red-40);
+  --cobre-btn-v3-secondary-cloudy-warning-hover-bg: var(--cobre-red-5);
+  --cobre-btn-v3-secondary-cloudy-warning-active-bg: var(--cobre-red-10);
+  --cobre-btn-v3-secondary-cloudy-warning-active-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
+  --cobre-btn-v3-secondary-cloudy-warning-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
+  --cobre-btn-v3-secondary-cloudy-warning-focus-box-shadow: 0 0 0 0.25rem var(--cobre-red-20);
+  --cobre-btn-v3-secondary-cloudy-warning-disabled-color: var(--cobre-red-40);
+  --cobre-btn-v3-secondary-cloudy-warning-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-red-40);
+
   // Ghost
   --cobre-btn-v3-ghost-bg: transparent;
   --cobre-btn-v3-ghost-color: var(--cobre-primary-80);
@@ -445,6 +457,30 @@
   --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
   --cobre-btn-v3-ghost-disabled-color: var(--cobre-secondary-50);
 
+  // Ghost teal
+  --cobre-btn-v3-ghost-teal-color: var(--cobre-secondary-50);
+  --cobre-btn-v3-ghost-teal-bg: transparent;
+  --cobre-btn-v3-ghost-teal-hover-color: var(--cobre-secondary-40);
+  --cobre-btn-v3-ghost-teal-hover-bg: transparent;
+  --cobre-btn-v3-ghost-teal-active-color: var(--cobre-secondary-50);
+  --cobre-btn-v3-ghost-teal-active-bg: transparent;
+  --cobre-btn-v3-ghost-teal-focus-color: var(--cobre-primary-80);
+  --cobre-btn-v3-ghost-teal-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-btn-v3-ghost-teal-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-ghost-teal-disabled-color: var(--cobre-primary-60);
+
+  // Ghost warning
+  --cobre-btn-v3-ghost-warning-bg: transparent;
+  --cobre-btn-v3-ghost-warning-border: none;
+  --cobre-btn-v3-ghost-warning-color: var(--cobre-red-50);
+  --cobre-btn-v3-ghost-warning-hover-bg: var(--cobre-red-5);
+  --cobre-btn-v3-ghost-warning-active-bg: var(--cobre-red-10);
+  --cobre-btn-v3-ghost-warning-active-border: none;
+  --cobre-btn-v3-ghost-warning-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
+  --cobre-btn-v3-ghost-warning-focus-box-shadow: 0 0 0 0.25rem var(--cobre-red-20);
+  --cobre-btn-v3-ghost-warning-disabled-color: var(--cobre-red-40);
+  --cobre-btn-v3-ghost-warning-disabled-border: none;
+
   // Link
   --cobre-btn-v3-link-bg: transparent;
   --cobre-btn-v3-link-color: var(--cobre-secondary-50);
@@ -523,18 +559,6 @@
   --cobre-btn-v3-chip-disabled-bg: transparent;
   --cobre-btn-v3-chip-disabled-color: var(--cobre-primary-60);
 
-  // Ghost teal
-  --cobre-btn-v3-ghost-teal-color: var(--cobre-secondary-50);
-  --cobre-btn-v3-ghost-teal-bg: transparent;
-  --cobre-btn-v3-ghost-teal-hover-color: var(--cobre-secondary-40);
-  --cobre-btn-v3-ghost-teal-hover-bg: transparent;
-  --cobre-btn-v3-ghost-teal-active-color: var(--cobre-secondary-50);
-  --cobre-btn-v3-ghost-teal-active-bg: transparent;
-  --cobre-btn-v3-ghost-teal-focus-color: var(--cobre-primary-80);
-  --cobre-btn-v3-ghost-teal-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
-  --cobre-btn-v3-ghost-teal-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
-  --cobre-btn-v3-ghost-teal-disabled-color: var(--cobre-primary-60);
-
   // Toolbar
   --cobre-btn-v3-toolbar-fs: 12px;
   --cobre-btn-v3-toolbar-radius: var(--cobre-radius-XS);
@@ -544,18 +568,6 @@
   --cobre-btn-v3-toolbar-hover-color: var(--cobre-primary-80);
   --cobre-btn-v3-toolbar-disabled-color: var(--cobre-primary-50);
   --cobre-btn-v3-toolbar-disabled-bg: var(--cobre-primary-10);
-
-  // Danger
-  --cobre-btn-v3-danger-bg: transparent;
-  --cobre-btn-v3-danger-border: none;
-  --cobre-btn-v3-danger-color: var(--cobre-red-50);
-  --cobre-btn-v3-danger-hover-bg: var(--cobre-red-5);
-  --cobre-btn-v3-danger-active-bg: var(--cobre-red-10);
-  --cobre-btn-v3-danger-active-border: none;
-  --cobre-btn-v3-danger-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
-  --cobre-btn-v3-danger-focus-box-shadow: 0 0 0 0.25rem var(--cobre-red-20);
-  --cobre-btn-v3-danger-disabled-color: var(--cobre-red-40);
-  --cobre-btn-v3-danger-disabled-border: none;
 }
 
 /**

package/dist/types/types/button.types.d.ts

@@ -1 +1 @@
-export type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'ghost-small' | 'ghost-teal' | 'link' | 'single' | 'filter' | 'secondary-cloudy' | 'icon' | 'icon-cloudy' | 'toolbar' | 'primary-warning' | 'danger' | 'chip';
+export type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'ghost-small' | 'ghost-teal' | 'ghost-warning' | 'link' | 'single' | 'filter' | 'secondary-cloudy' | 'secondary-cloudy-warning' | 'icon' | 'icon-cloudy' | 'toolbar' | 'primary-warning' | 'chip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.115.3",
+  "version": "0.116.0",
   "type": "module",
   "files": [
     "dist"