@kofile/gds-foundations 1.0.0-alpha.11 → 1.0.0-alpha.13

package/build/css/components/card.module.css

@@ -0,0 +1,23 @@
+.card {
+  background-color: var(--card-light-color-background-primary-default);
+  border: var(--card-size-sm-border-width) solid
+    var(--card-light-color-border-primary-default);
+  border-radius: var(--card-size-sm-border-radius);
+  min-height: var(--card-size-sm-min-height);
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-sm-width);
+}
+.card[data-size="md"] {
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-md-width);
+}
+.card[data-size="lg"] {
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-lg-width);
+}
+
+.card[data-mode="dark"] {
+  background-color: var(--card-dark-color-background-primary-default);
+  border: var(--card-size-sm-border-width) solid
+    var(--card-dark-color-border-primary-default);
+}

package/build/css/components/checkbox.module.css

@@ -1,7 +1,3 @@
-button {
-  all: unset;
-}
-
 .indicator {
   display: flex;
 }

package/build/css/components/list-callout-group.module.css

@@ -0,0 +1,3 @@
+.ul {
+  all: unset;
+}

package/build/css/components/list-callout.module.css

@@ -0,0 +1,11 @@
+.li {
+  all: unset;
+}
+
+.li {
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

package/build/css/components/list-group.module.css

@@ -0,0 +1,3 @@
+.ul {
+  all: unset;
+}

package/build/css/components/list-item.module.css

@@ -0,0 +1,11 @@
+.li {
+  all: unset;
+}
+
+.li {
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

package/build/css/components/radio-group.module.css

@@ -1,6 +1,6 @@
-button {
+/* button {
   all: unset;
-}
+} */
 
 .root {
   display: flex;

package/build/css/components/segmented-controller.module.css

@@ -0,0 +1,139 @@
+/* button,
+fieldset,
+input {
+  all: unset;
+} */
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  box-sizing: border-box;
+  display: flex;
+  column-gap: 1px;
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-light-elements-list-color-border-primary-default);
+  border-radius: var(
+    --segmented-controller-elements-list-size-lg-border-radius
+  );
+  width: fit-content;
+}
+.trigger {
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-default
+  );
+  padding-block: var(
+    --segmented-controller-elements-trigger-size-lg-padding-block
+  );
+  padding-inline: var(
+    --segmented-controller-elements-trigger-size-lg-padding-inline
+  );
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--segmented-controller-elements-trigger-size-lg-typography);
+  color: var(--segmented-controller-trigger-color);
+}
+.trigger:hover {
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger:first-child {
+  border-top-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+.trigger:last-child {
+  border-top-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+
+.trigger[data-state="active"] {
+  box-sizing: border-box;
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-active
+  );
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-active
+  );
+  /* border-color: var(
+    --segmented-controller-light-elements-trigger-color-border-primary-active
+  ); */
+
+  border: 1px solid var(--color-primary-300);
+  border-radius: 6px;
+
+  margin: -1px;
+}
+.trigger[data-size="md"] {
+  font: var(--segmented-controller-elements-trigger-size-md-typography);
+}
+.list[data-mode="dark"] {
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-dark-elements-list-color-border-primary-default);
+  background-color: var(
+    --segmented-controller-dark-elements-list-color-background-primary-default
+  );
+}
+
+.trigger[data-mode="dark"] {
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-default
+  );
+
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-default
+  );
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-default
+  );
+}
+.trigger[data-mode="dark"]:hover {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger[data-mode="dark"][data-state="active"] {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-active
+  );
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-active
+  );
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-active
+  );
+}
+
+.content {
+  flex-shrink: 1;
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+  margin-top: var(
+    --segmented-controller-elements-content-size-lg-margin-block-start
+  );
+  padding: var(--segmented-controller-elements-content-size-lg-padding);
+  outline: none;
+  width: auto;
+}
+.content:focus {
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+}

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

@@ -1,7 +1,7 @@
 /* reset */
