Merge pull request #102 from 8845musign/update-tokens-and-ui

Update tokens and UI
ubie-oss · Dec 26, 2024 · 634d094 · 634d094
2 parents e1bb636 + ece3d1d
commit 634d094
Show file tree

Hide file tree

Showing 107 changed files with 1,694 additions and 798 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,9 +31,9 @@
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@ubie/design-tokens": "^0.2.0",
-    "@ubie/ubie-icons": "^0.8.2",
-    "@ubie/ubie-ui": "^0.0.39",
+    "@ubie/design-tokens": "^0.3.2",
+    "@ubie/ubie-icons": "^0.8.6",
+    "@ubie/ubie-ui": "^0.0.40",
     "@unocss/reset": "^0.59.4",
     "astro": "^4.14.2",
     "astro-icon": "^1.1.0",
@@ -75,12 +75,12 @@
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "scaffdog": "^3.0.0",
-    "stylelint": "^16.4.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^5.0.1",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-prettier": "^5.0.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-prettier": "^5.0.2",
     "vitest": "^1.5.1"
   },
   "main": "index.js",

diff --git a/src/components/astro/GlobalHeader.astro b/src/components/astro/GlobalHeader.astro
@@ -92,7 +92,7 @@ const { globalNavigationId } = Astro.props;
     width: 100%;
     height: var(--header-height-mobile);
     padding: 0 var(--size-spacing-xs);
-    border-bottom: 1px solid var(--color-ubie-black-200);
+    border-bottom: 1px solid var(--color-ubie-black-300);
     transition: background-color 0.2s ease-in-out;
   }
 
@@ -116,18 +116,18 @@ const { globalNavigationId } = Astro.props;
 
   @media (hover: hover) {
     .openMobileGlobalNavigationButton:hover {
-      background-color: var(--color-ubie-black-100);
+      background-color: var(--color-ubie-black-200);
     }
   }
 
   .openMobileGlobalNavigationButton:active {
-    background-color: var(--color-ubie-black-200);
+    background-color: var(--color-ubie-black-300);
   }
 
   .openMobileGlobalNavigationButton > img {
     width: 28px;
     height: auto;
-    color: var(--color-ubie-black-900);
+    color: var(--color-ubie-black-1000);
   }
 
   @media (width >= 768px) {

diff --git a/src/components/astro/LinkCard.astro b/src/components/astro/LinkCard.astro
@@ -39,7 +39,7 @@ const { href, heading, as: HeadingElement = 'h2', id } = Astro.props;
     height: auto;
     aspect-ratio: 1.732 / 1;
     overflow: hidden;
-    border: 1px solid var(--color-ubie-black-200);
+    border: 1px solid var(--color-ubie-black-300);
     border-radius: var(--radius-md);
   }
 

diff --git a/src/components/astro/LinkWithArrow.astro b/src/components/astro/LinkWithArrow.astro
@@ -30,7 +30,7 @@ const { href, expandClickableArea = false, ariaDescribedBy } = Astro.props;
   }
 
   .link.expandClickableArea:active::before {
-    background-color: var(--color-ubie-black-200);
+    background-color: rgba(0, 0, 0, 0.15);
   }
 
   .icon {

diff --git a/src/components/astro/Markdown.astro b/src/components/astro/Markdown.astro
@@ -141,13 +141,13 @@
   }
 
   .markdown :global(thead) {
-    background-color: var(--color-background-gray);
+    background-color: var(--color-background-black-darken);
   }
 
   .markdown :global(th),
   .markdown :global(td) {
     padding: var(--size-spacing-xs);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-black);
     font-size: var(--text-body-sm-size);
   }
 </style>
diff --git a/src/components/astro/PropsTable.astro b/src/components/astro/PropsTable.astro
@@ -1,7 +1,5 @@
 ---
 import type { Prop } from '../../types';
-import { typeSetKeyword } from '../../utils/server/props/typeSetKeyword';
-import { convertTypeSetKeyword } from '../../utils/server/props/convertTypeSetKeyword';
 import { TypeList } from '../react/props/TypeList';
 
 interface Props {
@@ -50,7 +48,7 @@ const { propsArray } = Astro.props;
 
 <style>
   .tableWrapper {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-black);
     border-radius: var(--radius-sm);
   }
 
