@kofile/gds-foundations 0.0.9 → 0.0.10

package/build/css/index.css

@@ -1,4 +1,4 @@
 @import "./normalize.css";
 @import "./fonts.css";
 @import "./tokens-global.css";
-@import "./animations.css";
+/* @import "./animations.css"; */

package/build/css/tokens-global.css

@@ -1,4 +1,5 @@
-:root, :host {
+:root,
+:host {
   --primitive-0: 0rem;
   --primitive-1: 0.063rem;
   --primitive-2: 0.125rem;
@@ -43,7 +44,7 @@
   --primitive-1280: 80rem;
   --primitive-1600: 100rem;
   --primitive-1920: 120rem;
-  --primitive-gray-100: #F9F9F9;
+  --primitive-gray-100: #f9f9f9;
   --primitive-gray-200: #edeeef;
   --primitive-gray-300: #d5d7db;
   --primitive-gray-400: #b7bcc3;
@@ -63,7 +64,7 @@
   --primitive-blue-600: #0c57cd;
   --primitive-blue-700: #063b99;
   --primitive-blue-800: #052b74;
-  --primitive-blue-900: #041C4F;
+  --primitive-blue-900: #041c4f;
   --primitive-blue-1000: #03122f;
   --primitive-red-100: #fee5e5;
   --primitive-red-200: #fecbcb;
@@ -212,46 +213,46 @@
   --letter-spacing-5xl: -0.175em;
   --letter-spacing-6xl: -0.025em;
   --paragraph-spacing-0: 0;
-  --font-size-3xs-regular: 400 0.75rem/1rem 'Source Sans 3';
-  --font-size-3xs-semibold: 600 0.75rem/1rem 'Source Sans 3';
-  --font-size-3xs-bold: 700 0.75rem/1rem 'Source Sans 3';
-  --font-size-2xs-regular: 400 0.813rem/1.25rem 'Source Sans 3';
-  --font-size-2xs-semibold: 600 0.813rem/1.25rem 'Source Sans 3';
-  --font-size-2xs-bold: 700 0.813rem/1.25rem 'Source Sans 3';
-  --font-size-xs-regular: 400 0.875rem/1.25rem 'Source Sans 3';
-  --font-size-xs-semibold: 600 0.875rem/1.25rem 'Source Sans 3';
-  --font-size-xs-bold: 700 0.875rem/1.25rem 'Source Sans 3';
-  --font-size-sm-regular: 400 0.938rem/1.25rem 'Source Sans 3';
-  --font-size-sm-semibold: 600 0.938rem/1.25rem 'Source Sans 3';
-  --font-size-sm-bold: 700 0.938rem/1.25rem 'Source Sans 3';
-  --font-size-md-regular: 400 1rem/1.5rem 'Source Sans 3';
-  --font-size-md-semibold: 600 1rem/1.5rem 'Source Sans 3';
-  --font-size-md-bold: 700 1rem/1.5rem 'Source Sans 3';
-  --font-size-lg-regular: 400 1.125rem/1.5rem 'Source Sans 3';
-  --font-size-lg-semibold: 600 1.125rem/1.5rem 'Source Sans 3';
-  --font-size-lg-bold: 700 1.125rem/1.5rem 'Source Sans 3';
-  --font-size-xl-regular: 400 1.25rem/1.75rem 'Source Sans 3';
-  --font-size-xl-semibold: 600 1.25rem/1.75rem 'Source Sans 3';
-  --font-size-xl-bold: 700 1.25rem/1.75rem 'Source Sans 3';
-  --font-size-2xl-regular: 400 1.5rem/2.25rem 'Source Sans 3';
-  --font-size-2xl-semibold: 600 1.5rem/2.25rem 'Source Sans 3';
-  --font-size-2xl-bold: 700 1.5rem/2.25rem 'Source Sans 3';
-  --font-size-3xl-regular: 400 1.75rem/2.25rem 'Source Sans 3';
-  --font-size-3xl-semibold: 600 1.75rem/2.25rem 'Source Sans 3';
-  --font-size-3xl-bold: 700 1.75rem/2.25rem 'Source Sans 3';
-  --font-size-4xl-regular: 400 2.25rem/3rem 'Source Sans 3';
-  --font-size-4xl-semibold: 600 2.25rem/3rem 'Source Sans 3';
-  --font-size-4xl-bold: 700 2.25rem/3rem 'Source Sans 3';
-  --font-size-5xl-regular: 400 3rem/3.75rem 'Source Sans 3';
-  --font-size-5xl-semibold: 600 3rem/3.75rem 'Source Sans 3';
-  --font-size-5xl-bold: 700 3rem/3.75rem 'Source Sans 3';
-  --font-size-6xl-regular: 400 4.5rem/5rem 'Source Sans 3';
-  --font-size-6xl-semibold: 600 4.5rem/5rem 'Source Sans 3';
-  --font-size-6xl-bold: 700 4.5rem/5rem 'Source Sans 3';
+  --font-size-3xs-regular: 400 0.75rem/1rem "Source Sans 3";
+  --font-size-3xs-semibold: 600 0.75rem/1rem "Source Sans 3";
+  --font-size-3xs-bold: 700 0.75rem/1rem "Source Sans 3";
+  --font-size-2xs-regular: 400 0.813rem/1.25rem "Source Sans 3";
+  --font-size-2xs-semibold: 600 0.813rem/1.25rem "Source Sans 3";
+  --font-size-2xs-bold: 700 0.813rem/1.25rem "Source Sans 3";
+  --font-size-xs-regular: 400 0.875rem/1.25rem "Source Sans 3";
+  --font-size-xs-semibold: 600 0.875rem/1.25rem "Source Sans 3";
+  --font-size-xs-bold: 700 0.875rem/1.25rem "Source Sans 3";
+  --font-size-sm-regular: 400 0.938rem/1.25rem "Source Sans 3";
+  --font-size-sm-semibold: 600 0.938rem/1.25rem "Source Sans 3";
+  --font-size-sm-bold: 700 0.938rem/1.25rem "Source Sans 3";
+  --font-size-md-regular: 400 1rem/1.5rem "Source Sans 3";
+  --font-size-md-semibold: 600 1rem/1.5rem "Source Sans 3";
+  --font-size-md-bold: 700 1rem/1.5rem "Source Sans 3";
+  --font-size-lg-regular: 400 1.125rem/1.5rem "Source Sans 3";
+  --font-size-lg-semibold: 600 1.125rem/1.5rem "Source Sans 3";
+  --font-size-lg-bold: 700 1.125rem/1.5rem "Source Sans 3";
+  --font-size-xl-regular: 400 1.25rem/1.75rem "Source Sans 3";
+  --font-size-xl-semibold: 600 1.25rem/1.75rem "Source Sans 3";
+  --font-size-xl-bold: 700 1.25rem/1.75rem "Source Sans 3";
+  --font-size-2xl-regular: 400 1.5rem/2.25rem "Source Sans 3";
+  --font-size-2xl-semibold: 600 1.5rem/2.25rem "Source Sans 3";
+  --font-size-2xl-bold: 700 1.5rem/2.25rem "Source Sans 3";
+  --font-size-3xl-regular: 400 1.75rem/2.25rem "Source Sans 3";
+  --font-size-3xl-semibold: 600 1.75rem/2.25rem "Source Sans 3";
+  --font-size-3xl-bold: 700 1.75rem/2.25rem "Source Sans 3";
+  --font-size-4xl-regular: 400 2.25rem/3rem "Source Sans 3";
+  --font-size-4xl-semibold: 600 2.25rem/3rem "Source Sans 3";
+  --font-size-4xl-bold: 700 2.25rem/3rem "Source Sans 3";
+  --font-size-5xl-regular: 400 3rem/3.75rem "Source Sans 3";
+  --font-size-5xl-semibold: 600 3rem/3.75rem "Source Sans 3";
+  --font-size-5xl-bold: 700 3rem/3.75rem "Source Sans 3";
+  --font-size-6xl-regular: 400 4.5rem/5rem "Source Sans 3";
+  --font-size-6xl-semibold: 600 4.5rem/5rem "Source Sans 3";
+  --font-size-6xl-bold: 700 4.5rem/5rem "Source Sans 3";
   --text-case-none: none;
   --text-decoration-none: none;
   --paragraph-indent-0: 0px;
-  --color-neutral-100: #F9F9F9;
+  --color-neutral-100: #f9f9f9;
   --color-neutral-200: #edeeef;
   --color-neutral-300: #d5d7db;
   --color-neutral-400: #b7bcc3;
@@ -273,7 +274,7 @@
   --color-primary-600: #0c57cd;
   --color-primary-700: #063b99;
   --color-primary-800: #052b74;
-  --color-primary-900: #041C4F;
+  --color-primary-900: #041c4f;
   --color-primary-1000: #03122f;
   --color-danger-100: #fee5e5;
   --color-danger-200: #fecbcb;
@@ -334,4 +335,4 @@
   --elevation-499: 499;
   --elevation-absolute-bottom: -999;
   --elevation-absolute-top: 999;
-}
+}