-button {
+/* button {
   all: unset;
-}
+} */
 
 .trigger {
   box-sizing: border-box;

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

@@ -1,7 +1,7 @@
 /* reset */
-button {
+/* button {
   all: unset;
-}
+} */
 
 .root {
   background-color: var(--switch-light-color-background-primary-default);

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

@@ -1,8 +1,8 @@
-button,
+/* button,
 fieldset,
 input {
   all: unset;
-}
+} */
 
 .tokens {
 }

package/build/css/themes/card/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-dark-color-background-primary-default: #121212;
+--card-dark-color-border-primary-default: #343944;
+}

package/build/css/themes/card/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-light-color-background-primary-default: #ffffff;
+--card-light-color-border-primary-default: #d5d7db;
+}

package/build/css/themes/global.css

@@ -432,6 +432,16 @@
 --input-elements-addon-size-xl-height: 3rem;
 --input-elements-addon-size-xl-padding-inline: 1rem;
 --input-disabled-opacity: 0.32;
+--card-size-sm-border-radius: 0.5rem;
+--card-size-sm-border-width: 0.063rem;
+--card-size-sm-border-style: solid;
+--card-size-sm-min-height: 16rem;
+--card-size-sm-padding: 1rem;
+--card-size-sm-width: 288px;
+--card-size-md-padding: 1.5rem;
+--card-size-md-width: 32rem;
+--card-size-lg-padding: 3rem;
+--card-size-lg-width: 64rem;
 --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';
@@ -475,6 +485,19 @@
 --radio-group-tile-size-md-padding-block: 1rem;
 --radio-group-tile-size-md-padding-inline: 1rem;
 --radio-group-tile-size-md-width: auto;
+--segmented-controller-elements-list-size-lg-border-radius: 0.375rem;
+--segmented-controller-elements-list-size-lg-border-width: 0.063rem;
+--segmented-controller-elements-trigger-size-md-padding-block: 0.125rem;
+--segmented-controller-elements-trigger-size-md-padding-inline: 0.5rem;
+--segmented-controller-elements-trigger-size-md-typography: 600 0.813rem/1.25rem 'Source Sans 3';
+--segmented-controller-elements-trigger-size-lg-border-radius: 0.375rem;
+--segmented-controller-elements-trigger-size-lg-border-width: 0.125rem;
+--segmented-controller-elements-trigger-size-lg-padding-block: 0.375rem;
+--segmented-controller-elements-trigger-size-lg-padding-inline: 0.75rem;
+--segmented-controller-elements-trigger-size-lg-typography: 600 0.938rem/1.25rem 'Source Sans 3';
+--segmented-controller-elements-content-size-lg-border-width: 0.063rem;
+--segmented-controller-elements-content-size-lg-margin-block-start: 0.5rem;
+--segmented-controller-elements-content-size-lg-padding: 1rem;
 --select-elements-trigger-size-md-max-height: 1.5rem;
 --select-elements-trigger-size-md-padding-block: 0.25rem;
 --select-elements-trigger-size-md-padding-inline: 0.5rem;

package/build/css/themes/index.css

@@ -2,6 +2,8 @@
 @import "./badge";
 @import "./button/light.css";
 @import "./button/dark.css";
+@import "./card/light.css";
+@import "./card/dark.css";
 @import "./checkbox/light.css";
 @import "./checkbox/dark.css";
 @import "./checkbox-tile/light.css";
@@ -16,10 +18,14 @@
 @import "./label/dark.css";
 @import "./link/light.css";
 @import "./link/dark.css";
+@import "./list-item/light.css";
+@import "./list-item/dark.css";
 @import "./radio-group/light.css";
 @import "./radio-group/dark.css";
 @import "./radio-group-tile/light.css";
 @import "./radio-group-tile/dark.css";
+@import "./segmented-controller/light.css";
+@import "./segmented-controller/dark.css";
 @import "./select/light.css";
 @import "./select/dark.css";
 @import "./switch/light.css";

package/build/css/themes/list-item/dark.css

@@ -0,0 +1,5 @@
+
+:root, 
+:host {
+--list-item-dark-color-text-primary-default: #ffffff;
+}

package/build/css/themes/list-item/light.css

@@ -0,0 +1,5 @@
+
+:root, 
+:host {
+--list-item-light-color-text-primary-default: #121212;
+}

package/build/css/themes/segmented-controller/dark.css

@@ -0,0 +1,15 @@
+
+:root, 
+:host {
+--segmented-controller-dark-elements-list-color-background-primary-default: #191b22;
+--segmented-controller-dark-elements-list-color-border-primary-default: #343944;
+--segmented-controller-dark-elements-trigger-color-background-primary-default: #121212;
+--segmented-controller-dark-elements-trigger-color-background-primary-active: #03122f;
+--segmented-controller-dark-elements-trigger-color-border-primary-default: transparent;
+--segmented-controller-dark-elements-trigger-color-border-primary-active: #052b74;
+--segmented-controller-dark-elements-trigger-color-text-primary-default: #ffffff;
+--segmented-controller-dark-elements-trigger-color-text-primary-active: #66a8fd;
+--segmented-controller-dark-elements-trigger-color-text-primary-hover: #abcffd;
+--segmented-controller-dark-elements-content-color-background-primary-default: #ffffff;
+--segmented-controller-dark-elements-content-color-border-primary-default: #d5d7db;
+}

package/build/css/themes/segmented-controller/light.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kofile/gds-foundations",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "description": "",
   "main": "build/css/index.css",
   "exports": {
@@ -60,6 +60,10 @@
       "import": "./build/css/components/button.module.css",
       "require": "./build/css/components/button.module.css"
     },
+    "./components/card.module.css": {
+      "import": "./build/css/components/card.module.css",
+      "require": "./build/css/components/card.module.css"
+    },
     "./components/checkbox.module.css": {
       "import": "./build/css/components/checkbox.module.css",
       "require": "./build/css/components/checkbox.module.css"
@@ -84,10 +88,30 @@
       "import": "./build/css/components/link.module.css",
       "require": "./build/css/components/link.module.css"
     },
+    "./components/list-callout.module.css": {
+      "import": "./build/css/components/list-callout.module.css",
+      "require": "./build/css/components/list-callout.module.css"
+    },
+    "./components/list-callout-group.module.css": {
+      "import": "./build/css/components/list-callout-group.module.css",
+      "require": "./build/css/components/list-callout-group.module.css"
+    },
+    "./components/list-group.module.css": {
+      "import": "./build/css/components/list-group.module.css",
+      "require": "./build/css/components/list-group.module.css"
+    },
+    "./components/list-item.module.css": {
+      "import": "./build/css/components/list-item.module.css",
+      "require": "./build/css/components/list-item.module.css"
+    },
     "./components/radio-group.module.css": {
       "import": "./build/css/components/radio-group.module.css",
       "require": "./build/css/components/radio-group.module.css"
     },
+    "./components/segmented-controller.module.css": {
+      "import": "./build/css/components/segmented-controller.module.css",
+      "require": "./build/css/components/segmented-controller.module.css"
+    },
     "./components/select.module.css": {
       "import": "./build/css/components/select.module.css",
       "require": "./build/css/components/select.module.css"