@@ -61,17 +59,17 @@ const { propsArray } = Astro.props;
   }
 
   thead > tr {
-    background-color: var(--color-background-gray);
+    background-color: var(--color-background-black-darken);
   }
 
   tr + tr {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border-black);
   }
 
   th {
     font-size: var(--text-body-sm-size);
     line-height: var(--text-body-sm-narrow-line);
-    color: var(--color-ubie-black-500);
+    color: var(--color-ubie-black-600);
   }
 
   td {
@@ -106,13 +104,13 @@ const { propsArray } = Astro.props;
 
   tbody > tr > td:first-child {
     font-weight: bold;
-    color: var(--color-alert);
+    color: var(--color-ubie-red-600);
   }
 
   .required {
     font-size: var(--text-note-md-size);
     line-height: var(--text-note-md-line);
-    color: var(--color-alert);
+    color: var(--color-ubie-red-600);
   }
 
   .optional {

diff --git a/src/components/astro/top/CardPrinciples.astro b/src/components/astro/top/CardPrinciples.astro
@@ -45,7 +45,7 @@ const { id } = Astro.props;
     flex-direction: column;
     gap: var(--size-spacing-sm);
     padding: 32px var(--size-spacing-lg) var(--size-spacing-sm);
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
     border-radius: var(--radius-lg);
   }
 

diff --git a/src/components/react/ButtonIcon.module.css b/src/components/react/ButtonIcon.module.css
@@ -13,5 +13,5 @@
 }
 
 .button:hover {
-  background-color: var(--color-background-primary);
+  background-color: var(--color-background-blue);
 }
diff --git a/src/components/react/Callout.module.css b/src/components/react/Callout.module.css
@@ -2,7 +2,7 @@
   display: flex;
   gap: var(--size-spacing-md);
   padding: var(--size-spacing-md);
-  background-color: var(--color-background-primary);
+  background-color: var(--color-background-blue);
   border-radius: var(--radius-md);
 }
 

diff --git a/src/components/react/CopyButton.module.css b/src/components/react/CopyButton.module.css
@@ -24,20 +24,20 @@
 
 @media (hover: hover) {
   .button:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 
   .button.invert:hover {
     background-color: rgb(255 255 255 / 15%);
   }
 
   .button.secondary:hover {
-    color: var(--color-ubie-black-900);
+    color: var(--color-ubie-black-1000);
   }
 }
 
 .button:active {
-  background-color: var(--color-ubie-black-200);
+  background-color: var(--color-ubie-black-300);
 }
 
 .button.invert:active {

diff --git a/src/components/react/ExampleViewer.module.css b/src/components/react/ExampleViewer.module.css
@@ -1,7 +1,7 @@
 .demo {
   position: relative;
   height: 300px;
-  border: 1px solid var(--color-ubie-black-200);
+  border: 1px solid var(--color-ubie-black-300);
   border-radius: var(--radius-sm);
 }
 
@@ -30,12 +30,12 @@
 }
 
 .externalLink:active {
-  background-color: var(--color-ubie-black-200);
+  background-color: var(--color-ubie-black-300);
 }
 
 @media (hover: hover) {
   .externalLink:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 }
 

diff --git a/src/components/react/GlobalNavigation.module.css b/src/components/react/GlobalNavigation.module.css
@@ -3,7 +3,7 @@
   padding: 0 var(--size-spacing-md) var(--size-spacing-lg);
   overflow: auto;
   background-color: var(--color-ubie-white);