package/build/css/utilities/box-sizing.css

@@ -0,0 +1,7 @@
+.box-border {
+  box-sizing: border-box !important;
+}
+
+.box-content {
+  box-sizing: content-box !important;
+}

package/build/css/utilities/display.css

@@ -0,0 +1,65 @@
+/* Display Utilities */
+
+.block {
+  display: block !important;
+}
+.inline-block {
+  display: inline-block !important;
+}
+.inline {
+  display: inline !important;
+}
+.flex {
+  display: flex !important;
+}
+.inline-flex {
+  display: inline-flex !important;
+}
+.table {
+  display: table !important;
+}
+.inline-table {
+  display: inline-table !important;
+}
+.table-caption {
+  display: table-caption !important;
+}
+.table-cell {
+  display: table-cell !important;
+}
+.table-column {
+  display: table-column !important;
+}
+.table-column-group {
+  display: table-column-group !important;
+}
+.table-footer-group {
+  display: table-footer-group !important;
+}
+.table-header-group {
+  display: table-header-group !important;
+}
+.table-row-group {
+  display: table-row-group !important;
+}
+.table-row {
+  display: table-row !important;
+}
+.flow-root {
+  display: flow-root !important;
+}
+.grid {
+  display: grid !important;
+}
+.inline-grid {
+  display: inline-grid !important;
+}
+.contents {
+  display: contents !important;
+}
+.list-item {
+  display: list-item !important;
+}
+.hidden {
+  display: none !important;
+}

