@kofile/gds-foundations 0.0.10 → 1.0.0-alpha

package/build/css/components/switch.module.css

@@ -0,0 +1,92 @@
+/* reset */
+button {
+  all: unset;
+}
+
+.root {
+  background-color: var(--switch-light-color-background-primary-default);
+  border-radius: var(--switch-size-md-border-radius);
+  border-width: var(--switch-size-md-border-width);
+  border-color: var(--switch-light-color-border-primary-default);
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: var(--switch-size-md-height);
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  width: var(--switch-size-md-width);
+}
+.root:focus-visible {
+  outline-offset: var(--switch-outline-primary-offset);
+  outline-color: var(--switch-outline-primary-fill);
+  outline-style: solid;
+  outline-width: var(--switch-outline-primary-width);
+}
+.root:hover {
+  background-color: var(--switch-light-color-background-primary-hover);
+  cursor: pointer;
+}
+.root:disabled {
+  opacity: var(--switch-opacity-disabled);
+  pointer-events: none;
+}
+.root[data-state="checked"] {
+  background-color: var(--switch-light-color-background-primary-active);
+  border-color: var(--switch-light-color-border-primary-active);
+}
+
+.root[data-size="sm"] {
+  height: var(--switch-size-sm-height);
+  width: var(--switch-size-sm-width);
+}
+
+/* TODO DARK MODE!!! */
+
+.thumb {
+  display: block;
+  width: var(--switch-elements-thumb-size-md-width);
+  height: var(--switch-elements-thumb-size-md-height);
+  background-color: var(
+    --switch-light-elements-thumb-color-background-primary-default
+  );
+  border-radius: var(--switch-elements-thumb-size-md-border-radius);
+  border-width: var(--switch-elements-thumb-size-md-border-width);
+  border-color: var(--switch-light-elements-thumb-color-border-primary-default);
+  border-style: solid;
+  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
+  transform: translateX(-1px) translateY(-1px);
+  will-change: transform;
+}
+.thumb[data-state="checked"] {
+  transform: translateX(19px) translateY(-1px);
+  border-color: var(--switch-light-elements-thumb-color-border-primary-active);
+}
+
+.thumb[data-size="sm"] {
+  width: var(--switch-elements-thumb-size-sm-width);
+  height: var(--switch-elements-thumb-size-sm-height);
+}
+.thumb[data-size="sm"][data-state="checked"] {
+  transform: translateX(16px) translateY(-1px);
+}
+
+.root[data-mode="dark"] {
+  background-color: var(--switch-color-background-primary-default);
+  border-color: var(--switch-color-border-primary-default);
+}
+.root[data-mode="dark"]:hover {
+  background-color: var(--switch-color-background-primary-hover);
+}
+.root[data-mode="dark"][data-state="checked"] {
+  background-color: var(--switch-color-background-primary-active);
+  border-color: var(--switch-color-border-primary-active);
+}
+.root[data-mode="dark"]:focus-visible {
+  outline-color: var(--switch-color-outline-primary-fill);
+}
+
+.thumb[data-mode="dark"][data-state="checked"] {
+  border-color: var(--switch-dark-elements-thumb-border-primary-active);
+}
+.thumb[data-mode="dark"] {
+  border-color: var(--switch-dark-elements-thumb-border-primary-default);
+}

package/build/css/components/table.module.css

