@ivds/core 0.1.1 → 1.0.0

package/lib/components/checkbox/checkbox.css

@@ -1,229 +1,95 @@
-@charset "UTF-8";
-/* Checkbox component styles*/
-/* Provides styling for the IVDS checkbox component with all variants, sizes, and states*/
-/* Checkbox Base*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
 .ivds-checkbox {
   position: relative;
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  min-height: 48px;
   cursor: pointer;
   -webkit-user-select: none;
-     -moz-user-select: none;
+             -moz-user-select: none;
           user-select: none;
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
 }
 .ivds-checkbox:hover .ivds-checkbox__box {
-  border-color: var(--color-brand-primary-400, #fb923c);
-}
-.ivds-checkbox {
-  /* Checkbox box*/
-}
-.ivds-checkbox__box {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  min-width: 18px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: var(--borderRadius-sm, 0.125rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-}
-.ivds-checkbox__box::after {
-  content: "";
-  position: absolute;
-  width: 10px;
-  height: 6px;
-  border: 2px solid transparent;
-  border-top: none;
-  border-right: none;
-  transform: rotate(-45deg) scale(0);
-  transition: transform 0.15s ease-in-out;
-}
-.ivds-checkbox {
-  /* Hidden input*/
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
 .ivds-checkbox__input {
   position: absolute;
   opacity: 0;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  /* Checked state*/
+  width: 0;
+  height: 0;
 }
 .ivds-checkbox__input:checked + .ivds-checkbox__box {
-  background-color: var(--color-brand-primary-500, #f97316);
-  border-color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-600, #1058b8);
 }
 .ivds-checkbox__input:checked + .ivds-checkbox__box::after {
-  border-color: var(--color-semantic-neutral-50, #f8fafc);
   transform: rotate(-45deg) scale(1);
 }
-.ivds-checkbox__input {
-  /* Focus state*/
-}
-.ivds-checkbox__input:focus + .ivds-checkbox__box {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-}
-.ivds-checkbox__input {
-  /* Indeterminate state*/
+.ivds-checkbox__input:focus-visible + .ivds-checkbox__box {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-.ivds-checkbox__input:indeterminate + .ivds-checkbox__box {
-  background-color: var(--color-brand-primary-500, #f97316);
-  border-color: var(--color-brand-primary-500, #f97316);
+.ivds-checkbox__input[aria-checked=mixed] + .ivds-checkbox__box {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-600, #1058b8);
 }
-.ivds-checkbox__input:indeterminate + .ivds-checkbox__box::after {
-  content: "";
-  width: 8px;
+.ivds-checkbox__input[aria-checked=mixed] + .ivds-checkbox__box::after {
+  width: 10px;
   height: 2px;
   border: none;
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transform: none;
-  border-radius: 1px;
-}
-.ivds-checkbox {
-  /* Checkbox label*/
+  background-color: #fff;
+  transform: scaleX(1);
 }
-.ivds-checkbox__label {
-  margin-left: var(--spacing-3, 0.75rem);
-  font-size: var(--fontSize-base, 1rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
-}
-.ivds-checkbox {
-  /* Checkbox description*/
-}
-.ivds-checkbox__description {
-  margin-top: var(--spacing-1, 0.25rem);
-  margin-left: calc(18px + var(--spacing-3, 0.75rem));
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-.ivds-checkbox {
-  /* Disabled state*/
-}
-.ivds-checkbox--disabled {
+.ivds-checkbox__input:disabled + .ivds-checkbox__box, .ivds-checkbox__input:disabled ~ .ivds-checkbox__label {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.ivds-checkbox--disabled .ivds-checkbox__box {
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border-color: var(--color-semantic-neutral-200, #e2e8f0);
-  cursor: not-allowed;
-}
-.ivds-checkbox--disabled .ivds-checkbox__label {
-  color: var(--color-semantic-neutral-500, #64748b);
-  cursor: not-allowed;
-}
-.ivds-checkbox {
-  /* Error state*/
-}
-.ivds-checkbox--error .ivds-checkbox__box {
-  border-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-checkbox--error:hover .ivds-checkbox__box {
-  border-color: var(--color-semantic-error-600, #dc2626);
-}
-.ivds-checkbox--error .ivds-checkbox__input:checked + .ivds-checkbox__box {
-  background-color: var(--color-semantic-error-500, #ef4444);
-  border-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-checkbox--error .ivds-checkbox__input:focus + .ivds-checkbox__box {
-  outline-color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-checkbox {
-  /* Success state*/
-}
-.ivds-checkbox--success .ivds-checkbox__box {
-  border-color: var(--color-semantic-success-500, #10b981);
-}
-.ivds-checkbox--success:hover .ivds-checkbox__box {
-  border-color: var(--color-semantic-success-600, #059669);
-}
-.ivds-checkbox--success .ivds-checkbox__input:checked + .ivds-checkbox__box {
-  background-color: var(--color-semantic-success-500, #10b981);
-  border-color: var(--color-semantic-success-500, #10b981);
-}
-.ivds-checkbox--success .ivds-checkbox__input:focus + .ivds-checkbox__box {
-  outline-color: var(--color-semantic-success-500, #10b981);
-}
-/* Checkbox Sizes*/
-.ivds-checkbox--small .ivds-checkbox__box {
+.ivds-checkbox__box {
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: var(--borderRadius-sm, 0.125rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  border-radius: var(--ivds-radius-xs, 0);
+  background-color: var(--ivds-surface-base, #fff);
+  transition: border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-checkbox--small .ivds-checkbox__box::after {
+.ivds-checkbox__box::after {
   content: "";
-  position: absolute;
-  width: 10px;
-  height: 6px;
-  border: 2px solid transparent;
+  width: 9px;
+  height: 5px;
+  border: 2px solid #fff;
   border-top: none;
   border-right: none;
   transform: rotate(-45deg) scale(0);
-  transition: transform 0.15s ease-in-out;
-}
-.ivds-checkbox--small .ivds-checkbox__box::after {
-  width: 7px;
-  height: 4px;
+  transform-origin: center;
+  transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-checkbox--small .ivds-checkbox__label {
-  margin-left: var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
+.ivds-checkbox__label {
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--ivds-text-secondary, #36414f);
 }
-.ivds-checkbox--large .ivds-checkbox__box {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  min-width: 22px;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: var(--borderRadius-sm, 0.125rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
+.ivds-checkbox--disabled {
+  opacity: 0.62;
+  cursor: not-allowed;
 }
-.ivds-checkbox--large .ivds-checkbox__box::after {
-  content: "";
-  position: absolute;
-  width: 10px;
-  height: 6px;
-  border: 2px solid transparent;
-  border-top: none;
-  border-right: none;
-  transform: rotate(-45deg) scale(0);
-  transition: transform 0.15s ease-in-out;
+.ivds-checkbox--disabled .ivds-checkbox__box {
+  border-color: var(--ivds-border-subtle, #e2e7ec);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
 }
-.ivds-checkbox--large .ivds-checkbox__box::after {
-  width: 12px;
-  height: 8px;
+.ivds-checkbox--error .ivds-checkbox__box {
+  border-color: var(--color-semantic-error-500, #d73a50);
 }
-.ivds-checkbox--large .ivds-checkbox__label {
-  margin-left: var(--spacing-4, 1rem);
-  font-size: var(--fontSize-lg, 1.125rem);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
+.ivds-checkbox--error .ivds-checkbox__label {
+  color: var(--color-semantic-error-700, #922036);
 }
-/* Checkbox Group*/
 .ivds-checkbox-group {
   display: flex;
   flex-direction: column;
@@ -233,73 +99,4 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--spacing-6, 1.5rem);
-}
-.ivds-checkbox-group--horizontal {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3, 0.75rem);
-}
-.ivds-checkbox-group--horizontal--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--spacing-6, 1.5rem);
-}
-.ivds-checkbox-group--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--spacing-6, 1.5rem);
-}
-.ivds-checkbox-group {
-  /* Group label*/
-}
-.ivds-checkbox-group__label {
-  display: block;
-  font-size: var(--fontSize-base, 1rem);
-  font-weight: var(--fontWeight-medium, 500);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  margin-bottom: var(--spacing-3, 0.75rem);
-}
-.ivds-checkbox-group__label--required::after {
-  content: " *";
-  color: var(--color-semantic-error-500, #ef4444);
-}
-.ivds-checkbox-group {
-  /* Group description*/
-}
-.ivds-checkbox-group__description {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  margin-bottom: var(--spacing-3, 0.75rem);
-}
-.ivds-checkbox-group {
-  /* Group error message*/
-}
-.ivds-checkbox-group__error {
-  margin-top: var(--spacing-2, 0.5rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-error-600, #dc2626);
-}
-.ivds-checkbox-group__error::before {
-  content: "⚠ ";
-  margin-right: var(--spacing-1, 0.25rem);
-}
-/* Checkbox Card variant (for more prominent selections)*/
-.ivds-checkbox--card {
-  padding: var(--spacing-4, 1rem);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-}
-.ivds-checkbox--card:hover {
-  border-color: var(--color-brand-primary-300, #fdba74);
-  background-color: var(--color-brand-primary-50, #fff7ed);
-}
-.ivds-checkbox__input:checked ~ .ivds-checkbox--card {
-  border-color: var(--color-brand-primary-500, #f97316);
-  background-color: var(--color-brand-primary-50, #fff7ed);
-}
-.ivds-checkbox__input:focus ~ .ivds-checkbox--card {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
 }

package/lib/components/checkbox/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.scss%23sass","../../../src/components/checkbox/_checkbox-mixin.scss","../../../src/components/checkbox/checkbox.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;ECAE,kBAAA;ECFF,oBAAA;EDIE,mBAAA;ECFF,8BAAA;EDIE,gBAAA;EACA,eAAA;EACA,yBAAA;aAAA,sBAAA;UAAA,iBAAA;EACA,6DAAA;ACFF;ADIE;EACE,oDAAA;ACFJ;AFJE;ECWA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;ACJF;AFPI;EC2CF,oDAAA;EACA,wDAAA;ACjCF;ADmCE;EACE,kCAAA;ACjCJ;AFVI;EC6DF,qHAAA;EACA,kDAAA;EACA,gBAAA;AChDF;AFXI;EC4CF,oDAAA;EACA,wDAAA;AC9BF;ADgCE;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,oBAAA;AC9BJ;AFlBI;EAEE,mBAAA;EACA,YAAA;AEmBN;AFfE;ECJA,kBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,oDAAA;ECsBF,uCAAA;EDpBE,gDAAA;ECsBF,6ODpBI;ACqBJ;ADjBE;EACE,WAAA;EACA,UAAA;EACA,WAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kCAAA;EACA,wBAAA;ECmBJ,kFAAA;AACA;AFlCE;EACE,qCAAA;EACA,0CAAA;EACA,0CAAA;AEoCJ;AFhCE;ECyCA,aAAA;EACA,mBAAA;ACNF;ADQE;EACE,gDAAA;EACA,oDAAA;ACNJ;AFnCI;EACE,sDAAA;AEqCN;AFlCI;EACE,+CAAA;AEoCN;AF9BA;EACE,aAAA;EACA,sBAAA;EACA,8BAAA;AEiCF;AF/BE;EACE,mBAAA;EACA,eAAA;EACA,6BAAA;AEiCJ","file":"checkbox.css","sourcesContent":["// Checkbox component styles\r\n// Core styling for modern checkboxes, groups, and indeterminate states\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_checkbox-mixin' as checkbox;\r\n\r\n.ivds-checkbox {\r\n  @include checkbox.checkbox-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include checkbox.checkbox-input;\r\n    \r\n    &:checked + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-focus;\r\n    }\r\n    \r\n    &[aria-checked=\"mixed\"] + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-indeterminate;\r\n    }\r\n    \r\n    &:disabled + .ivds-checkbox__box,\r\n    &:disabled ~ .ivds-checkbox__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__box {\r\n    @include checkbox.checkbox-box(20px);\r\n  }\r\n  \r\n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \r\n  // States\r\n  &--disabled {\r\n    @include checkbox.checkbox-disabled;\r\n  }\r\n  \r\n  &--error {\n    .ivds-checkbox__box {\n      border-color: var(--color-semantic-error-500, #d73a50);\n    }\n\n    .ivds-checkbox__label {\n      color: var(--color-semantic-error-700, #922036);\n    }\n  }\n}\n\r\n// Checkbox Group\r\n.ivds-checkbox-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\r\n","// Checkbox component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin checkbox-base {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  min-height: 48px;\n  cursor: pointer;\n  user-select: none;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n\n  &:hover .ivds-checkbox__box {\n    border-color: var(--color-brand-accent-600, #1058b8);\n  }\n}\n\n@mixin checkbox-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin checkbox-box($size: 20px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: $size;\n  height: $size;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--ivds-radius-xs, 0);\n  background-color: var(--ivds-surface-base, #fff);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    width: 9px;\n    height: 5px;\n    border: 2px solid #fff;\n    border-top: none;\n    border-right: none;\n    transform: rotate(-45deg) scale(0);\n    transform-origin: center;\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin checkbox-checked {\n  border-color: var(--color-brand-accent-600, #1058b8);\n  background-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    transform: rotate(-45deg) scale(1);\n  }\n}\n\n@mixin checkbox-indeterminate {\n  border-color: var(--color-brand-accent-600, #1058b8);\n  background-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    width: 10px;\n    height: 2px;\n    border: none;\n    background-color: #fff;\n    transform: scaleX(1);\n  }\n}\n\n@mixin checkbox-focus {\n  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));\n  outline-offset: var(--ivds-focus-ring-offset, 2px);\n  box-shadow: none;\n}\n\n@mixin checkbox-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-checkbox__box {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n","// Checkbox component styles\r\n// Core styling for modern checkboxes, groups, and indeterminate states\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_checkbox-mixin' as checkbox;\r\n\r\n.ivds-checkbox {\r\n  @include checkbox.checkbox-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include checkbox.checkbox-input;\r\n    \r\n    &:checked + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-focus;\r\n    }\r\n    \r\n    &[aria-checked=\"mixed\"] + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-indeterminate;\r\n    }\r\n    \r\n    &:disabled + .ivds-checkbox__box,\r\n    &:disabled ~ .ivds-checkbox__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__box {\r\n    @include checkbox.checkbox-box(20px);\r\n  }\r\n  \r\n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \r\n  // States\r\n  &--disabled {\r\n    @include checkbox.checkbox-disabled;\r\n  }\r\n  \r\n  &--error {\n    .ivds-checkbox__box {\n      border-color: var(--color-semantic-error-500, #d73a50);\n    }\n\n    .ivds-checkbox__label {\n      color: var(--color-semantic-error-700, #922036);\n    }\n  }\n}\n\r\n// Checkbox Group\r\n.ivds-checkbox-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\r\n"]}

package/lib/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-@charset "UTF-8";.ivds-checkbox{align-items:flex-start;cursor:pointer;display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-checkbox:hover .ivds-checkbox__box{border-color:var(--color-brand-primary-400,#fb923c)}.ivds-checkbox__box{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:var(--borderRadius-sm,.125rem);display:flex;height:18px;justify-content:center;min-width:18px;position:relative;transition:all .15s ease-in-out;width:18px}.ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px}.ivds-checkbox__input{border:0;height:1px;margin:0;opacity:0;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);overflow:hidden}.ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-brand-primary-500,#f97316);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:checked+.ivds-checkbox__box:after{border-color:var(--color-semantic-neutral-50,#f8fafc);transform:rotate(-45deg) scale(1)}.ivds-checkbox__input:focus+.ivds-checkbox__box{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-checkbox__input:indeterminate+.ivds-checkbox__box{background-color:var(--color-brand-primary-500,#f97316);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:indeterminate+.ivds-checkbox__box:after{background-color:var(--color-semantic-neutral-50,#f8fafc);border:none;border-radius:1px;content:"";height:2px;transform:none;width:8px}.ivds-checkbox__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-base,1rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-3,.75rem)}.ivds-checkbox__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin-left:calc(18px + var(--spacing-3, .75rem));margin-top:var(--spacing-1,.25rem)}.ivds-checkbox--disabled{cursor:not-allowed;opacity:.6}.ivds-checkbox--disabled .ivds-checkbox__box{background-color:var(--color-semantic-neutral-100,#f1f5f9);border-color:var(--color-semantic-neutral-200,#e2e8f0);cursor:not-allowed}.ivds-checkbox--disabled .ivds-checkbox__label{color:var(--color-semantic-neutral-500,#64748b);cursor:not-allowed}.ivds-checkbox--error .ivds-checkbox__box{border-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--error:hover .ivds-checkbox__box{border-color:var(--color-semantic-error-600,#dc2626)}.ivds-checkbox--error .ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-semantic-error-500,#ef4444);border-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--error .ivds-checkbox__input:focus+.ivds-checkbox__box{outline-color:var(--color-semantic-error-500,#ef4444)}.ivds-checkbox--success .ivds-checkbox__box{border-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--success:hover .ivds-checkbox__box{border-color:var(--color-semantic-success-600,#059669)}.ivds-checkbox--success .ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-semantic-success-500,#10b981);border-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--success .ivds-checkbox__input:focus+.ivds-checkbox__box{outline-color:var(--color-semantic-success-500,#10b981)}.ivds-checkbox--small .ivds-checkbox__box{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:var(--borderRadius-sm,.125rem);display:flex;height:14px;justify-content:center;min-width:14px;position:relative;transition:all .15s ease-in-out;width:14px}.ivds-checkbox--small .ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;height:4px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px;width:7px}.ivds-checkbox--small .ivds-checkbox__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-2,.5rem)}.ivds-checkbox--large .ivds-checkbox__box{align-items:center;background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:var(--borderRadius-sm,.125rem);display:flex;height:22px;justify-content:center;min-width:22px;position:relative;transition:all .15s ease-in-out;width:22px}.ivds-checkbox--large .ivds-checkbox__box:after{border:2px solid transparent;border-right:none;border-top:none;content:"";height:6px;height:8px;position:absolute;transform:rotate(-45deg) scale(0);transition:transform .15s ease-in-out;width:10px;width:12px}.ivds-checkbox--large .ivds-checkbox__label{color:var(--color-semantic-neutral-900,#0f172a);font-size:var(--fontSize-lg,1.125rem);line-height:var(--lineHeight-normal,1.5);margin-left:var(--spacing-4,1rem)}.ivds-checkbox-group,.ivds-checkbox-group--horizontal{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-checkbox-group--horizontal,.ivds-checkbox-group--horizontal--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}.ivds-checkbox-group__label{color:var(--color-semantic-neutral-900,#0f172a);display:block;font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500);margin-bottom:var(--spacing-3,.75rem)}.ivds-checkbox-group__label--required:after{color:var(--color-semantic-error-500,#ef4444);content:" *"}.ivds-checkbox-group__description{color:var(--color-semantic-neutral-600,#4b5563);font-size:var(--fontSize-sm,.875rem);margin-bottom:var(--spacing-3,.75rem)}.ivds-checkbox-group__error{color:var(--color-semantic-error-600,#dc2626);font-size:var(--fontSize-sm,.875rem);margin-top:var(--spacing-2,.5rem)}.ivds-checkbox-group__error:before{content:"⚠ ";margin-right:var(--spacing-1,.25rem)}.ivds-checkbox--card{background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-200,#e2e8f0);border-radius:var(--borderRadius-md,.375rem);padding:var(--spacing-4,1rem);transition:all .15s ease-in-out}.ivds-checkbox--card:hover{background-color:var(--color-brand-primary-50,#fff7ed);border-color:var(--color-brand-primary-300,#fdba74)}.ivds-checkbox__input:checked~.ivds-checkbox--card{background-color:var(--color-brand-primary-50,#fff7ed);border-color:var(--color-brand-primary-500,#f97316)}.ivds-checkbox__input:focus~.ivds-checkbox--card{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}
+.ivds-checkbox{align-items:center;cursor:pointer;display:inline-flex;font-family:var(--fontFamily-primary,system-ui,sans-serif);gap:var(--spacing-3,.75rem);min-height:48px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ivds-checkbox:hover .ivds-checkbox__box{border-color:var(--color-brand-accent-600,#1058b8)}.ivds-checkbox__input{height:0;opacity:0;position:absolute;width:0}.ivds-checkbox__input:checked+.ivds-checkbox__box{background-color:var(--color-brand-accent-600,#1058b8);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-checkbox__input:checked+.ivds-checkbox__box:after{transform:rotate(-45deg) scale(1)}.ivds-checkbox__input:focus-visible+.ivds-checkbox__box{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-checkbox__input[aria-checked=mixed]+.ivds-checkbox__box{background-color:var(--color-brand-accent-600,#1058b8);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-checkbox__input[aria-checked=mixed]+.ivds-checkbox__box:after{background-color:#fff;border:none;height:2px;transform:scaleX(1);width:10px}.ivds-checkbox__input:disabled+.ivds-checkbox__box,.ivds-checkbox__input:disabled~.ivds-checkbox__label{cursor:not-allowed;opacity:.6}.ivds-checkbox__box{align-items:center;background-color:var(--ivds-surface-base,#fff);border:2px solid var(--ivds-border-strong,#a1adba);border-radius:var(--ivds-radius-xs,0);display:inline-flex;height:20px;justify-content:center;position:relative;transition:border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),box-shadow var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:20px}.ivds-checkbox__box:after{border:2px solid #fff;border-right:none;border-top:none;content:"";height:5px;transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:9px}.ivds-checkbox__label{color:var(--ivds-text-secondary,#36414f);font-size:var(--fontSize-base,1rem);font-weight:var(--fontWeight-medium,500)}.ivds-checkbox--disabled{cursor:not-allowed;opacity:.62}.ivds-checkbox--disabled .ivds-checkbox__box{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:var(--ivds-border-subtle,#e2e7ec)}.ivds-checkbox--error .ivds-checkbox__box{border-color:var(--color-semantic-error-500,#d73a50)}.ivds-checkbox--error .ivds-checkbox__label{color:var(--color-semantic-error-700,#922036)}.ivds-checkbox-group{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-checkbox-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-6,1.5rem)}

package/lib/components/checkbox/checkbox.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.scss%23sass","../../../src/components/checkbox/_checkbox-mixin.scss","../../../src/components/checkbox/checkbox.scss"],"names":[],"mappings":"AAMA,eCEE,kBAAA,CAGA,cAAA,CCPF,mBAAA,CDSE,0DAAA,CCPF,2BAAA,CDIE,eAAA,CAJA,iBAAA,CAMA,wBAAA,CAAA,qBAAA,CAAA,gBCDF,CDIE,yCACE,kDCFJ,CFJE,sBCcA,QAAA,CAFA,SAAA,CADA,iBAAA,CAEA,OCHF,CFPI,kDC4CF,sDAAA,CADA,kDChCF,CDmCE,wDACE,iCCjCJ,CFVI,wDC+DF,eAAA,CAFA,iHAAA,CACA,gDC/CF,CFXI,8DC6CF,sDAAA,CADA,kDC7BF,CDgCE,oEAIE,qBAAA,CADA,WAAA,CADA,UAAA,CAGA,mBAAA,CAJA,UC1BJ,CFlBI,wGAEE,kBAAA,CACA,UEmBN,CFfE,oBCFA,kBAAA,CAMA,8CAAA,CAFA,kDAAA,CCsBF,qCAAA,CD3BE,mBAAA,CAIA,WAAA,CAFA,sBAAA,CAHA,iBAAA,CC8BF,iODpBI,CANF,UC2BF,CDjBE,0BAME,qBAAA,CAAA,iBAAA,CAAA,eAAA,CALA,UAAA,CAEA,UAAA,CAIA,iCAAA,CACA,uBAAA,CCmBJ,8EAAA,CDzBI,SC0BJ,CFlCE,sBAGE,wCAAA,CAFA,mCAAA,CACA,wCEqCJ,CFhCE,yBC0CA,kBAAA,CADA,WCLF,CDQE,6CAEE,kDAAA,CADA,8CCLJ,CFnCI,0CACE,oDEqCN,CFlCI,4CACE,6CEoCN,CF9BA,qBACE,YAAA,CACA,qBAAA,CACA,2BEiCF,CF/BE,iCACE,kBAAA,CACA,cAAA,CACA,2BEiCJ","file":"checkbox.min.css","sourcesContent":["// Checkbox component styles\r\n// Core styling for modern checkboxes, groups, and indeterminate states\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_checkbox-mixin' as checkbox;\r\n\r\n.ivds-checkbox {\r\n  @include checkbox.checkbox-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include checkbox.checkbox-input;\r\n    \r\n    &:checked + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-focus;\r\n    }\r\n    \r\n    &[aria-checked=\"mixed\"] + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-indeterminate;\r\n    }\r\n    \r\n    &:disabled + .ivds-checkbox__box,\r\n    &:disabled ~ .ivds-checkbox__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__box {\r\n    @include checkbox.checkbox-box(20px);\r\n  }\r\n  \r\n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \r\n  // States\r\n  &--disabled {\r\n    @include checkbox.checkbox-disabled;\r\n  }\r\n  \r\n  &--error {\n    .ivds-checkbox__box {\n      border-color: var(--color-semantic-error-500, #d73a50);\n    }\n\n    .ivds-checkbox__label {\n      color: var(--color-semantic-error-700, #922036);\n    }\n  }\n}\n\r\n// Checkbox Group\r\n.ivds-checkbox-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\r\n","// Checkbox component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin checkbox-base {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3, 0.75rem);\n  min-height: 48px;\n  cursor: pointer;\n  user-select: none;\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n\n  &:hover .ivds-checkbox__box {\n    border-color: var(--color-brand-accent-600, #1058b8);\n  }\n}\n\n@mixin checkbox-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n@mixin checkbox-box($size: 20px) {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: $size;\n  height: $size;\n  border: 2px solid var(--ivds-border-strong, #a1adba);\n  border-radius: var(--ivds-radius-xs, 0);\n  background-color: var(--ivds-surface-base, #fff);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    box-shadow var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::after {\n    content: '';\n    width: 9px;\n    height: 5px;\n    border: 2px solid #fff;\n    border-top: none;\n    border-right: none;\n    transform: rotate(-45deg) scale(0);\n    transform-origin: center;\n    transition: transform var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n  }\n}\n\n@mixin checkbox-checked {\n  border-color: var(--color-brand-accent-600, #1058b8);\n  background-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    transform: rotate(-45deg) scale(1);\n  }\n}\n\n@mixin checkbox-indeterminate {\n  border-color: var(--color-brand-accent-600, #1058b8);\n  background-color: var(--color-brand-accent-600, #1058b8);\n\n  &::after {\n    width: 10px;\n    height: 2px;\n    border: none;\n    background-color: #fff;\n    transform: scaleX(1);\n  }\n}\n\n@mixin checkbox-focus {\n  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));\n  outline-offset: var(--ivds-focus-ring-offset, 2px);\n  box-shadow: none;\n}\n\n@mixin checkbox-disabled {\n  opacity: 0.62;\n  cursor: not-allowed;\n\n  .ivds-checkbox__box {\n    border-color: var(--ivds-border-subtle, #e2e7ec);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n  }\n}\n","// Checkbox component styles\r\n// Core styling for modern checkboxes, groups, and indeterminate states\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_checkbox-mixin' as checkbox;\r\n\r\n.ivds-checkbox {\r\n  @include checkbox.checkbox-base;\r\n  \r\n  // Elements\r\n  &__input {\r\n    @include checkbox.checkbox-input;\r\n    \r\n    &:checked + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-checked;\r\n    }\r\n    \r\n    &:focus-visible + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-focus;\r\n    }\r\n    \r\n    &[aria-checked=\"mixed\"] + .ivds-checkbox__box {\r\n      @include checkbox.checkbox-indeterminate;\r\n    }\r\n    \r\n    &:disabled + .ivds-checkbox__box,\r\n    &:disabled ~ .ivds-checkbox__label {\r\n      cursor: not-allowed;\r\n      opacity: 0.6;\r\n    }\r\n  }\r\n  \r\n  &__box {\r\n    @include checkbox.checkbox-box(20px);\r\n  }\r\n  \r\n  &__label {\n    font-size: var(--fontSize-base, 1rem);\n    font-weight: var(--fontWeight-medium, 500);\n    color: var(--ivds-text-secondary, #36414f);\n  }\n  \r\n  // States\r\n  &--disabled {\r\n    @include checkbox.checkbox-disabled;\r\n  }\r\n  \r\n  &--error {\n    .ivds-checkbox__box {\n      border-color: var(--color-semantic-error-500, #d73a50);\n    }\n\n    .ivds-checkbox__label {\n      color: var(--color-semantic-error-700, #922036);\n    }\n  }\n}\n\r\n// Checkbox Group\r\n.ivds-checkbox-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3, 0.75rem);\r\n  \r\n  &--horizontal {\r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    gap: var(--spacing-6, 1.5rem);\r\n  }\r\n}\r\n"]}

package/lib/components/footer/_footer-mixin.scss

@@ -0,0 +1,202 @@
+// Footer component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin footer-base {
+  // Per-component CSS variable API
+  --background-color: var(--ivds-surface-strong, #121a24);
+  --color: rgba(246, 248, 251, 0.88);
+  --border-color: rgba(255, 255, 255, 0.12);
+
+  position: relative;
+  padding: var(--spacing-12, 3rem) var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  border-top: 1px solid var(--border-color);
+
+  @media (max-width: var(--breakpoint-lg, 1024px)) {
+    padding: var(--spacing-10, 2.5rem) var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
+  }
+}
+
+@mixin footer-grid($columns: 4) {
+  display: grid;
+  grid-template-columns: repeat($columns, minmax(0, 1fr));
+  gap: var(--spacing-10, 2.5rem);
+  margin-bottom: var(--spacing-10, 2.5rem);
+
+  @media (max-width: var(--breakpoint-lg, 1024px)) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-8, 2rem);
+  }
+
+  @media (max-width: var(--breakpoint-sm, 640px)) {
+    grid-template-columns: 1fr;
+  }
+}
+
+@mixin footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+
+  &-logo {
+    height: 38px;
+    width: auto;
+    object-fit: contain;
+  }
+
+  &-description {
+    max-width: 340px;
+    color: rgba(246, 248, 251, 0.78);
+    font-size: var(--fontSize-sm, 0.875rem);
+    line-height: var(--lineHeight-relaxed, 1.625);
+  }
+}
+
+@mixin footer-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 1rem);
+
+  &-title {
+    margin: 0;
+    color: rgba(246, 248, 251, 0.96);
+    font-size: var(--fontSize-xs, 0.75rem);
+    font-weight: var(--fontWeight-semibold, 600);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  &-list {
+    display: grid;
+    gap: var(--spacing-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &-link {
+    color: rgba(246, 248, 251, 0.78);
+    font-size: var(--fontSize-sm, 0.875rem);
+    font-weight: var(--fontWeight-normal, 400);
+    text-decoration: none;
+    transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+    &:hover {
+      color: #fff;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 0.12em;
+    }
+
+    @include focus-ring;
+  }
+}
+
+@mixin footer-social {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 0.5rem);
+
+  &-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.32);
+    border-radius: var(--ivds-radius-s, 0.125rem);
+    color: rgba(246, 248, 251, 0.92);
+    background-color: transparent;
+    transition:
+      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.09);
+      border-color: rgba(255, 255, 255, 0.45);
+      color: #fff;
+    }
+
+    @include focus-ring;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
+@mixin footer-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4, 1rem);
+  padding-top: var(--spacing-6, 1.5rem);
+  border-top: 1px solid rgba(255, 255, 255, 0.16);
+  color: rgba(246, 248, 251, 0.74);
+  font-size: var(--fontSize-xs, 0.75rem);
+
+  @media (max-width: var(--breakpoint-md, 768px)) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4, 1rem);
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        color: #fff;
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 0.12em;
+      }
+
+      @include focus-ring;
+    }
+  }
+}
+
+@mixin footer-light {
+  --background-color: var(--ivds-surface-base, #fff);
+  --color: var(--ivds-text-secondary, #36414f);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
+
+  .ivds-footer__section-title {
+    color: var(--ivds-text-primary, #121a24);
+  }
+
+  .ivds-footer__section-link {
+    color: var(--ivds-text-secondary, #36414f);
+
+    &:hover {
+      color: var(--color-brand-accent-700, #0b4593);
+    }
+  }
+
+  .ivds-footer__social-link {
+    border-color: var(--ivds-border-strong, #a1adba);
+    color: var(--ivds-text-secondary, #36414f);
+
+    &:hover {
+      border-color: var(--color-brand-accent-600, #1058b8);
+      background-color: var(--color-brand-accent-50, #eef4ff);
+      color: var(--color-brand-accent-700, #0b4593);
+    }
+  }
+
+  .ivds-footer__bottom {
+    border-top-color: var(--ivds-border-subtle, #e2e7ec);
+    color: var(--ivds-text-muted, #4d5968);
+  }
+}