@kofile/gds-foundations 1.0.0-alpha.14 → 1.0.0-alpha.16

package/build/css/components/dialog.module.css

@@ -0,0 +1,56 @@
+.overlay {
+  background-color: var(
+    --dialog-light-elements-overlay-color-background-primary-default
+  );
+  position: fixed;
+  inset: 0;
+}
+
+.content {
+  background-color: var(
+    --dialog-light-elements-content-color-background-primary-default
+  );
+  border-radius: var(--dialog-elements-content-size-compact-border-radius);
+  box-shadow: var(--dialog-elements-content-size-compact-box-shadow);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--dialog-elements-content-size-compact-width);
+  padding-block: var(--dialog-elements-content-size-compact-padding-block);
+  padding-inline: var(--dialog-elements-content-size-compact-padding-inline);
+  animation: var(--dialog-content-animation);
+}
+.content:focus {
+  outline: none;
+}
+.content[data-size="spacious"] {
+  width: var(--dialog-elements-content-size-spacious-width);
+}
+.content[data-mode="dark"] {
+  background-color: var(
+    --dialog-dark-elements-content-color-background-primary-default
+  );
+}
+
+.title {
+  margin: var(--dialog-elements-title-margin);
+  margin-block-start: var(--dialog-elements-title-margin-block-start);
+  color: var(--dialog-light-elements-title-color-text-primary-default);
+  font: var(--dialog-elements-title-typography);
+  text-align: var(--dialog-elements-title-text-align);
+}
+.title[data-mode="dark"] {
+  color: var(--dialog-dark-elements-title-color-text-primary-default);
+}
+
+.description {
+  margin: var(--dialog-elements-description-margin);
+  margin-block-start: var(--dialog-elements-description-margin-block-start);
+  color: var(--dialog-light-elements-description-color-text-primary-default);
+  font: var(--dialog-elements-description-typography);
+  text-align: var(--dialog-elements-description-text-align);
+}
+.description[data-mode="dark"] {
+  color: var(--dialog-dark-elements-description-color-text-primary-default);
+}

package/build/css/components/loader.module.css

@@ -0,0 +1,19 @@
+.loader {
+  border: var(--loader-size-lg-border-width) solid
+    var(--loader-light-color-border-primary-default);
+  border-top: var(--loader-size-lg-border-width) solid
+    var(--loader-light-color-border-top-primary-default);
+  border-radius: var(--loader-size-lg-border-radius);
+  width: var(--loader-size-lg-width);
+  height: var(--loader-size-lg-height);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/build/css/components/select.module.css

@@ -108,7 +108,7 @@
   display: flex;
   align-items: center;
   gap: var(--select-elements-menu-item-gap-default);
-  height: var(--select-elements-menu-item-size-lg-height);
+  /* height: var(--select-elements-menu-item-size-lg-height); */
   outline: none;
   padding-inline: var(--select-elements-menu-item-size-lg-padding-inline);
 }
@@ -233,3 +233,9 @@
 .info[data-mode="dark"] {
   color: var(--select-dark-elements-info-color-text-primary-default);
 }
+
+.icon {
+  min-width: var(--select-elements-icon-size-md-min-height);
+  min-height: 20px;
+  align-self: baseline;
+}

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

@@ -1,8 +1,3 @@
-/* reset */
-/* button {
-  all: unset;
-} */
-
 .root {
   background-color: var(--switch-light-color-background-primary-default);
   border-radius: var(--switch-size-md-border-radius);
@@ -39,8 +34,6 @@
   width: var(--switch-size-sm-width);
 }
 
