@conduction/theme 1.0.11 → 1.0.13

package/README.md

@@ -4,7 +4,8 @@ Conduction's design tokens theme
 ## Changelog
 
 - **Version 1**
-
+  - 1.0.13: added secondary button styling for all themes.
+  - 1.0.12: implemented Select Single styling in xxllnc and Leiden
   - 1.0.11: fixed typo and added page-content-background-color token to Conduction theme.
   - 1.0.10: 
     - Added document-backgroundcolor to all themes.

package/municipalities/leiden.css

@@ -321,8 +321,8 @@
   --utrecht-icon-gap: var(--leiden-size-xs);
 
   /* Button */
-  --utrecht-button-color: var(--leiden-color-primary);
-  --utrecht-button-background-color: var(--leiden-color-white);
+  --utrecht-button-color: var(--leiden-color-white);
+  --utrecht-button-background-color: var(--leiden-color-primary);
 
   --utrecht-button-icon-gap: var(--leiden-size-xs);
   --utrecht-button-border-color: var(--leiden-color-primary);
@@ -357,6 +357,12 @@
   /* --utrecht-button-hover-border-color: unset; */
   /* --utrecht-button-focus-transform-scale: unset; */
 
+  --utrecht-button-secondary-action-background-color: var(--leiden-color-white);
+  --utrecht-button-secondary-action-border-color: var(--leiden-color-primary);
+  --utrecht-button-secondary-action-border-width: 2px;
+  --utrecht-button-secondary-action-color: var(--leiden-color-primary);
+  --utrecht-button-secondary-action-font-weight: var(--leiden-font-weight-normal);
+
   /* InputField */
   --utrecht-form-input-background-color: var(--leiden-color-white-100);
   --utrecht-form-input-border-width: var(--leiden-size-4xs);
@@ -392,12 +398,20 @@
 
   --utrecht-textbox-placeholder-color: var(--leiden-color-light-blue-24);
 
-  /* conduction select-field */
-  --skeleton-color-white: var(--leiden-color-white-100);
-  --conduction-input-select-border: var(--leiden-size-4xs) solid
-    var(--leiden-color-light-blue-89);
-  --skeleton-border-radius-md: 0px;
-  --skeleton-size-xs: var(--leiden-size-xs);
+  /*
+   *
+   * CONDUCTION COMPONENTS & DEFAULTS
+   *
+   */
+
+  /* Input select single */
+  --conduction-input-select-padding-block-start: 0;
+  --conduction-input-select-padding-block-end: 0;
+  --conduction-input-select-border-radius: var(--utrecht-form-input-border-radius);
+  --conduction-input-select-background-color: var(--leiden-color-white);
+  --conduction-input-select-border: 1px solid var(--utrecht-form-input-border-color);
+  --conduction-input-select-border-focus: unset;
+  --conduction-input-select-invalid-border-color: var(--leiden-color-error);
 
   /* conduction Card */
   --utrecht-card-background-color: var(--leiden-color-lightgrey);

package/municipalities/xxllnc.css

@@ -366,6 +366,12 @@
   /* --utrecht-button-hover-border-color: unset; */
   /* --utrecht-button-focus-transform-scale: unset; */
 
+  --utrecht-button-secondary-action-background-color: var(--xxllnc-color-white);
+  --utrecht-button-secondary-action-border-color: var(--xxllnc-color-black-15);
+  --utrecht-button-secondary-action-border-width: 2px;
+  --utrecht-button-secondary-action-color: var(--xxllnc-color-black-15);
+  --utrecht-button-secondary-action-font-weight: var(--xxllnc-font-weight-normal);
+
   /* InputField */
   --utrecht-form-input-background-color: var(--xxllnc-color-white-100);
   --utrecht-form-input-border-width: var(--xxllnc-size-4xs);
@@ -401,12 +407,20 @@
 
   --utrecht-textbox-placeholder-color: var(--xxllnc-color-grey-43);
 
-  /* conduction select-field */
-  --skeleton-color-white: var(--xxllnc-color-white-100);
-  --conduction-input-select-border: var(--xxllnc-size-4xs) solid
-    var(--xxllnc-color-black-38);
-  --skeleton-border-radius-md: 6px;
-  --skeleton-size-xs: var(--xxllnc-size-xs);
+  /*
+   *
+   * CONDUCTION COMPONENTS & DEFAULTS
+   *
+   */
+
+  /* Input select single */
+  --conduction-input-select-padding-block-start: 0;
+  --conduction-input-select-padding-block-end: 0;
+  --conduction-input-select-border-radius: var(--utrecht-form-input-border-radius);
+  --conduction-input-select-background-color: var(--xxllnce-color-white);
+  --conduction-input-select-border: 1px solid var(--xxllnc-color-grey);
+  --conduction-input-select-border-focus: unset;
+  --conduction-input-select-invalid-border-color: var(--xxllnc-color-error);
 
   /* conduction Card */
   --utrecht-card-background-color: var(--xxllnc-color-black-21);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/theme",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Conduction's design tokens theme",
   "main": "index.js",
   "repository": {

package/theme.css

@@ -366,6 +366,12 @@
 
   /* --utrecht-button-text-transform: <length>; */
 
+  --utrecht-button-secondary-action-background-color: var(--conduction-color-white);
+  --utrecht-button-secondary-action-border-color: var(--conduction-color-primary);
+  --utrecht-button-secondary-action-border-width: 2px;
+  --utrecht-button-secondary-action-color: var(--conduction-color-primary);
+  --utrecht-button-secondary-action-font-weight: var(--conduction-font-weight-normal);
+
   /* --utrecht-button-focus-background-color: <color>; */
   /* --utrecht-button-focus-border-color: <color>; */
   /* --utrecht-button-focus-color: <color>; */