package/build/css/utilities/flex.css

@@ -0,0 +1,198 @@
+/* flex-direction */
+.flex-row {
+  flex-direction: row !important;
+}
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+.flex-col {
+  flex-direction: column !important;
+}
+.flex-col-reverse {
+  flex-direction: column-reverse !important;
+}
+/* flex-wrap */
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+/* justify-content*/
+.justify-normal: {
+  justify-content: normal !important;
+}
+.justify-start {
+  justify-content: flex-start !important;
+}
+.justify-end {
+  justify-content: flex-end !important;
+}
+.justify-center {
+  justify-content: center !important;
+}
+.justify-between {
+  justify-content: space-between !important;
+}
+.justify-around {
+  justify-content: space-around !important;
+}
+.justify-evenly {
+  justify-content: space-evenly !important;
+}
+.justify-stretch {
+  justify-content: stretch !important;
+}
+/* justify-self */
+.justify-self-auto {
+  justify-self: auto !important;
+}
+.justify-self-start {
+  justify-self: flex-start !important;
+}
+.justify-self-end {
+  justify-self: flex-end !important;
+}
+.justify-self-center {
+  justify-self: center !important;
+}
+.justify-self-stretch {
+  justify-self: stretch !important;
+}
+/* justify-items */
+.justify-items-start {
+  justify-items: flex-start !important;
+}
+.justify-items-end {
+  justify-items: flex-end !important;
+}
+.justify-items-center {
+  justify-items: center !important;
+}
+.justify-items-stretch {
+  justify-items: stretch !important;
+}
+/* align-self */
+.self-auto {
+  align-self: auto !important;
+}
+.self-start {
+  align-self: flex-start !important;
+}
+.self-end {
+  align-self: flex-end !important;
+}
+.self-center {
+  align-self: center !important;
+}
+.self-stretch {
+  align-self: stretch !important;
+}
+.self-baseline {
+  align-self: baseline !important;
+}
+/* align */
+.items-start {
+  align-items: flex-start !important;
+}
+.items-end {
+  align-items: flex-end !important;
+}
+.items-center {
+  align-items: center !important;
+}
+.items-baseline {
+  align-items: baseline !important;
+}
+.items-stretch {
+  align-items: stretch !important;
+}
+/* align-content */
+.content-normal {
+  align-content: normal !important;
+}
+.content-center {
+  align-content: center !important;
+}
+.content-start {
+  align-content: flex-start !important;
+}
+.content-end {
+  align-content: flex-end !important;
+}
+.content-between {
+  align-content: space-between !important;
+}
+.content-around {
+  align-content: space-around !important;
+}
+.content-evenly {
+  align-content: space-evenly !important;
+}
+.content-baseline {
+  align-content: baseline !important;
+}
+.content-stretch {
+  align-content: stretch !important;
+}
+
+/* place-content */
+.place-content-center {
+  place-content: center !important;
+}
+.place-content-start {
+  place-content: start !important;
+}
+.place-content-end {
+  place-content: end !important;
+}
+.place-content-between {
+  place-content: space-between !important;
+}
+.place-content-around {
+  place-content: space-around !important;
+}
+.place-content-evenly {
+  place-content: space-evenly !important;
+}
+.place-content-baseline {
+  place-content: baseline !important;
+}
+.place-content-stretch {
+  place-content: stretch !important;
+}
+/* place-items */
+.place-items-start {
+  place-items: start !important;
+}
+.place-items-end {
+  place-items: end !important;
+}
+.place-items-center {
+  place-items: center !important;
+}
+.place-items-baseline {
+  place-items: baseline !important;
+}
+.place-items-stretch {
+  place-items: stretch !important;
+}
+/* place-self */
+.place-self-auto {
+  place-self: auto !important;
+}
+.place-self-start {
+  place-self: start !important;
+}
+.place-self-end {
+  place-self: end !important;
+}
+.place-self-center {
+  place-self: center !important;
+}
+.place-self-stretch {
+  place-self: stretch !important;
+}