-/* TODO DARK MODE!!! */
-
 .thumb {
   display: block;
   width: var(--switch-elements-thumb-size-md-width);

package/build/css/themes/dialog/dark.css

@@ -0,0 +1,8 @@
+
+:root, 
+:host {
+--dialog-dark-elements-overlay-color-background-primary-default: rgba(0, 0, 0, 0.5);
+--dialog-dark-elements-content-color-background-primary-default: #121212;
+--dialog-dark-elements-title-color-text-primary-default: #ffffff;
+--dialog-dark-elements-description-color-text-primary-default: #b7bcc3;
+}

package/build/css/themes/dialog/light.css

@@ -0,0 +1,8 @@
+
+:root, 
+:host {
+--dialog-light-elements-overlay-color-background-primary-default: rgba(0, 0, 0, 0.5);
+--dialog-light-elements-content-color-background-primary-default: #ffffff;
+--dialog-light-elements-title-color-text-primary-default: #121212;
+--dialog-light-elements-description-color-text-primary-default: #6b7280;
+}

package/build/css/themes/global.css

@@ -442,6 +442,21 @@
 --card-size-md-width: 32rem;
 --card-size-lg-padding: 3rem;
 --card-size-lg-width: 64rem;
+--dialog-elements-content-size-compact-border-radius: 0.375rem;
+--dialog-elements-content-size-compact-border-width: 0.063rem;
+--dialog-elements-content-size-compact-padding-block: 1.5rem;
+--dialog-elements-content-size-compact-padding-inline: 1.25rem;
+--dialog-elements-content-size-compact-box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.24);
+--dialog-elements-content-size-compact-width: 16rem;
+--dialog-elements-content-size-spacious-width: 384px;
+--dialog-elements-title-typography: 700 1.25rem/1.75rem 'Source Sans 3';
+--dialog-elements-title-margin: 0rem;
+--dialog-elements-title-margin-block-start: 0.5rem;
+--dialog-elements-title-text-align: center;
+--dialog-elements-description-typography: 400 0.813rem/1.25rem 'Source Sans 3';
+--dialog-elements-description-margin: 0rem;
+--dialog-elements-description-margin-block-start: 0.5rem;
+--dialog-elements-description-text-align: center;
 --field-message-size-sm-typography: 400 0.75rem/1rem 'Source Sans 3';
 --field-message-size-md-margin-block-end: 0.375rem;
 --field-message-size-md-typography: 400 0.813rem/1.25rem 'Source Sans 3';
@@ -460,6 +475,10 @@
 --link-gap-default: 0.25rem;
 --link-opacity-disabled: 0.32;
 --link-weight-regular: 400;
+--loader-size-lg-border-radius: 100%;
+--loader-size-lg-border-width: 0.5rem;
+--loader-size-lg-height: 4rem;
+--loader-size-lg-width: 4rem;
 --radio-group-elements-indicator-size-sm-height: 0.375rem;
 --radio-group-elements-indicator-size-sm-width: 0.375rem;
 --radio-group-elements-indicator-size-md-border-radius: 50%;
@@ -521,12 +540,13 @@
 --select-elements-content-scrollbar-size-lg-border-width: 0.063rem;
 --select-elements-content-scrollbar-size-lg-width: 0.75rem;
 --select-elements-content-scrollbar-thumb-size-lg-height: 8rem;
---select-elements-menu-item-size-lg-height: 2rem;
 --select-elements-menu-item-size-lg-padding-inline: 0.75rem;
 --select-elements-menu-item-gap-default: 0.5rem;
 --select-elements-menu-item-opacity-disabled: 0.32;
 --select-elements-separator-size-lg-height: 0.063rem;
 --select-elements-info-size-lg-typography: 400 0.813rem/1.25rem 'Source Sans 3';
+--select-elements-icon-size-md-min-height: 1.25rem;
+--select-elements-icon-size-md-min-width: 1.25rem;
 --switch-elements-thumb-size-sm-height: 1rem;
 --switch-elements-thumb-size-sm-width: 1rem;
 --switch-elements-thumb-size-md-border-radius: 1rem;

package/build/css/themes/index.css

@@ -8,6 +8,8 @@
 @import "./checkbox/dark.css";
 @import "./checkbox-tile/light.css";
 @import "./checkbox-tile/dark.css";
