@kofile/gds-foundations 1.2.2 → 1.4.1

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

@@ -1,9 +1,3 @@
-/* button,
-fieldset,
-input {
-  all: unset;
-} */
-
 .root {
   display: flex;
   flex-direction: column;
@@ -13,151 +7,97 @@ input {
   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
-  );
+  border: var(--border-width-sm) solid var(--color-neutral-500);
+  border-radius: var(--border-radius-xs);
   width: fit-content;
+  max-height: var(--primitive-32);
 }
+
 .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
-  );
+  background-color: var(--color-neutral-lightest);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-families-default);
+  color: var(--color-neutral-darkest);
+}
+
+.trigger[data-size="lg"] {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-semibold);
   letter-spacing: var(--letter-spacing-sm);
   line-height: var(--line-heights-sm);
-  color: var(--segmented-controller-trigger-color);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+  max-height: var(--primitive-32);
+}
+
+.trigger[data-size="md"] {
+  font-size: var(--font-size-2xs);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
+  padding-block: var(--spacing-3xs);
+  padding-inline: var(--spacing-xs);
 }
+
 .trigger:hover {
-  color: var(
-    --segmented-controller-light-elements-trigger-color-text-primary-hover
-  );
+  color: var(--color-neutral-darkest);
+  background-color: var(--color-neutral-200);
 }
 .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
-  );
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
 }
 .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
-  );
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
 }
 
 .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: 1px solid var(--color-primary-300);
-  border-radius: 6px;
-
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-600);
+  border: 1px solid var(--color-primary-600);
+  border-radius: var(--border-radius-xs);
   margin: -1px;
 }
-.trigger[data-size="md"] {
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--letter-spacing-2xs);
-  line-height: var(--line-heights-2xs);
-  padding-block: var(
-    --segmented-controller-elements-trigger-size-md-padding-block
-  );
-  padding-inline: var(
-    --segmented-controller-elements-trigger-size-md-padding-inline
-  );
-}
+
 .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
-  );
+  border: var(--border-width-sm) solid var(--color-neutral-800);
+  background-color: var(--color-neutral-1000);
 }
 
 .trigger[data-mode="dark"] {
-  border-color: var(
-    --segmented-controller-dark-elements-trigger-color-border-primary-default
-  );
+  border-color: transparent;
 
-  background-color: var(
-    --segmented-controller-dark-elements-trigger-color-background-primary-default
-  );
-  color: var(
-    --segmented-controller-dark-elements-trigger-color-text-primary-default
-  );
+  background-color: var(--color-neutral-darkest);
+  color: var(--color-neutral-lightest);
 }
 .trigger[data-mode="dark"]:hover {
-  color: var(
-    --segmented-controller-dark-elements-trigger-color-text-primary-hover
-  );
+  color: var(--color-primary-300);
 }
 .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
-  );
+  color: var(--color-primary-400);
+  background-color: var(--color-primary-1000);
+  border-color: var(--color-primary-600);
 }
 
 .content {
-  background-color: var(
-    --segmented-controller-light-elements-trigger-color-background-primary-default
-  );
+  background-color: var(--color-neutral-lightest);
   flex-shrink: 1;
-  border: var(--segmented-controller-elements-content-size-lg-border-width)
-    solid
-    var(
-      --segmented-controller-light-elements-content-color-border-primary-default
-    );
-  border-radius: var(
-    --segmented-controller-elements-content-size-lg-border-radius
-  );
+  border: var(--border-width-sm) solid var(--color-neutral-300);
+  border-radius: var(--border-radius-sm);
 
-  margin-top: var(
-    --segmented-controller-elements-content-size-lg-margin-block-start
-  );
-  padding: var(--segmented-controller-elements-content-size-lg-padding);
+  margin-top: var(--spacing-xs);
+  padding: var(--spacing-md);
   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
-    );
+  border: var(--border-width-sm) solid var(--color-neutral-300);
 }
 .content[data-mode="dark"] {
-  background-color: var(
-    --segmented-controller-dark-elements-content-color-background-primary-default
-  );
-  border-color: var(
-    --segmented-controller-dark-elements-content-color-border-primary-default
-  );
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-800);
 }

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