package/build/css/utilities/font.css

@@ -0,0 +1,131 @@
+/* Font Size 3XS */
+.fs-3xs-regular {
+  font: var(--font-size-3xs-regular) !important;
+}
+.fs-3xs-semibold {
+  font: var(--font-size-3xs-semibold) !important;
+}
+.fs-3xs-bold {
+  font: var(--font-size-3xs-bold) !important;
+}
+
+/* Font Size 2XS */
+.fs-2xs-regular {
+  font: var(--font-size-2xs-regular) !important;
+}
+.fs-2xs-semibold {
+  font: var(--font-size-2xs-semibold) !important;
+}
+.fs-2xs-bold {
+  font: var(--font-size-2xs-bold) !important;
+}
+
+/* Font Size XS */
+.fs-xs-regular {
+  font: var(--font-size-xs-regular) !important;
+}
+.fs-xs-semibold {
+  font: var(--font-size-xs-semibold) !important;
+}
+.fs-xs-bold {
+  font: var(--font-size-xs-bold) !important;
+}
+
+/* Font Size SM */
+.fs-sm-regular {
+  font: var(--font-size-sm-regular) !important;
+}
+.fs-sm-semibold {
+  font: var(--font-size-sm-semibold) !important;
+}
+.fs-sm-bold {
+  font: var(--font-size-sm-bold) !important;
+}
+
+/* Font Size MD */
+.fs-md-regular {
+  font: var(--font-size-md-regular) !important;
+}
+.fs-md-semibold {
+  font: var(--font-size-md-semibold) !important;
+}
+.fs-md-bold {
+  font: var(--font-size-md-bold) !important;
+}
+
+/* Font Size LG */
+.fs-lg-regular {
+  font: var(--font-size-lg-regular) !important;
+}
+.fs-lg-semibold {
+  font: var(--font-size-lg-semibold) !important;
+}
+.fs-lg-bold {
+  font: var(--font-size-lg-bold) !important;
+}
+
+/* Font Size XL */
+.fs-xl-regular {
+  font: var(--font-size-xl-regular) !important;
+}
+.fs-xl-semibold {
+  font: var(--font-size-xl-semibold) !important;
+}
+.fs-xl-bold {
+  font: var(--font-size-xl-bold) !important;
+}
+
+/* Font Size 2XL */
+.fs-2xl-regular {
+  font: var(--font-size-2xl-regular) !important;
+}
+.fs-2xl-semibold {
+  font: var(--font-size-2xl-semibold) !important;
+}
+.fs-2xl-bold {
+  font: var(--font-size-2xl-bold) !important;
+}
+
+/* Font Size 3XL */
+.fs-3xl-regular {
+  font: var(--font-size-3xl-regular) !important;
+}
+.fs-3xl-semibold {
+  font: var(--font-size-3xl-semibold) !important;
+}
+.fs-3xl-bold {
+  font: var(--font-size-3xl-bold) !important;
+}
+
+/* Font Size 4XL */
+.fs-4xl-regular {
+  font: var(--font-size-4xl-regular) !important;
+}
+.fs-4xl-semibold {
+  font: var(--font-size-4xl-semibold) !important;
+}
+.fs-4xl-bold {
+  font: var(--font-size-4xl-bold) !important;
+}
+
+/* Font Size 5XL */
+.fs-5xl-regular {
+  font: var(--font-size-5xl-regular) !important;
+}
+.fs-5xl-semibold {
+  font: var(--font-size-5xl-semibold) !important;
+}
+.fs-5xl-bold {
+  font: var(--font-size-5xl-bold) !important;
+}
+
+/* Font Size 6XL */
+.fs-6xl-regular {
+  font: var(--font-size-6xl-regular) !important;
+}
+.fs-6xl-semibold {
+  font: var(--font-size-6xl-semibold) !important;
+}
+.fs-6xl-bold {
+  font: var(--font-size-6xl-bold) !important;
+}