+@import "./dialog/light.css";
+@import "./dialog/dark.css";
 @import "./field-message/light.css";
 @import "./field-message/dark.css";
 @import "./form-label/light.css";
@@ -20,6 +22,8 @@
 @import "./link/dark.css";
 @import "./list-item/light.css";
 @import "./list-item/dark.css";
+@import "./loader/light.css";
+@import "./loader/dark.css";
 @import "./radio-group/light.css";
 @import "./radio-group/dark.css";
 @import "./radio-group-tile/light.css";

package/build/css/themes/loader/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--loader-dark-color-border-primary-default: #abcffd;
+--loader-dark-color-border-top-primary-default: #063b99;
+}

package/build/css/themes/loader/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--loader-light-color-border-primary-default: #abcffd;
+--loader-light-color-border-top-primary-default: #063b99;
+}

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

@@ -282,3 +282,164 @@
 .bg-teal-1000 {
   background-color: var(--primitive-teal-1000) !important;
 }
+
+.bg-neutral-100 {
+  background-color: var(--color-neutral-100) !important;
+}
+.bg-neutral-200 {
+  background-color: var(--color-neutral-200) !important;
+}
+.bg-neutral-300 {
+  background-color: var(--color-neutral-300) !important;
+}
+.bg-neutral-400 {
+  background-color: var(--color-neutral-400) !important;
+}
+.bg-neutral-500 {
+  background-color: var(--color-neutral-500) !important;
+}
+.bg-neutral-600 {
+  background-color: var(--color-neutral-600) !important;
+}
+.bg-neutral-700 {
+  background-color: var(--color-neutral-700) !important;
+}
+.bg-neutral-800 {
+  background-color: var(--color-neutral-800) !important;
+}
+.bg-neutral-900 {
+  background-color: var(--color-neutral-900) !important;
+}
+.bg-neutral-1000 {
+  background-color: var(--color-neutral-1000) !important;
+}
+.bg-neutral-black {
+  background-color: var(--color-neutral-black) !important;
+}
+.bg-neutral-white {
+  background-color: var(--color-neutral-white) !important;
+}
+
+.bg-success-100 {
+  background-color: var(--color-success-100) !important;
+}
+.bg-success-200 {
+  background-color: var(--color-success-200) !important;
+}
+.bg-success-300 {
+  background-color: var(--color-success-300) !important;
+}
+.bg-success-400 {
+  background-color: var(--color-success-400) !important;
+}
+.bg-success-500 {
+  background-color: var(--color-success-500) !important;
+}
+.bg-success-600 {
+  background-color: var(--color-success-600) !important;
+}
+.bg-success-700 {
+  background-color: var(--color-success-700) !important;
+}
+.bg-success-800 {
+  background-color: var(--color-success-800) !important;
+}
+.bg-success-900 {
+  background-color: var(--color-success-900) !important;
+}
+.bg-success-1000 {
+  background-color: var(--color-success-1000) !important;
+}
+
+.bg-danger-100 {
+  background-color: var(--color-danger-100) !important;
+}
+.bg-danger-200 {
+  background-color: var(--color-danger-200) !important;
+}
+.bg-danger-300 {
+  background-color: var(--color-danger-300) !important;
+}
+.bg-danger-400 {
+  background-color: var(--color-danger-400) !important;
+}
+.bg-danger-500 {
+  background-color: var(--color-danger-500) !important;
+}
+.bg-danger-600 {
+  background-color: var(--color-danger-600) !important;
+}
+.bg-danger-700 {
+  background-color: var(--color-danger-700) !important;
+}
+.bg-danger-800 {
+  background-color: var(--color-danger-800) !important;
+}
+.bg-danger-900 {
+  background-color: var(--color-danger-900) !important;
+}
+.bg-danger-1000 {
+  background-color: var(--color-danger-1000) !important;
+}
+
+.bg-warning-100 {
+  background-color: var(--color-warning-100) !important;
+}
+.bg-warning-200 {
+  background-color: var(--color-warning-200) !important;
+}
+.bg-warning-300 {
+  background-color: var(--color-warning-300) !important;
+}
+.bg-warning-400 {
+  background-color: var(--color-warning-400) !important;
+}
+.bg-warning-500 {
+  background-color: var(--color-warning-500) !important;
+}
+.bg-warning-600 {
+  background-color: var(--color-warning-600) !important;
+}
+.bg-warning-700 {
+  background-color: var(--color-warning-700) !important;
+}
+.bg-warning-800 {
+  background-color: var(--color-warning-800) !important;
+}
+.bg-warning-900 {
+  background-color: var(--color-warning-900) !important;
+}
+.bg-warning-1000 {
+  background-color: var(--color-warning-1000) !important;
+}
+
+.bg-highlight-100 {
+  background-color: var(--color-highlight-100) !important;
+}
+.bg-highlight-200 {
+  background-color: var(--color-highlight-200) !important;
+}
+.bg-highlight-300 {
+  background-color: var(--color-highlight-300) !important;
+}
+.bg-highlight-400 {
+  background-color: var(--color-highlight-400) !important;
+}
+.bg-highlight-500 {
+  background-color: var(--color-highlight-500) !important;
+}
+.bg-highlight-600 {
+  background-color: var(--color-highlight-600) !important;
+}
+.bg-highlight-700 {
+  background-color: var(--color-highlight-700) !important;
+}
+.bg-highlight-800 {
+  background-color: var(--color-highlight-800) !important;
+}
+.bg-highlight-900 {
+  background-color: var(--color-highlight-900) !important;
+}
+.bg-highlight-1000 {
+  background-color: var(--color-highlight-1000) !important;
+}