@@ -1,49 +1,50 @@
 .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);
+  --gds-switch-toggle-element-display: ; /* Toggle element display */
+
+  background-color: var(--color-neutral-lightest);
+  border-radius: var(--border-radius-xl);
+  border-width: var(--border-width-sm);
+  border-color: var(--color-neutral-800);
   border-style: solid;
   box-sizing: border-box;
+  display: var(--gds-switch-toggle-element-display, block);
   cursor: pointer;
-  height: var(--switch-size-md-height);
+  height: var(--spacing-lg);
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-  width: var(--switch-size-md-width);
+  width: 2.5rem;
 }
 .root:focus-visible {
-  outline-offset: var(--switch-outline-primary-offset);
-  outline-color: var(--switch-outline-primary-fill);
+  outline-offset: var(--spacing-3xs);
+  outline-color: var(--color-primary-700);
   outline-style: solid;
-  outline-width: var(--switch-outline-primary-width);
+  outline-width: var(--border-width-lg);
 }
 .root:not(:disabled):hover {
-  background-color: var(--switch-light-color-background-primary-hover);
+  background-color: var(--color-neutral-400);
   cursor: pointer;
 }
 .root:disabled {
-  opacity: var(--switch-opacity-disabled);
+  opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 .root[data-state="checked"] {
-  background-color: var(--switch-light-color-background-primary-active);
-  border-color: var(--switch-light-color-border-primary-active);
+  background-color: var(--color-primary-600);
+  border-color: var(--color-primary-900);
 }
 
 .root[data-size="sm"] {
-  height: var(--switch-size-sm-height);
-  width: var(--switch-size-sm-width);
+  height: var(--spacing-md);
+  width: var(--spacing-2xl);
 }
 
 .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);
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
+  background-color: var(--color-neutral-lightest);
+  border-radius: var(--border-radius-xl);
+  border-width: var(--border-width-sm);
+  border-color: var(--color-neutral-800);
   border-style: solid;
   transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
   transform: translateX(-1px) translateY(-1px);
@@ -51,35 +52,35 @@
 }
 .thumb[data-state="checked"] {
   transform: translateX(19px) translateY(-1px);
-  border-color: var(--switch-light-elements-thumb-color-border-primary-active);
+  border-color: var(--color-primary-900);
 }
 
 .thumb[data-size="sm"] {
-  width: var(--switch-elements-thumb-size-sm-width);
-  height: var(--switch-elements-thumb-size-sm-height);
+  width: var(--spacing-md);
+  height: var(--spacing-md);
 }
 .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);
+  background-color: var(--color-neutral-darkest);
+  border-color: var(--color-neutral-700);
 }
 .root[data-mode="dark"]:hover {
-  background-color: var(--switch-color-background-primary-hover);
+  background-color: var(--color-neutral-800);
 }
 .root[data-mode="dark"][data-state="checked"] {
-  background-color: var(--switch-color-background-primary-active);
-  border-color: var(--switch-color-border-primary-active);
+  background-color: var(--color-primary-500);
+  border-color: var(--color-primary-500);
 }
 .root[data-mode="dark"]:focus-visible {
-  outline-color: var(--switch-color-outline-primary-fill);
+  outline-color: var(--color-primary-500);
 }
 
 .thumb[data-mode="dark"][data-state="checked"] {
-  border-color: var(--switch-dark-elements-thumb-border-primary-active);
+  border-color: var(--color-neutral-lightest);
 }
 .thumb[data-mode="dark"] {
-  border-color: var(--switch-dark-elements-thumb-border-primary-default);
+  border-color: var(--color-neutral-700);
 }