package/build/css/utilities/gap.css

@@ -0,0 +1,104 @@
+/* gap */
+.gap-4xs {
+  gap: var(--spacing-4xs) !important;
+}
+.gap-3xs {
+  gap: var(--spacing-3xs) !important;
+}
+.gap-2xs {
+  gap: var(--spacing-2xs) !important;
+}
+.gap-xs {
+  gap: var(--spacing-xs) !important;
+}
+.gap-sm {
+  gap: var(--spacing-sm) !important;
+}
+.gap-md {
+  gap: var(--spacing-md) !important;
+}
+.gap-lg {
+  gap: var(--spacing-lg) !important;
+}
+.gap-xl {
+  gap: var(--spacing-xl) !important;
+}
+.gap-2xl {
+  gap: var(--spacing-2xl) !important;
+}
+.gap-3xl {
+  gap: var(--spacing-3xl) !important;
+}
+.gap-4xl {
+  gap: var(--spacing-4xl) !important;
+}
+
+/* row gap  */
+.row-gap-4xs {
+  row-gap: var(--spacing-4xs) !important;
+}
+.row-gap-3xs {
+  row-gap: var(--spacing-3xs) !important;
+}
+.row-gap-2xs {
+  row-gap: var(--spacing-2xs) !important;
+}
+.row-gap-xs {
+  row-gap: var(--spacing-xs) !important;
+}
+.row-gap-sm {
+  row-gap: var(--spacing-sm) !important;
+}
+.row-gap-md {
+  row-gap: var(--spacing-md) !important;
+}
+.row-gap-lg {
+  row-gap: var(--spacing-lg) !important;
+}
+.row-gap-xl {
+  row-gap: var(--spacing-xl) !important;
+}
+.row-gap-2xl {
+  row-gap: var(--spacing-2xl) !important;
+}
+.row-gap-3xl {
+  row-gap: var(--spacing-3xl) !important;
+}
+.row-gap-4xl {
+  row-gap: var(--spacing-4xl) !important;
+}
+
+/* column gap  */
+.col-gap-4xs {
+  column-gap: var(--spacing-4xs) !important;
+}
+.col-gap-3xs {
+  column-gap: var(--spacing-3xs) !important;
+}
+.col-gap-2xs {
+  column-gap: var(--spacing-2xs) !important;
+}
+.col-gap-xs {
+  column-gap: var(--spacing-xs) !important;
+}
+.col-gap-sm {
+  column-gap: var(--spacing-sm) !important;
+}
+.col-gap-md {
+  column-gap: var(--spacing-md) !important;
+}
+.col-gap-lg {
+  column-gap: var(--spacing-lg) !important;
+}
+.col-gap-xl {
+  column-gap: var(--spacing-xl) !important;
+}
+.col-gap-2xl {
+  column-gap: var(--spacing-2xl) !important;
+}
+.col-gap-3xl {
+  column-gap: var(--spacing-3xl) !important;
+}
+.col-gap-4xl {
+  column-gap: var(--spacing-4xl) !important;
+}