package/build/css/utilities/index.css

@@ -24,6 +24,8 @@
 @import "./overflow.css";
 @import "./position.css";
 @import "./padding.css";
+@import "./shadow.css";
+@import "./text-align.css";
 @import "./text-overflow.css";
 @import "./text-transform.css";
 @import "./vertical-align.css";

package/build/css/utilities/shadow.css

@@ -0,0 +1,15 @@
+.shadow-xs {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.08) !important;
+}
+.shadow-sm {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.16) !important;
+}
+.shadow-md {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.24) !important;
+}
+.shadow-lg {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.72) !important;
+}
+.shadow-xl {
+  box-shadow: 0 0 16px 0 rgba(18, 18, 18, 0.96) !important;
+}

package/build/css/utilities/text-align.css

@@ -0,0 +1,18 @@
+.text-left {
+  text-align: left !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-justify {
+  text-align: justify !important;
+}
+.text-start {
+  text-align: start !important;
+}
+.text-end {
+  text-align: end !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kofile/gds-foundations",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.16",
   "description": "",
   "main": "build/css/index.css",
   "exports": {
@@ -68,6 +68,10 @@
       "import": "./build/css/components/checkbox.module.css",
       "require": "./build/css/components/checkbox.module.css"
     },
+    "./components/dialog.module.css": {
+      "import": "./build/css/components/dialog.module.css",
+      "require": "./build/css/components/dialog.module.css"
+    },
     "./components/field-message.module.css": {
       "import": "./build/css/components/field-message.module.css",
       "require": "./build/css/components/field-message.module.css"
@@ -104,6 +108,10 @@
       "import": "./build/css/components/list-item.module.css",
       "require": "./build/css/components/list-item.module.css"
     },
+    "./components/loader.module.css": {
+      "import": "./build/css/components/loader.module.css",
+      "require": "./build/css/components/loader.module.css"
+    },
     "./components/radio-group.module.css": {
       "import": "./build/css/components/radio-group.module.css",
       "require": "./build/css/components/radio-group.module.css"