@kofile/gds-foundations 0.0.11 → 1.0.0-alpha.1

package/build/css/themes/radio-group/dark.css

@@ -0,0 +1,12 @@
+
+:root, 
+:host {
+--radio-group-dark-color-background-primary-active: #3a89fd;
+--radio-group-dark-color-background-primary-default: #121212;
+--radio-group-dark-color-background-danger-active: #f4534f;
+--radio-group-dark-color-background-danger-default: #f4534f;
+--radio-group-dark-color-border-primary-active: #3a89fd;
+--radio-group-dark-color-border-primary-default: #343944;
+--radio-group-dark-color-border-danger-default: #f4534f;
+--radio-group-dark-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/radio-group/light.css

@@ -0,0 +1,11 @@
+
+:root, 
+:host {
+--radio-group-light-color-background-primary-active: #0c57cd;
+--radio-group-light-color-background-primary-default: #ffffff;
+--radio-group-light-color-background-danger-active: #d12828;
+--radio-group-light-color-background-danger-default: #d12828;
+--radio-group-light-color-border-primary-default: #343944;
+--radio-group-light-color-border-danger-default: #7e130e;
+--radio-group-light-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/radio-group-tile/dark.css

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

package/build/css/themes/radio-group-tile/light.css

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

package/build/css/themes/select/dark.css

@@ -0,0 +1,31 @@
+
+:root, 
+:host {
+--select-dark-elements-trigger-color-background-primary-default: #191b22;
+--select-dark-elements-trigger-color-background-danger-default: #3b0807;
+--select-dark-elements-trigger-color-background-altbackground-default: #121212;
+--select-dark-elements-trigger-color-border-primary-default: #343944;
+--select-dark-elements-trigger-color-border-primary-active: #0c57cd;
+--select-dark-elements-trigger-color-border-primary-focus: #0c57cd;
+--select-dark-elements-trigger-color-border-danger-default: #d12828;
+--select-dark-elements-trigger-color-border-danger-focus: #d12828;
+--select-dark-elements-trigger-color-text-primary-default: #121212;
+--select-dark-elements-trigger-color-text-danger-default: #121212;
+--select-dark-elements-trigger-color-text-danger-placeholder: #6b7280;
+--select-dark-elements-trigger-color-shadow-primary-focus: 0 0 0 0.375rem rgba(12, 87, 205, 0.24);
+--select-dark-elements-trigger-color-shadow-danger-focus: 0 0 0 0.375rem rgba(209, 40, 40, 0.24);
+--select-dark-elements-content-color-background-primary-default: #191b22;
+--select-dark-elements-content-color-border-primary-default: #343944;
+--select-dark-elements-content-scrollbar-color-background-primary-default: #242831;
+--select-dark-elements-content-scrollbar-color-border-primary-default: #343944;
+--select-dark-elements-content-scrollbar-thumb-color-background-primary-default: #4f5562;
+--select-dark-elements-content-scrollbar-thumb-color-border-primary-default: #8d949f;
+--select-dark-elements-menu-item-color-background-primary-default: #191b22;
+--select-dark-elements-menu-item-color-background-primary-hover: #242831;
+--select-dark-elements-menu-item-color-background-primary-active: #041C4F;
+--select-dark-elements-menu-item-color-text-primary-default: #ffffff;
+--select-dark-elements-menu-item-color-text-primary-hover: #ffffff;
+--select-dark-elements-menu-item-color-text-primary-active: #ffffff;
+--select-dark-elements-separtor-color-background-primary-default: #d5d7db;
+--select-dark-elements-info-color-text-primary-default: #b7bcc3;
+}

package/build/css/themes/select/light.css

@@ -0,0 +1,28 @@
+
+:root, 
+:host {
+--select-light-elements-trigger-color-background-primary-default: #edeeef;
+--select-light-elements-trigger-color-background-danger-default: #fee5e5;
+--select-light-elements-trigger-color-background-altbackground-default: #ffffff;
+--select-light-elements-trigger-color-border-primary-default: #d5d7db;
+--select-light-elements-trigger-color-border-primary-active: #66a8fd;
+--select-light-elements-trigger-color-border-primary-focus: #66a8fd;
+--select-light-elements-trigger-color-border-danger-default: #d12828;
+--select-light-elements-trigger-color-border-danger-focus: #d12828;
+--select-light-elements-trigger-color-text-primary-default: #121212;
+--select-light-elements-trigger-color-text-danger-default: #121212;
+--select-light-elements-trigger-color-text-danger-placeholder: #6b7280;
+--select-light-elements-trigger-color-shadow-primary-focus: 0 0 0 0.375rem rgba(12, 87, 205, 0.16);
+--select-light-elements-trigger-color-shadow-danger-focus: 0 0 0 0.375rem rgba(209, 40, 40, 0.16);
+--select-light-elements-content-color-background-primary-default: #ffffff;
+--select-light-elements-content-color-border-primary-default: #d5d7db;
+--select-light-elements-content-scrollbar-color-background-primary-default: #F9F9F9;
+--select-light-elements-content-scrollbar-color-border-primary-default: #d5d7db;
+--select-light-elements-content-scrollbar-thumb-color-background-primary-default: #d5d7db;
+--select-light-elements-content-scrollbar-thumb-color-border-primary-default: #8d949f;
+--select-light-elements-menu-item-color-background-primary-default: #ffffff;
+--select-light-elements-menu-item-color-background-primary-hover: rgba(221, 222, 228, 0.48);
+--select-light-elements-menu-item-color-background-primary-active: #d9eafe;
+--select-light-elements-separtor-color-background-primary-default: #d5d7db;
+--select-light-elements-info-color-text-primary-default: #6b7280;
+}

package/build/css/themes/switch/dark.css

@@ -0,0 +1,12 @@
+
+:root, 
+:host {
+--switch-dark-elements-thumb-border-primary-default: #4f5562;
+--switch-dark-elements-thumb-border-primary-active: #ffffff;
+--switch-color-background-primary-active: #3a89fd;
+--switch-color-background-primary-default: #121212;
+--switch-color-background-primary-hover: #343944;
+--switch-color-border-primary-active: #3a89fd;
+--switch-color-border-primary-default: #4f5562;
+--switch-color-outline-primary-fill: #66a8fd;
+}

package/build/css/themes/switch/light.css

@@ -0,0 +1,14 @@
+
+:root, 
+:host {
+--switch-light-elements-thumb-color-background-primary-default: #ffffff;
+--switch-light-elements-thumb-color-border-primary-default: #343944;
+--switch-light-elements-thumb-color-border-primary-active: #041C4F;
+--switch-light-color-background-primary-active: #0c57cd;
+--switch-light-color-background-primary-default: #ffffff;
+--switch-light-color-background-primary-hover: #b7bcc3;
+--switch-light-color-border-primary-active: #041C4F;
+--switch-light-color-border-primary-default: #343944;
+--switch-light-color-border-primary-hover: #041C4F;
+--switch-light-color-outline-primary-fill: #063b99;
+}

package/build/css/themes/table/dark.css

@@ -0,0 +1,20 @@
+
+:root, 
+:host {
+--table-dark-elements-container-color-background-primary-default: #191b22;
+--table-dark-elements-container-color-border-primary-default: #343944;
+--table-dark-elements-container-scrollbar-color-background-primary-default: #242831;
+--table-dark-elements-container-scrollbar-color-border-primary-default: #343944;
+--table-dark-elements-container-scrollbar-thumb-color-background-primary-default: #4f5562;
+--table-dark-elements-container-scrollbar-thumb-color-border-primary-default: #8d949f;
+--table-dark-elements-tr-color-background-primary-default: #121212;
+--table-dark-elements-tr-color-background-primary-hover: #191b22;
+--table-dark-elements-tr-color-background-striped-default: #343944;
+--table-dark-elements-tr-color-background-striped-hover: #191b22;
+--table-dark-elements-th-color-background-primary-default: #242831;
+--table-dark-elements-th-color-background-altbackground-default: #121212;
+--table-dark-elements-th-color-border-bottom-primary-default: #343944;
+--table-dark-elements-th-color-text-primary-default: #ffffff;
+--table-dark-elements-td-color-border-primary-default: #343944;
+--table-dark-elements-td-color-text-primary-default: #ffffff;
+}

package/build/css/themes/table/light.css

@@ -0,0 +1,24 @@
+
+:root, 
+:host {
+--table-light-elements-container-color-background-primary-default: #edeeef;
+--table-light-elements-container-color-border-primary-default: #d5d7db;
+--table-light-elements-container-scrollbar-color-background-primary-default: #F9F9F9;
+--table-light-elements-container-scrollbar-color-border-primary-default: #d5d7db;
+--table-light-elements-container-scrollbar-thumb-color-background-primary-default: #d5d7db;
+--table-light-elements-container-scrollbar-thumb-color-border-primary-default: #8d949f;
+--table-light-elements-tr-color-background-primary-default: #ffffff;
+--table-light-elements-tr-color-background-primary-hover: #edeeef;
+--table-light-elements-tr-color-background-striped-default: #F9F9F9;
+--table-light-elements-tr-color-background-striped-hover: #edeeef;
+--table-light-elements-th-color-background-primary-default: #edeeef;
+--table-light-elements-th-color-background-primary-hover: #edeeef;
+--table-light-elements-th-color-background-altbackground-default: #ffffff;
+--table-light-elements-th-color-border-bottom-primary-default: #d5d7db;
+--table-light-elements-th-color-text-primary-default: #121212;
+--table-light-elements-td-color-border-primary-default: #d5d7db;
+--table-light-elements-td-color-text-primary-default: #121212;
+--table-light-elements-actions-color-background-primary-default: #edeeef;
+--table-light-elements-actions-color-background-altbackground-default: #ffffff;
+--table-light-elements-actions-color-border-primary-default: #d5d7db;
+}

package/build/css/themes/tabs/dark.css

@@ -0,0 +1,11 @@
+
+:root, 
+:host {
+--tabs-dark-elements-list-color-border-primary-default: #343944;
+--tabs-dark-elements-trigger-color-background-primary-default: #ffffff;
+--tabs-dark-elements-trigger-color-border-primary-default: transparent;
+--tabs-dark-elements-trigger-color-border-primary-active: #0c57cd;
+--tabs-dark-elements-trigger-color-text-primary-default: #ffffff;
+--tabs-dark-elements-trigger-color-text-primary-active: #66a8fd;
+--tabs-dark-elements-trigger-color-text-primary-hover: #abcffd;
+}

package/build/css/themes/tabs/light.css

@@ -0,0 +1,13 @@
+
+:root, 
+:host {
+--tabs-light-elements-list-color-border-primary-default: #d5d7db;
+--tabs-light-elements-trigger-color-background-primary-default: #ffffff;
+--tabs-light-elements-trigger-color-border-primary-default: transparent;
+--tabs-light-elements-trigger-color-border-primary-active: #0c57cd;
+--tabs-light-elements-trigger-color-text-primary-default: #121212;
+--tabs-light-elements-trigger-color-text-primary-active: #0c57cd;
+--tabs-light-elements-trigger-color-text-primary-hover: #063b99;
+--tabs-light-elements-content-color-background-primary-default: #ffffff;
+--tabs-light-elements-content-color-border-primary-default: #d5d7db;
+}

package/build/css/tokens-global.css

@@ -335,4 +335,8 @@
   --elevation-499: 499;
   --elevation-absolute-bottom: -999;
   --elevation-absolute-top: 999;
+  --opacity-disabled: 0.32;
+  --opacity-sm: 0.48;
+  --opacity-md: 0.64;
+  --opacity-l: 0.88;
 }

package/build/css/utilities/background-color.css

@@ -0,0 +1,284 @@
+.bg-gray-100 {
+  background-color: var(--primitive-gray-100) !important;
+}
+.bg-gray-200 {
+  background-color: var(--primitive-gray-200) !important;
+}
+.bg-gray-300 {
+  background-color: var(--primitive-gray-300) !important;
+}
+.bg-gray-400 {
+  background-color: var(--primitive-gray-400) !important;
+}
+.bg-gray-500 {
+  background-color: var(--primitive-gray-500) !important;
+}
+.bg-gray-600 {
+  background-color: var(--primitive-gray-600) !important;
+}
+.bg-gray-700 {
+  background-color: var(--primitive-gray-700) !important;
+}
+.bg-gray-800 {
+  background-color: var(--primitive-gray-800) !important;
+}
+.bg-gray-900 {
+  background-color: var(--primitive-gray-900) !important;
+}
+.bg-gray-1000 {
+  background-color: var(--primitive-gray-1000) !important;
+}
+.bg-gray-black {
+  background-color: var(--primitive-gray-black) !important;
+}
+.bg-gray-white {
+  background-color: var(--primitive-gray-white) !important;
+}
+
+.bg-blue-100 {
+  background-color: var(--primitive-blue-100) !important;
+}
+.bg-blue-200 {
+  background-color: var(--primitive-blue-200) !important;
+}
+.bg-blue-300 {
+  background-color: var(--primitive-blue-300) !important;
+}
+.bg-blue-400 {
+  background-color: var(--primitive-blue-400) !important;
+}
+.bg-blue-500 {
+  background-color: var(--primitive-blue-500) !important;
+}
+.bg-blue-600 {
+  background-color: var(--primitive-blue-600) !important;
+}
+.bg-blue-700 {
+  background-color: var(--primitive-blue-700) !important;
+}
+.bg-blue-800 {
+  background-color: var(--primitive-blue-800) !important;
+}
+.bg-blue-900 {
+  background-color: var(--primitive-blue-900) !important;
+}
+.bg-blue-1000 {
+  background-color: var(--primitive-blue-1000) !important;
+}
+
+.bg-red-100 {
+  background-color: var(--primitive-red-100) !important;
+}
+.bg-red-200 {
+  background-color: var(--primitive-red-200) !important;
+}
+.bg-red-300 {
+  background-color: var(--primitive-red-300) !important;
+}
+.bg-red-400 {
+  background-color: var(--primitive-red-400) !important;
+}
+.bg-red-500 {
+  background-color: var(--primitive-red-500) !important;
+}
+.bg-red-600 {
+  background-color: var(--primitive-red-600) !important;
+}
+.bg-red-700 {
+  background-color: var(--primitive-red-700) !important;
+}
+.bg-red-800 {
+  background-color: var(--primitive-red-800) !important;
+}
+.bg-red-900 {
+  background-color: var(--primitive-red-900) !important;
+}
+.bg-red-1000 {
+  background-color: var(--primitive-red-1000) !important;
+}
+
+.bg-green-100 {
+  background-color: var(--primitive-green-100) !important;
+}
+.bg-green-200 {
+  background-color: var(--primitive-green-200) !important;
+}
+.bg-green-300 {
+  background-color: var(--primitive-green-300) !important;
+}
+.bg-green-400 {
+  background-color: var(--primitive-green-400) !important;
+}
+.bg-green-500 {
+  background-color: var(--primitive-green-500) !important;
+}
+.bg-green-600 {
+  background-color: var(--primitive-green-600) !important;
+}
+.bg-green-700 {
+  background-color: var(--primitive-green-700) !important;
+}
+.bg-green-800 {
+  background-color: var(--primitive-green-800) !important;
+}
+.bg-green-900 {
+  background-color: var(--primitive-green-900) !important;
+}
+.bg-green-1000 {
+  background-color: var(--primitive-green-1000) !important;
+}
+
+.bg-orange-100 {
+  background-color: var(--primitive-orange-100) !important;
+}
+.bg-orange-200 {
+  background-color: var(--primitive-orange-200) !important;
+}
+.bg-orange-300 {
+  background-color: var(--primitive-orange-300) !important;
+}
+.bg-orange-400 {
+  background-color: var(--primitive-orange-400) !important;
+}
+.bg-orange-500 {
+  background-color: var(--primitive-orange-500) !important;
+}
+.bg-orange-600 {
+  background-color: var(--primitive-orange-600) !important;
+}
+.bg-orange-700 {
+  background-color: var(--primitive-orange-700) !important;
+}
+.bg-orange-800 {
+  background-color: var(--primitive-orange-800) !important;
+}
+.bg-orange-900 {
+  background-color: var(--primitive-orange-900) !important;
+}
+.bg-orange-1000 {
+  background-color: var(--primitive-orange-1000) !important;
+}
+
+.bg-yellow-100 {
+  background-color: var(--primitive-yellow-100) !important;
+}
+.bg-yellow-200 {
+  background-color: var(--primitive-yellow-200) !important;
+}
+.bg-yellow-300 {
+  background-color: var(--primitive-yellow-300) !important;
+}
+.bg-yellow-400 {
+  background-color: var(--primitive-yellow-400) !important;
+}
+.bg-yellow-500 {
+  background-color: var(--primitive-yellow-500) !important;
+}
+.bg-yellow-600 {
+  background-color: var(--primitive-yellow-600) !important;
+}
+.bg-yellow-700 {
+  background-color: var(--primitive-yellow-700) !important;
+}
+.bg-yellow-800 {
+  background-color: var(--primitive-yellow-800) !important;
+}
+.bg-yellow-900 {
+  background-color: var(--primitive-yellow-900) !important;
+}
+.bg-yellow-1000 {
+  background-color: var(--primitive-yellow-1000) !important;
+}
+
+.bg-purple-100 {
+  background-color: var(--primitive-purple-100) !important;
+}
+.bg-purple-200 {
+  background-color: var(--primitive-purple-200) !important;
+}
+.bg-purple-300 {
+  background-color: var(--primitive-purple-300) !important;
+}
+.bg-purple-400 {
+  background-color: var(--primitive-purple-400) !important;
+}
+.bg-purple-500 {
+  background-color: var(--primitive-purple-500) !important;
+}
+.bg-purple-600 {
+  background-color: var(--primitive-purple-600) !important;
+}
+.bg-purple-700 {
+  background-color: var(--primitive-purple-700) !important;
+}
+.bg-purple-800 {
+  background-color: var(--primitive-purple-800) !important;
+}
+.bg-purple-900 {
+  background-color: var(--primitive-purple-900) !important;
+}
+.bg-purple-1000 {
+  background-color: var(--primitive-purple-1000) !important;
+}
+
+.bg-magenta-100 {
+  background-color: var(--primitive-magenta-100) !important;
+}
+.bg-magenta-200 {
+  background-color: var(--primitive-magenta-200) !important;
+}
+.bg-magenta-300 {
+  background-color: var(--primitive-magenta-300) !important;
+}
+.bg-magenta-400 {
+  background-color: var(--primitive-magenta-400) !important;
+}
+.bg-magenta-500 {
+  background-color: var(--primitive-magenta-500) !important;
+}
+.bg-magenta-600 {
+  background-color: var(--primitive-magenta-600) !important;
+}
+.bg-magenta-700 {
+  background-color: var(--primitive-magenta-700) !important;
+}
+.bg-magenta-800 {
+  background-color: var(--primitive-magenta-800) !important;
+}
+.bg-magenta-900 {
+  background-color: var(--primitive-magenta-900) !important;
+}
+.bg-magenta-1000 {
+  background-color: var(--primitive-magenta-1000) !important;
+}
+
+.bg-teal-100 {
+  background-color: var(--primitive-teal-100) !important;
+}
+.bg-teal-200 {
+  background-color: var(--primitive-teal-200) !important;
+}
+.bg-teal-300 {
+  background-color: var(--primitive-teal-300) !important;
+}
+.bg-teal-400 {
+  background-color: var(--primitive-teal-400) !important;
+}
+.bg-teal-500 {
+  background-color: var(--primitive-teal-500) !important;
+}
+.bg-teal-600 {
+  background-color: var(--primitive-teal-600) !important;
+}
+.bg-teal-700 {
+  background-color: var(--primitive-teal-700) !important;
+}
+.bg-teal-800 {
+  background-color: var(--primitive-teal-800) !important;
+}
+.bg-teal-900 {
+  background-color: var(--primitive-teal-900) !important;
+}
+.bg-teal-1000 {
+  background-color: var(--primitive-teal-1000) !important;
+}