-  border-right: 1px solid var(--color-ubie-black-100);
+  border-right: 1px solid var(--color-ubie-black-200);
 }
 
 .linkList {
@@ -39,12 +39,12 @@
 
 @media (hover: hover) {
   .closeButton:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 }
 
 .closeButton:active {
-  background-color: var(--color-ubie-black-200);
+  background-color: var(--color-ubie-black-300);
 }
 
 .closeButtonImage {
@@ -62,6 +62,6 @@
   font-size: 11px;
   font-weight: bold;
   line-height: var(--text-heading-xs-line);
-  color: var(--color-ubie-black-500);
+  color: var(--color-ubie-black-600);
   letter-spacing: 0.125em;
 }
diff --git a/src/components/react/GlobalNavigationAccordion.module.css b/src/components/react/GlobalNavigationAccordion.module.css
@@ -31,12 +31,12 @@
 
 @media (hover: hover) {
   .toggle:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 }
 
 .toggle:active {
-  background-color: var(--color-ubie-black-200);
+  background-color: var(--color-ubie-black-300);
 }
 
 .toggleIcon {

diff --git a/src/components/react/GlobalNavigationLink.module.css b/src/components/react/GlobalNavigationLink.module.css
@@ -6,27 +6,27 @@
   font-size: var(--text-button-md-size);
   font-weight: bold;
   line-height: var(--text-button-md-line);
-  color: var(--color-ubie-black-500);
+  color: var(--color-ubie-black-600);
   text-decoration: none;
   border-radius: var(--radius-sm);
 }
 
 @media (hover: hover) {
   .link:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 }
 
 .link:active {
-  background-color: var(--color-ubie-black-200);
+  background-color: var(--color-ubie-black-300);
 }
 
 .link:visited {
-  color: var(--color-ubie-black-500);
+  color: var(--color-ubie-black-600);
 }
 
 .link.current {
-  color: var(--color-ubie-black);
+  color: var(--color-ubie-black-1000);
   background-color: var(--color-ubie-blue-100);
 }
 

diff --git a/src/components/react/GlobalNavigationLinkRoot.module.css b/src/components/react/GlobalNavigationLinkRoot.module.css
@@ -9,17 +9,17 @@
 
 .link,
 .link:visited {
-  color: var(--color-ubie-black-700);
+  color: var(--color-ubie-black-900);
 }
 
 @media (hover: hover) {
   .link:hover {
-    background-color: var(--color-ubie-black-100);
+    background-color: var(--color-ubie-black-200);
   }
 }
 
 .link.current {
-  color: var(--color-ubie-black);
+  color: var(--color-ubie-black-1000);
   background-color: var(--color-ubie-blue-100);
 }
 

diff --git a/src/components/react/IconList/IconWrapper.module.css b/src/components/react/IconList/IconWrapper.module.css
@@ -15,7 +15,7 @@
 }
 
 .wrapper:hover {
-  background-color: var(--color-background-gray);
+  background-color: var(--color-background-black-darken);
 }
 
 .icon {
@@ -31,7 +31,7 @@
 .name {
   padding: 0;
   margin: 0;
-  font-size: var(--text-note-md-size);
+  font-size: var(--text-body-xs-size);
   font-weight: bold;
   line-height: var(--text-body-sm-line);
   color: var(--color-text-sub);

diff --git a/src/components/react/SimpleCode.module.css b/src/components/react/SimpleCode.module.css
@@ -5,7 +5,7 @@
   gap: var(--size-spacing-xxs);
   padding: var(--size-spacing-md);
   color: var(--color-text-main);
-  background-color: var(--color-background-gray);
+  background-color: var(--color-background-black-darken);
   border-radius: var(--radius-md);
 }
 

diff --git a/src/components/react/Table/Cell.module.css b/src/components/react/Table/Cell.module.css
@@ -1,7 +1,7 @@
 .cell {
   padding: var(--size-spacing-sm) !important;
   font-size: var(--text-body-sm-size);
-  line-height: var(--text-body-sm-tight-line);
+  line-height: var(--text-body-sm-line);
   text-align: left;
   white-space: nowrap;
   border: none !important;

diff --git a/src/components/react/Table/HeadCell.module.css b/src/components/react/Table/HeadCell.module.css
@@ -1,8 +1,8 @@
 .cell {
   padding: var(--size-spacing-sm) !important;
   font-size: var(--text-body-sm-size);
-  line-height: var(--text-body-sm-tight-line);
-  color: var(--color-ubie-black-500);
+  line-height: var(--text-body-sm-line);
+  color: var(--color-ubie-black-600);
   text-align: left;
   border: none !important;
 }
diff --git a/src/components/react/Table/HeadRow.module.css b/src/components/react/Table/HeadRow.module.css
@@ -1,3 +1,3 @@
 .row {
-  background-color: var(--color-background-gray);
+  background-color: var(--color-background-black-darken);
 }
diff --git a/src/components/react/Table/Row.module.css b/src/components/react/Table/Row.module.css
@@ -1,3 +1,3 @@
 .row + .row {
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border-black);
 }
diff --git a/src/components/react/Table/Th.module.css b/src/components/react/Table/Th.module.css
@@ -1,6 +1,6 @@
 .th {
   padding: var(--size-spacing-xs);
   font-size: var(--text-heading-xs-size);
-  color: var(--color-ubie-black-700);
+  color: var(--color-ubie-black-900);
   text-align-last: left;
 }
diff --git a/src/components/react/Table/index.module.css b/src/components/react/Table/index.module.css
@@ -3,7 +3,7 @@
   margin-top: 60px;
   margin-bottom: 60px;
   overflow: auto;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-black);
   border-radius: var(--radius-sm);
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       .link.expandClickableArea:active::before {
-        background-color: var(--color-ubie-black-200);
+        background-color: rgba(0, 0, 0, 0.15);
       }
       .icon {
@@ Expand Down @@