@@ -0,0 +1,225 @@
+.table {
+  width: 100%;
+  border-collapse: separate; /* Don't collapse */
+  border-spacing: 0;
+}
+
+.container {
+  background-color: var(
+    --table-light-elements-container-color-background-primary-default
+  );
+  border-color: var(
+    --table-light-elements-container-color-border-primary-default
+  );
+  border-width: var(--table-elements-container-size-2xl-border-width);
+  border-style: solid;
+
+  border-radius: var(--table-elements-container-size-2xl-border-radius);
+  min-height: auto;
+  max-height: var(--table-elements-container-size-2xl-max-height);
+  overflow: auto;
+}
+.container::-webkit-scrollbar {
+  width: var(--table-elements-container-scrollbar-size-2xl-width);
+  background-color: var(
+    --table-light-elements-container-scrollbar-color-background-primary-default
+  );
+  border-color: var(
+    --table-light-elements-container-scrollbar-color-border-primary-default
+  );
+  border-style: solid;
+  border-width: var(--table-elements-container-scrollbar-size-2xl-border-width);
+  border-right: none;
+  border-radius: var(
+    --table-elements-container-scrollbar-size-2xl-border-radius
+  );
+}
+.container::-webkit-scrollbar-thumb {
+  background-color: var(
+    --table-light-elements-container-scrollbar-thumb-color-background-primary-default
+  );
+  border-width: var(
+    --table-elements-container-scrollbar-thumb-size-2xl-border-width
+  );
+  border-color: var(
+    --table-light-elements-container-scrollbar-thumb-color-border-primary-default
+  );
+  border-style: solid;
+  border-radius: var(
+    --table-elements-container-scrollbar-size-2xl-border-radius
+  );
+  height: var(--table-elements-container-scrollbar-thumb-size-2xl-height);
+}
+.container[data-mode="dark"] {
+  background-color: var(
+    --table-dark-elements-container-color-background-primary-default
+  );
+  border-color: var(
+    --table-dark-elements-container-color-border-primary-default
+  );
+}
+.container[data-mode="dark"]::-webkit-scrollbar {
+  background-color: var(
+    --table-dark-elements-container-scrollbar-color-background-primary-default
+  );
+  border-color: var(
+    --table-dark-elements-container-scrollbar-color-border-primary-default
+  );
+}
+
+.container[data-mode="dark"]::-webkit-scrollbar-thumb {
+  background-color: var(
+    --table-dark-elements-container-scrollbar-thumb-color-background-primary-default
+  );
+  border-color: var(
+    --table-dark-elements-container-scrollbar-thumb-color-border-primary-default
+  );
+}
+
+.tr {
+  background-color: var(
+    --table-light-elements-tr-color-background-primary-default
+  );
+  transition: background-color 0.2s ease-in-out;
+}
+.tr:not(:last-child) > * {
+  border-block-end: var(--table-elements-td-size-2xl-border-width) solid
+    var(--table-light-elements-td-color-border-primary-default);
+}
+.tr[data-mode="dark"]:not(:last-child) > * {
+  border-block-end: var(--table-elements-td-size-2xl-border-width) solid
+    var(--table-dark-elements-td-color-border-primary-default);
+}
+.tr:hover {
+  background-color: var(
+    --table-light-elements-tr-color-background-primary-hover
+  );
+}
+.tr[data-mode="dark"] {
+  background-color: var(
+    --table-dark-elements-tr-color-background-primary-default
+  );
+}
+.tr[data-mode="dark"]:hover {
+  background-color: var(
+    --table-dark-elements-tr-color-background-primary-hover
+  );
+}
+.tr[data-striped]:nth-child(even) {
+  background-color: var(
+    --table-light-elements-tr-color-background-striped-default
+  );
+}
+.tr[data-mode="dark"][data-striped]:nth-child(even) {
+  background-color: var(
+    --table-dark-elements-tr-color-background-striped-default
+  );
+}
+.tr[data-striped]:hover {
+  background-color: var(
+    --table-light-elements-tr-color-background-striped-hover
+  );
+}
+.tr[data-mode="dark"][data-striped]:hover {
+  background-color: var(
+    --table-dark-elements-tr-color-background-striped-hover
+  );
+}
+
+.th {
+  background-color: var(
+    --table-light-elements-th-color-background-primary-default
+  );
+  border-bottom-color: var(
+    --table-light-elements-th-color-border-bottom-primary-default
+  );
+  border-bottom-style: solid;
+  border-bottom-width: var(--table-elements-th-size-xl-border-bottom-width);
+  color: var(--table-light-elements-th-color-text-primary-default);
+  font: var(--table-elements-th-size-xl-typography);
+  height: var(--table-elements-th-size-xl-max-height);
+  padding-inline: var(--table-elements-th-size-xl-padding-inline);
+  padding-block-start: var(--table-elements-th-size-xl-padding-block-start);
+  padding-block-end: var(--table-elements-th-size-xl-padding-block-end);
+  text-align: left;
+}
+.th[data-mode="dark"] {
+  background-color: var(
+    --table-dark-elements-th-color-background-primary-default
+  );
+  border-bottom-color: var(
+    --table-dark-elements-th-color-border-bottom-primary-default
+  );
+  color: var(--table-dark-elements-th-color-text-primary-default);
+}
+
+.th[data-size="2xl"] {
+  font: var(--table-elements-th-size-2xl-typography);
+  height: var(--table-elements-th-size-2xl-max-height);
+  padding-block-start: var(--table-elements-th-size-2xl-padding-block-start);
+  padding-block-end: var(--table-elements-th-size-2xl-padding-block-end);
+}
+
+.th[data-background="none"] {
+  background-color: var(
+    --table-light-elements-th-color-background-altbackground-default
+  );
+}
+.th[data-align="center"] {
+  text-align: center;
+}
+.th[data-align="right"] {
+  text-align: right;
+}
+
+.th[data-mode="dark"][data-background="none"] {
+  background-color: var(
+    --table-dark-elements-th-color-background-altbackground-default
+  );
+}
+.td {
+  box-sizing: border-box;
+  color: var(--table-light-elements-td-color-text-primary-default);
+  font: var(--table-elements-td-size-2xl-typography);
+  height: var(--table-elements-td-size-2xl-max-height);
+  padding-inline: var(--table-elements-td-size-2xl-padding-inline);
+}
+
+.td[data-size="xl"] {
+  font: var(--table-elements-td-size-xl-typography);
+  height: var(--table-elements-td-size-xl-max-height);
+}
+
+.td[data-size="lg"] {
+  font: var(--table-elements-td-size-lg-typography);
+  line-height: var(--line-heights-3xs);
+  height: var(--table-elements-td-size-lg-max-height);
+  padding-inline-start: var(--table-elements-td-size-lg-padding-inline);
+}
+
+.td[data-mode="dark"] {
+  color: var(--table-dark-elements-td-color-text-primary-default);
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-inline-end: var(--table-elements-actions-2xl-padding-inline-end);
+  height: var(--table-elements-actions-2xl-height);
+  box-sizing: border-box;
+  border-color: var(
+    --table-light-elements-actions-color-border-primary-default
+  );
+  border-style: solid;
+  border-width: var(--table-elements-actions-2xl-border-width);
+  background-color: var(
+    --table-light-elements-actions-color-background-primary-default
+  );
+  border-radius: var(--table-elements-actions-2xl-border-radius);
+}
+
+.actions[data-altbackground="true"] {
+  background-color: var(
+    --table-light-elements-actions-color-altbackground-primary-default
+  );
+}

