Merge pull request #2 from kyndryl-design-system/upgrade/foundation

Update Foundation
kyndryl-design-system · Aug 2, 2023 · 797f181 · 797f181
2 parents bb4324a + 4533c58
commit 797f181
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ import '@kyndryl-design-system/foundation/css/root.css';
 
 ### Use CSS tokens/variables
 
-You can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.
+You can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.
 
 ## Start using components
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@carbon/icon-helpers": "^10.37.0",
     "@carbon/icons": "^11.14.0",
-    "@kyndryl-design-system/foundation": "^1.0.0-beta.3",
+    "@kyndryl-design-system/foundation": "^1.0.0-beta.8",
     "lit": "^2.7.6",
     "query-selector-shadow-dom": "^1.0.1",
     "resolve-url-loader": "^5.0.0"

diff --git a/src/components/global/footer/footer.scss b/src/components/global/footer/footer.scss
@@ -1,12 +1,13 @@
-@import '../../../common/scss/global.scss';
+@use '../../../common/scss/global.scss';
+@use '~@kyndryl-design-system/foundation/scss/mixins/typography.scss';
 
 :host {
   display: block;
 }
 
 .footer {
-  padding: 8px var(--kyn-spacing-gutter) 12px;
-  box-shadow: 0 -1px 0 var(--kyn-color-divider-light);
+  padding: 8px var(--kd-page-gutter) 12px;
+  box-shadow: 0 -1px 0 var(--kd-color-border-light);
 }
 
 .footer-links {
@@ -32,11 +33,7 @@
 }
 
 .copyright {
-  font-family: var(--kyn-font-heading);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.1px;
-  color: var(--kyn-color-text-light);
+  @include typography.type-ui-04;
 }
 
 @media (min-width: 42rem) {

diff --git a/src/components/global/footer/footerLink.scss b/src/components/global/footer/footerLink.scss
@@ -1,4 +1,4 @@
-@import '../../../common/scss/global.scss';
+@use '../../../common/scss/global.scss';
 
 :host {
   display: inline-block;
@@ -10,7 +10,7 @@
   padding: 0 12px;
   position: relative;
   text-decoration: none;
-  color: var(--kyn-color-text);
+  color: var(--kd-color-text-link);
 
   &::after {
     content: '';
@@ -21,7 +21,7 @@
     bottom: 0;
     left: 12px;
     top: auto;
-    background-color: var(--kyn-color-brand);
+    background-color: var(--kd-color-border-accent-warmred);
     transform-origin: bottom left;
     transition: transform 0.15s ease-out;
   }

diff --git a/src/components/global/footer/footerNav.scss b/src/components/global/footer/footerNav.scss
@@ -11,7 +11,7 @@
 }
 
 ::slotted(kyn-footer-link) {
-  border-right: 1px solid var(--kyn-color-divider);
+  border-right: 1px solid var(--kd-color-border-dark);
 }
 
 ::slotted(kyn-footer-link:last-child) {

diff --git a/src/components/global/header/header-interactive.scss b/src/components/global/header/header-interactive.scss
@@ -5,12 +5,9 @@
   outline: none;
 
   &:hover,
-  &:focus {
-    color: var(--kyn-color-primary-hover);
-  }
-
+  &:focus,
   &:active {
-    color: var(--kyn-color-primary-active);
+    color: var(--kd-color-text-tertiary);
   }
 
   &::before {
@@ -25,17 +22,17 @@
   }
 
   &.active {
-    color: var(--kyn-color-primary-focus);
-    background: var(--kyn-color-background-focus);
+    color: var(--kd-color-text-tertiary);
+    background: var(--kd-color-background-secondary);
 
     &::before {
-      background-color: var(--kyn-color-primary-focus);
+      background-color: var(--kd-color-text-tertiary);
     }
   }
 }
 
 .divider {
-  box-shadow: 0 1px 0 var(--kyn-color-divider-light);
+  box-shadow: 0 1px 0 var(--kd-color-border-light);
   margin-bottom: 1px;
 }
 
@@ -51,13 +48,13 @@
 
   &__content {
     position: fixed;
-    top: var(--kyn-header-height);
+    top: var(--kd-header-height);
     right: 0;
     left: 0;
     bottom: 0;
     padding: 8px 0;
     overflow-y: auto;
-    background: var(--kyn-color-background-focus);
+    background: var(--kd-color-background-secondary);
     transition: visibility 0.15s, opacity 0.15s ease-in-out,
       transform 0.15s ease-in-out;
     transform: translate3d(0px, -10%, 0px);
@@ -71,8 +68,8 @@
       right: 0;
       bottom: auto;
       left: auto;
-      box-shadow: var(--kyn-shadow-menu);
-      max-height: calc(100vh - var(--kyn-header-height));
+      box-shadow: var(--kd-shadow-menu);
+      max-height: calc(100vh - var(--kd-header-height));
     }
 
     strong {
@@ -88,11 +85,11 @@
   &:focus-within,
   &:hover {
     .interactive {
-      color: var(--kyn-color-primary-focus);
-      background: var(--kyn-color-background-focus);
+      color: var(--kd-color-text-tertiary);
+      background: var(--kd-color-background-secondary);
 
       &::before {
-        background-color: var(--kyn-color-primary-focus);
+        background-color: var(--kd-color-text-tertiary);
       }
     }
 

diff --git a/src/components/global/header/header.scss b/src/components/global/header/header.scss
@@ -1,24 +1,24 @@
-@import '../../../common/scss/global.scss';
-@import './header-interactive.scss';
+@use '../../../common/scss/global.scss';
+@use './header-interactive.scss';
+@use '~@kyndryl-design-system/foundation/scss/mixins/typography.scss';
 
 :host {
   display: block;
 }
 
 .header {
-  font-family: var(--kyn-font-heading);
   display: flex;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
-  height: var(--kyn-header-height);
-  background: var(--kyn-color-background);
+  height: var(--kd-header-height);
+  background: var(--kd-color-background-primary);
   padding: 0 8px;
-  z-index: var(--kyn-z-header);
+  z-index: var(--kd-z-header);
 
   &.divider {
-    box-shadow: 0 1px 0 var(--kyn-color-divider-light);
+    box-shadow: 0 1px 0 var(--kd-color-border-light);
   }
 
   @media screen and (min-width: 42rem) {
@@ -36,7 +36,7 @@
   align-items: center;
   padding: 0 5px;
   margin: 0 3px;
-  color: var(--kyn-color-text);
+  color: var(--kd-color-text-primary);
   text-decoration: none;
 
   svg {
@@ -49,15 +49,12 @@
 }
 
 .title {
+  @include typography.type-ui-05;
   display: none;
-  font-weight: 400;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  letter-spacing: 0.1px;
   margin-top: -1px;
   margin-left: 16px;
   padding-left: 16px;
-  border-left: 1px solid var(--kyn-color-divider);
+  border-left: 1px solid var(--kd-color-border-dark);
 
   .breakpoint-hit & {
     display: inline;

diff --git a/src/components/global/header/headerAvatar.scss b/src/components/global/header/headerAvatar.scss
@@ -1,14 +1,15 @@
-@import '../../../common/scss/global.scss';
+@use '../../../common/scss/global.scss';
+@use '~@kyndryl-design-system/foundation/scss/mixins/typography.scss';
 
 :host {
+  @include typography.type-ui-05;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  font-family: var(--kyn-font-heading);
-  color: var(--kyn-color-brand-text);
+  color: var(--kd-color-text-featured);
   background: #f0f0f4;
   border: 1px solid transparent;
 }
diff --git a/src/components/global/header/headerFlyout.scss b/src/components/global/header/headerFlyout.scss
@@ -1,5 +1,6 @@
-@import '../../../common/scss/global.scss';
-@import './header-interactive.scss';
+@use '../../../common/scss/global.scss';
+@use './header-interactive.scss';
+@use '~@kyndryl-design-system/foundation/scss/mixins/typography.scss';
 
 :host {
   display: inline-flex;
@@ -16,8 +17,8 @@
   .interactive {
     ::slotted(div[slot='button']),
     ::slotted(span[slot='button']) {
-      font-family: var(--kyn-font-heading);
-      color: var(--kyn-color-text);
+      @include typography.type-ui-05;
+      color: var(--kd-color-text-primary);
     }
   }
 
@@ -26,12 +27,12 @@
     .interactive {
       ::slotted(div[slot='button']),
       ::slotted(span[slot='button']) {
-        color: var(--kyn-color-primary-focus);
+        color: var(--kd-color-text-tertiary);
       }
 
       ::slotted(kyn-header-avatar) {
         background: none;
-        border-color: var(--kyn-color-brand-text);
+        border-color: var(--kd-color-border-accent-warmred);
       }
     }
   }

diff --git a/src/components/global/header/headerLink.scss b/src/components/global/header/headerLink.scss
@@ -1,5 +1,6 @@
-@import '../../../common/scss/global.scss';
-@import './header-interactive.scss';
+@use '../../../common/scss/global.scss';
+@use './header-interactive.scss';
+@use '~@kyndryl-design-system/foundation/scss/mixins/typography.scss';
 
 :host {
   display: block;
@@ -18,13 +19,13 @@
 }
 
 .nav-link {
+  @include typography.type-ui-05;
   display: flex;
   position: relative;
   align-items: center;
   padding: 0 16px;
-  font-size: 0.875rem;
   text-decoration: none;
-  color: var(--kyn-color-text);
+  color: var(--kd-color-text-primary);
   white-space: nowrap;
   outline: none;
 
@@ -40,11 +41,11 @@
   }
 
   &.active {
-    color: var(--kyn-color-primary-focus);
-    background: var(--kyn-color-background-focus);
+    color: var(--kd-color-text-tertiary);
+    background: var(--kd-color-background-secondary);
 
     &::before {
-      background-color: var(--kyn-color-primary-focus);
+      background-color: var(--kd-color-text-tertiary);
     }
   }
 
@@ -70,7 +71,7 @@
     bottom: 0;
     right: 16px;
     top: auto;
-    background-color: var(--kyn-color-brand);
+    background-color: var(--kd-color-border-accent-warmred);
     transform-origin: bottom left;
     transition: transform 0.15s ease-out;
   }
@@ -94,15 +95,15 @@
     }
 
     &.interactive {
-      height: var(--kyn-header-height);
+      height: var(--kd-header-height);
     }
   }
 
   &--2 {
     height: 38px;
 
     &:hover {
-      color: var(--kyn-color-text);
+      color: var(--kd-color-text-primary);
     }
   }
 }

diff --git a/src/components/global/header/headerNav.scss b/src/components/global/header/headerNav.scss
@@ -6,13 +6,13 @@
 
 .header-nav {
   position: fixed;
-  top: var(--kyn-header-height);
+  top: var(--kd-header-height);
   left: 0;
   bottom: 0;
   width: 265px;
   display: flex;
   flex-direction: column;
-  box-shadow: var(--kyn-shadow-menu);
+  box-shadow: var(--kd-shadow-menu);
 
   &--inline {
     position: static;
@@ -24,7 +24,7 @@
   &--flyout {
     padding: 8px 0;
     width: 100%;
-    background: var(--kyn-color-background-focus);
+    background: var(--kd-color-background-secondary);
     transition: transform 150ms ease-out, opacity 150ms ease-out,
       visibility 150ms ease-out;
     transform: translate3d(0, -10%, 0);