@conduction/theme 1.0.7 → 1.0.8

package/README.md

@@ -5,6 +5,7 @@ Conduction's design tokens theme
 
 - **Version 1**
 
+  - 1.0.8: Added formField, cards and conduction overwrite tokens to xxllnc theme.
   - 1.0.7: Added button tokens to all themes.
   - 1.0.6: Added xxllnc theme.
   - 1.0.5: Added page-max-inline size to Conduction theme.

package/municipalities/xxllnc.css

@@ -56,21 +56,28 @@
   --xxllnc-color-alert-info: var(--xxllnc-color-black);
   --xxllnc-color-alert-info-background: var(--xxllnc-color-grey);
 
-  --xxllnc-color-white: #ffffff;
-  --xxllnc-color-lightgrey: #f5f5f5;
   --xxllnc-color-grey: #eaeaea;
   --xxllnc-color-grey-95: #e5e5e5;
   --xxllnc-color-grey-95-hover: #e5e5e5cc;
+  --xxllnc-color-grey-43: #6d6d6d;
+
+  --xxllnc-color-lightgrey: #f5f5f5;
+
+  --xxllnc-color-white: #ffffff;
+  --xxllnc-color-white-95: #f1f1f1;
+  --xxllnc-color-white-100: #ffffff00;
+
   --xxllnc-color-black: #28282c;
   --xxllnc-color-black-15: #2b2b2b;
   --xxllnc-color-black-15-hover: #2b2b2bcc;
+  --xxllnc-color-black-21: #333338;
+  --xxllnc-color-black-38: #00000038;
 
   /* Typography */
   --xxllnc-typography-sans-serif-font-family: neue-haas-grotesk-text, sans-serif;
-  --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif,
-    sans-serif;
+  --xxllnc-typography-header-font-family: neue-haas-grotesk-text, sans-serif;
   --xxllnc-typography-code-font-family: Monospace, "Lucida Console";
-  --xxllnc-typography-button-font-family:"Inter", sans-serif;
+  --xxllnc-typography-button-font-family: "Inter", sans-serif;
 
   /*
    *
@@ -324,8 +331,8 @@
   --utrecht-button-color: var(--xxllnc-color-grey-95);
   --utrecht-button-background-color: var(--xxllnc-color-black-15);
 
-   /* --utrecht-button-border-color: <color>; */
-   --utrecht-button-border-width: 0;
+  /* --utrecht-button-border-color: <color>; */
+  --utrecht-button-border-width: 0;
   --utrecht-button-border-radius: var(--xxllnc-size-xs);
   /* --utrecht-button-border-bottom-width: <length>; */
 
@@ -347,13 +354,63 @@
 
   /* --utrecht-button-text-transform: <length>; */
 
-    /* --utrecht-button-focus-background-color: <color>; */
-   /* --utrecht-button-focus-border-color: <color>; */
-   /* --utrecht-button-focus-color: <color>; */
+  /* --utrecht-button-focus-background-color: <color>; */
+  /* --utrecht-button-focus-border-color: <color>; */
+  /* --utrecht-button-focus-color: <color>; */
 
   --utrecht-button-hover-background-color: var(--xxllnc-color-black-15-hover);
   --utrecht-button-hover-color: var(--xxllnc-color-grey-95-hover);
   /* --utrecht-button-hover-border-color: unset; */
   /* --utrecht-button-focus-transform-scale: unset; */
-   
+
+  /* InputField */
+  --utrecht-form-input-background-color: var(--xxllnc-color-white-100);
+  --utrecht-form-input-border-width: var(--xxllnc-size-4xs);
+  --utrecht-form-input-border-color: var(--xxllnc-color-black-38);
+  --utrecht-form-input-border-radius: 6px;
+  --utrecht-form-input-color: var(--xxllnc-color-grey-43);
+  --utrecht-form-input-font-family: var(
+    --xxllnc-typography-sans-serif-font-family
+  );
+  --utrecht-form-input-font-size: 15px;
+  /* --utrecht-form-input-max-inline-size: ; */
+  --utrecht-form-input-padding-block-end: var(--xxllnc-size-xs);
+  --utrecht-form-input-padding-block-start: var(--xxllnc-size-xs);
+  --utrecht-form-input-padding-inline-end: var(--xxllnc-size-sm);
+  --utrecht-form-input-padding-inline-start: var(--xxllnc-size-sm);
+
+  /* InputField-TextField */
+  --utrecht-textbox-background-color: var(--xxllnc-color-white-100);
+  --utrecht-textbox-border-width: var(--xxllnc-size-4xs);
+  /* --utrecht-textbox-border-bottom-width: ; */
+  --utrecht-textbox-border-color: var(--xxllnc-color-black-38);
+  --utrecht-textbox-border-radius: 6px;
+  --utrecht-textbox-color: var(--xxllnc-color-grey-43);
+  --utrecht-textbox-font-family: var(
+    --xxllnc-typography-sans-serif-font-family
+  );
+  --utrecht-textbox-font-size: 15px;
+  /* --utrecht-textbox-max-inline-size: ; */
+  --utrecht-textbox-padding-block-end: var(--xxllnc-size-xs);
+  --utrecht-textbox-padding-block-start: var(--xxllnc-size-xs);
+  --utrecht-textbox-padding-inline-end: var(--xxllnc-size-sm);
+  --utrecht-textbox-padding-inline-start: var(--xxllnc-size-sm);
+
+  --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 Card */
+  --utrecht-card-background-color: var(--xxllnc-color-black-21);
+  --utrecht-card-color: var(--xxllnc-color-white-95);
+  --utrehct-card-border-radius: 16px;
+  --utrecht-card-padding-block-end: var(--xxllnc-size-md);
+  --utrecht-card-padding-block-start: var(--xxllnc-size-md);
+  --utrecht-card-padding-inline-end: var(--xxllnc-size-md);
+  --utrecht-card-padding-inline-start: var(--xxllnc-size-md);
 }

package/package.json

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