package/build/css/components/tabs.module.css

@@ -0,0 +1,79 @@
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.tokens {
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  display: flex;
+  column-gap: var(--tabs-elements-list-gap-default);
+  flex-shrink: 0;
+}
+.list[data-border] {
+  border-block-end-color: var(
+    --tabs-light-elements-list-color-border-primary-default
+  );
+  border-block-end-width: var(--tabs-elements-list-size-lg-border-bottom-width);
+  border-block-end-style: solid;
+}
+.list[data-mode="dark"][data-border] {
+  border-color: var(--tabs-dark-elements-list-color-border-primary-default);
+}
+.trigger {
+  box-sizing: border-box;
+  background-color: var(--tabs-trigger-background-color);
+  border-block-end-color: var(
+    --tabs-light-elements-trigger-color-border-primary-default
+  );
+  border-block-end-width: var(--tabs-elements-trigger-size-lg-border-width);
+  border-block-end-style: solid;
+  padding-block-end: var(--tabs-elements-trigger-size-lg-padding-block-end);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--tabs-elements-trigger-size-lg-typography);
+  color: var(--tabs-trigger-color);
+}
+.trigger:hover {
+  color: var(--tabs-light-elements-trigger-color-text-primary-hover);
+}
+.trigger[data-state="active"] {
+  box-sizing: border-box;
+  color: var(--tabs-light-elements-trigger-color-text-primary-active);
+  border-color: var(--tabs-light-elements-trigger-color-border-primary-active);
+}
+.trigger[data-size="xl"] {
+  font: var(--tabs-elements-trigger-size-xl-typography);
+}
+.trigger[data-mode="dark"] {
+  color: var(--tabs-dark-elements-trigger-color-text-primary-default);
+}
+.trigger[data-mode="dark"]:hover {
+  color: var(--tabs-dark-elements-trigger-color-text-primary-hover);
+}
+.trigger[data-mode="dark"][data-state="active"] {
+  color: var(--tabs-dark-elements-trigger-color-text-primary-active);
+}
+
+.content {
+  flex-shrink: 1;
+  border: var(--tabs-elements-content-size-lg-border-width) solid
+    var(--tabs-light-elements-content-color-border-primary-default);
+  margin-top: var(--tabs-elements-content-size-lg-margin-block-start);
+  padding: var(--tabs-elements-content-size-lg-padding);
+  outline: none;
+  width: auto;
+}
+.content:focus {
+  border: var(--tabs-elements-content-size-lg-border-width) solid
+    var(--tabs-light-elements-content-color-border-primary-default);
+}

package/build/css/index.css

@@ -1,4 +1,3 @@
 @import "./normalize.css";
 @import "./fonts.css";
 @import "./tokens-global.css";
-/* @import "./animations.css"; */

package/build/css/normalize.css

@@ -36,16 +36,6 @@ main {
   display: block;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 

package/build/css/themes/badge/dark.css

@@ -0,0 +1,12 @@
+
+:root, 
+:host {
+--badge-dark-color-background-neutral-light-fill: #343944;
+--badge-dark-color-background-neutral-dark-fill: #242831;
+--badge-dark-color-background-primary-fill: #041C4F;
+--badge-dark-color-background-success-fill: #063724;
+--badge-dark-color-background-danger-fill: #5c0b09;
+--badge-dark-color-background-warning-fill: #553008;
+--badge-dark-color-background-highlight-fill: #563e00;
+--badge-dark-color-text-fill: #ffffff;
+}

package/build/css/themes/badge/index.css

@@ -0,0 +1,2 @@
+@import "./light.css";
+@import "./dark.css";

package/build/css/themes/badge/light.css

@@ -0,0 +1,12 @@
+
+:root, 
+:host {
+--badge-light-color-background-neutral-light-fill: #edeeef;
+--badge-light-color-background-neutral-dark-fill: #d5d7db;
+--badge-light-color-background-primary-fill: #d9eafe;
+--badge-light-color-background-success-fill: #a3f6ce;
+--badge-light-color-background-danger-fill: #fecbcb;
+--badge-light-color-background-warning-fill: #ffddb1;
+--badge-light-color-background-hightlight-fill: #fae592;
+--badge-light-color-text-fill: #121212;
+}

package/build/css/themes/button/dark.css

@@ -0,0 +1,42 @@
+
+:root, 
+:host {
+--button-dark-color-background-solid-primary-default: #0c57cd;
+--button-dark-color-background-solid-primary-hover: #063b99;
+--button-dark-color-background-solid-danger-default: #d12828;
+--button-dark-color-background-solid-danger-hover: #ab1a1d;
+--button-dark-color-background-outlined-primary-default: #121212;
+--button-dark-color-background-outlined-primary-hover: #03122f;
+--button-dark-color-background-outlined-neutral-default: #121212;
+--button-dark-color-background-outlined-neutral-hover: #242831;
+--button-dark-color-background-outlined-danger-default: #121212;
+--button-dark-color-background-outlined-danger-hover: #3b0807;
+--button-dark-color-background-transparent-primary-default: transparent;
+--button-dark-color-background-transparent-primary-hover: #242831;
+--button-dark-color-background-transparent-primary-active: #343944;
+--button-dark-color-background-transparent-neutral-default: transparent;
+--button-dark-color-background-transparent-neutral-hover: #242831;
+--button-dark-color-background-transparent-neutral-active: #343944;
+--button-dark-color-border-solid-primary-default: #0c57cd;
+--button-dark-color-border-solid-primary-hover: #063b99;
+--button-dark-color-border-solid-danger-default: #d12828;
+--button-dark-color-border-solid-danger-hover: #ab1a1d;
+--button-dark-color-border-outlined-primary-default: #66a8fd;
+--button-dark-color-border-outlined-primary-hover: #66a8fd;
+--button-dark-color-border-outlined-neutral-default: #343944;
+--button-dark-color-border-outlined-danger-default: #fc817c;
+--button-dark-color-border-outlined-danger-hover: #fc817c;
+--button-dark-color-border-transparent-primary-default: transparent;
+--button-dark-color-border-transparent-primary-hover: #242831;
+--button-dark-color-border-transparent-primary-active: #d5d7db;
+--button-dark-color-border-transparent-neutral-default: transparent;
+--button-dark-color-border-transparent-neutral-hover: #242831;
+--button-dark-color-border-transparent-neutral-active: #343944;
+--button-dark-color-text-solid-primary-default: #ffffff;
+--button-dark-color-text-solid-danger-default: #ffffff;
+--button-dark-color-text-outlined-primary-default: #66a8fd;
+--button-dark-color-text-outlined-neutral-default: #ffffff;
+--button-dark-color-text-outlined-danger-default: #fc817c;
+--button-dark-color-text-transparent-primary-default: #66a8fd;
+--button-dark-color-text-transparent-neutral-default: #ffffff;
+}

package/build/css/themes/button/index.css

@@ -0,0 +1,2 @@
+@import "./dark.css";
+@import "./light.css";

package/build/css/themes/button/light.css

@@ -0,0 +1,42 @@
+
+:root, 
+:host {
+--button-light-color-background-solid-primary-default: #0c57cd;
+--button-light-color-background-solid-primary-hover: #063b99;
+--button-light-color-background-solid-danger-default: #d12828;
+--button-light-color-background-solid-danger-hover: #ab1a1d;
+--button-light-color-background-outlined-primary-default: #ffffff;
+--button-light-color-background-outlined-primary-hover: #f0f7ff;
+--button-light-color-background-outlined-neutral-default: #ffffff;
+--button-light-color-background-outlined-neutral-hover: #edeeef;
+--button-light-color-background-outlined-danger-default: #ffffff;
+--button-light-color-background-outlined-danger-hover: #d12828;
+--button-light-color-background-transparent-primary-default: transparent;
+--button-light-color-background-transparent-primary-hover: #edeeef;
+--button-light-color-background-transparent-primary-active: #d5d7db;
+--button-light-color-background-transparent-neutral-default: transparent;
+--button-light-color-background-transparent-neutral-hover: #edeeef;
+--button-light-color-background-transparent-neutral-active: #d5d7db;
+--button-light-color-border-solid-primary-default: #063b99;
+--button-light-color-border-solid-primary-hover: #041C4F;
+--button-light-color-border-solid-danger-default: #ab1a1d;
+--button-light-color-border-solid-danger-hover: #7e130e;
+--button-light-color-border-outlined-primary-default: #0c57cd;
+--button-light-color-border-outlined-primary-hover: #0c57cd;
+--button-light-color-border-outlined-neutral-default: #abcffd;
+--button-light-color-border-outlined-danger-default: #d12828;
+--button-light-color-border-outlined-danger-hover: #d12828;
+--button-light-color-border-transparent-primary-default: transparent;
+--button-light-color-border-transparent-primary-hover: transparent;
+--button-light-color-border-transparent-primary-active: #d5d7db;
+--button-light-color-border-transparent-neutral-default: transparent;
+--button-light-color-border-transparent-neutral-hover: transparent;
+--button-light-color-border-transparent-neutral-active: #d5d7db;
+--button-light-color-text-solid-primary-default: #ffffff;
+--button-light-color-text-solid-danger-default: #ffffff;
+--button-light-color-text-outlined-primary-default: #0c57cd;
+--button-light-color-text-outlined-neutral-default: #121212;
+--button-light-color-text-outlined-danger-default: #d12828;
+--button-light-color-text-transparent-primary-default: #0c57cd;
+--button-light-color-text-transparent-neutral-default: #121212;
+}

package/build/css/themes/checkbox/dark.css

@@ -0,0 +1,19 @@
+
+:root, 
+:host {
+--checkbox-dark-color-background-primary-active: #3a89fd;
+--checkbox-dark-color-background-primary-default: #121212;
+--checkbox-dark-color-background-primary-hover: #4f5562;
+--checkbox-dark-color-background-danger-active: #f4534f;
+--checkbox-dark-color-background-danger-default: #f4534f;
+--checkbox-dark-color-background-danger-hover: #121212;
+--checkbox-dark-color-background-indeterminate-active: #0c57cd;
+--checkbox-dark-color-background-indeterminate-default: #0c57cd;
+--checkbox-dark-color-background-indeterminate-hover: #ffffff;
+--checkbox-dark-color-border-primary-active: #3a89fd;
+--checkbox-dark-color-border-primary-default: #343944;
+--checkbox-dark-color-border-primary-hover: #041C4F;
+--checkbox-dark-color-border-danger-default: #ab1a1d;
+--checkbox-dark-color-border-danger-hover: #7e130e;
+--checkbox-dark-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/checkbox/light.css

@@ -0,0 +1,19 @@
+
+:root, 
+:host {
+--checkbox-light-color-background-primary-active: #0c57cd;
+--checkbox-light-color-background-primary-default: #ffffff;
+--checkbox-light-color-background-primary-hover: #b7bcc3;
+--checkbox-light-color-background-danger-active: #d12828;
+--checkbox-light-color-background-danger-default: #d12828;
+--checkbox-light-color-background-danger-hover: #ffffff;
+--checkbox-light-color-background-indeterminate-active: #0c57cd;
+--checkbox-light-color-background-indeterminate-default: #0c57cd;
+--checkbox-light-color-background-indeterminate-hover: #ffffff;
+--checkbox-light-color-border-primary-active: #041C4F;
+--checkbox-light-color-border-primary-default: #343944;
+--checkbox-light-color-border-primary-hover: #041C4F;
+--checkbox-light-color-border-danger-default: #ab1a1d;
+--checkbox-light-color-border-danger-hover: #7e130e;
+--checkbox-light-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/checkbox-tile/dark.css

@@ -0,0 +1,14 @@
+
+:root, 
+:host {
+--checkbox-tile-dark-color-background-primary-active: #041C4F;
+--checkbox-tile-dark-color-background-primary-default: #242831;
+--checkbox-tile-dark-color-background-primary-hover: #343944;
+--checkbox-tile-dark-color-background-altbackground-active: #041C4F;
+--checkbox-tile-dark-color-background-altbackground-default: #121212;
+--checkbox-tile-dark-color-background-altbackground-hover: #343944;
+--checkbox-tile-dark-color-border-primary-active: #0c57cd;
+--checkbox-tile-dark-color-border-primary-default: #242831;
+--checkbox-tile-dark-color-border-primary-hover: #343944;
+--checkbox-tile-dark-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/checkbox-tile/light.css

@@ -0,0 +1,18 @@
+
+:root, 
+:host {
+--checkbox-tile-light-color-background-primary-active: #d9eafe;
+--checkbox-tile-light-color-background-primary-default: #edeeef;
+--checkbox-tile-light-color-background-primary-hover: #d5d7db;
+--checkbox-tile-light-color-background-altbackground-active: #66a8fd;
+--checkbox-tile-light-color-background-altbackground-default: #ffffff;
+--checkbox-tile-light-color-background-altbackground-hover: #d5d7db;
+--checkbox-tile-light-color-border-primary-active: #66a8fd;
+--checkbox-tile-light-color-border-primary-default: #edeeef;
+--checkbox-tile-light-color-border-primary-hover: #d5d7db;
+--checkbox-tile-light-color-border-active-default: #66a8fd;
+--checkbox-tile-light-color-border-altbackground-active: #66a8fd;
+--checkbox-tile-light-color-border-altbackground-default: #ffffff;
+--checkbox-tile-light-color-border-altbackground-hover: #d5d7db;
+--checkbox-tile-light-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/field-message/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--field-message-dark-color-text-primary-default: #b7bcc3;
+--field-message-dark-color-text-danger-default: #fc817c;
+}

package/build/css/themes/field-message/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--field-message-light-color-text-primary-default: #6b7280;
+--field-message-light-color-text-danger-default: #d12828;
+}

package/build/css/themes/form-label/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--form-label-dark-elements-indicator-background: #d26e16;
+--form-label-dark-color-text-primary-default: #ffffff;
+}

package/build/css/themes/form-label/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--form-label-light-elements-indicator-background: #d26e16;
+--form-label-light-color-text-primary-default: #121212;
+}