feat: updated design tokens (#516)

core-ds · Feb 18, 2021 · ef66b65 · ef66b65
1 parent 00a9ff5
commit ef66b65
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -55,11 +55,11 @@
         "@alfalab/hooks": "^1.0.0",
         "@alfalab/icons-classic": "^1.56.0",
         "@alfalab/icons-flag": "^1.3.0",
-        "@alfalab/icons-glyph": "^1.96.0",
+        "@alfalab/icons-glyph": "^1.102.0",
         "@alfalab/icons-logotype": "^1.9.0",
         "@alfalab/utils": "^1.0.1",
         "@popperjs/core": "^2.3.3",
-        "alfa-ui-primitives": "^2.105.0",
+        "alfa-ui-primitives": "^2.148.0",
         "classnames": "^2.2.6",
         "compute-scroll-into-view": "^1.0.13",
         "date-fns": "^2.16.1",

diff --git a/packages/badge/src/Component.stories.mdx b/packages/badge/src/Component.stories.mdx
@@ -92,13 +92,16 @@ import { Badge } from '@alfalab/core-components-badge';
                 <Badge view='icon' iconColor='negative' content={<CrossCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' iconColor='primary' content={<StopCircleMIcon/>} />
+                <Badge view='icon' iconColor='negative' content={<StopCircleMIcon/>} />
             </Col>
             <Col>
                 <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' iconColor='tertiary' content={<ClockMIcon/>} />
+                <Badge view='icon' iconColor='secondary' content={<ClockMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='secondary' content={<CrossCircleMIcon/>} />
             </Col>
         </Row>
         <Row style={{margin: 0, padding: 12, backgroundColor: '#DBDEE1'}}>
@@ -115,13 +118,16 @@ import { Badge } from '@alfalab/core-components-badge';
                 <Badge view='icon' iconColor='negative' content={<CrossCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' iconColor='primary' content={<StopCircleMIcon/>} />
+                <Badge view='icon' iconColor='negative' content={<StopCircleMIcon/>} />
             </Col>
             <Col>
                 <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' iconColor='tertiary' content={<ClockMIcon/>} />
+                <Badge view='icon' iconColor='secondary' content={<ClockMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' iconColor='secondary' content={<CrossCircleMIcon/>} />
             </Col>
         </Row>
         <Row style={{margin: 0, padding: 12, paddingTop: 0, backgroundColor: '#DBDEE1'}}>
@@ -138,13 +144,16 @@ import { Badge } from '@alfalab/core-components-badge';
                 <Badge view='icon' visibleIconOutline={true} iconColor='negative' content={<CrossCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' visibleIconOutline={true} iconColor='primary' content={<StopCircleMIcon/>} />
+                <Badge view='icon' visibleIconOutline={true} iconColor='negative' content={<StopCircleMIcon/>} />
             </Col>
             <Col>
                 <Badge view='icon' visibleIconOutline={true} iconColor='secondary' content={<InformationCircleMIcon/>} />
             </Col>
             <Col>
-                <Badge view='icon' visibleIconOutline={true} iconColor='tertiary' content={<ClockMIcon/>} />
+                <Badge view='icon' visibleIconOutline={true} iconColor='secondary' content={<ClockMIcon/>} />
+            </Col>
+            <Col>
+                <Badge view='icon' visibleIconOutline={true} iconColor='secondary' content={<CrossCircleMIcon/>} />
             </Col>
         </Row>
     </Container>

diff --git a/packages/themes/src/mixins/colors/colors-indigo.css b/packages/themes/src/mixins/colors/colors-indigo.css
@@ -1,6 +1,7 @@
 @define-mixin dark-theme {
     --color-light-bg-accent: var(--color-dark-bg-accent);
     --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted);
+    --color-light-bg-info: var(--color-dark-bg-info);
     --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted);
     --color-light-bg-neutral: var(--color-dark-bg-neutral);
     --color-light-bg-opaque: var(--color-dark-bg-opaque);
@@ -30,6 +31,7 @@
     --color-light-graphic-primary: var(--color-dark-graphic-primary);
     --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted);
     --color-light-graphic-secondary: var(--color-dark-graphic-secondary);
+    --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted);
     --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary);
     --color-light-specialbg-component: var(--color-dark-specialbg-component);
     --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled);

diff --git a/packages/vars/src/colors-indigo.css b/packages/vars/src/colors-indigo.css
@@ -29,8 +29,9 @@
     --color-dark-graphic-neutral: #485767;
     --color-dark-graphic-positive: #2fc26e;
     --color-dark-graphic-primary: #fff;
-    --color-dark-graphic-primary-inverted: #233549;
+    --color-dark-graphic-primary-inverted: #0b1f35;
     --color-dark-graphic-secondary: #b6bcc3;
+    --color-dark-graphic-secondary-inverted: #233549;
     --color-dark-graphic-tertiary: #6d7986;
     --color-dark-specialbg-component: #485767;
     --color-dark-specialbg-nulled: rgba(11, 31, 53, 0);
@@ -84,8 +85,9 @@
     --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
     --color-light-graphic-primary: #0b1f35;
-    --color-light-graphic-primary-inverted: #f3f4f5;
+    --color-light-graphic-primary-inverted: #fff;
     --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-secondary-inverted: #f3f4f5;
     --color-light-graphic-tertiary: #b6bcc3;
     --color-light-specialbg-component: rgba(11, 31, 53, 0.07);
     --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
@@ -101,10 +103,10 @@
     --color-light-text-positive: #13a463;
     --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary: #6d7986;
+    --color-light-text-secondary: #546272;
     --color-light-text-secondary-inverted: #b6bcc3;
     --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-    --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.6);
+    --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.7);
     --color-light-text-tertiary: #b6bcc3;
     --color-light-text-tertiary-inverted: #6d7986;
     --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);

diff --git a/packages/vars/src/typography.css b/packages/vars/src/typography.css
@@ -1,6 +1,6 @@
 :root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 }

diff --git a/yarn.lock b/yarn.lock
@@ -77,16 +77,16 @@
   resolved "https://registry.yarnpkg.com/@alfalab/icons-flag/-/icons-flag-1.3.0.tgz#edd1b82a92954ed5339d51083d83ec41f7ff77fb"
   integrity sha512-kvVrwjKw6TZfbr9xaK7/e/QtkOAT5HzsWTI2rtvrIp0tzwnkQzp1cCHsiX/mt6h+YOixWfDGYbYEL2RKHFrBaw==
 
+"@alfalab/icons-glyph@^1.102.0":
+  version "1.102.0"
+  resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.102.0.tgz#5e403273e08bfce32719d571f9ab2cc121121546"
+  integrity sha512-s4Y/kxRsAyGWjseauTUSQdQrDVDkauyLeVY0pJ0pQ5fSZkaFxZIXUYG9E1OpNhRPOfU9lJdnwY67zJE7jjIIjQ==
+
 "@alfalab/icons-glyph@^1.26.0", "@alfalab/icons-glyph@^1.70.0", "@alfalab/icons-glyph@^1.71.0":
   version "1.99.0"
   resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.99.0.tgz#6c39d80750644b739fa8c599344404697e8d4920"
   integrity sha512-iA23rxX/DEJYdzuG92GbORJLAg3HAQtL8xjg8n3wk573VLftJuPV8nQHPKtXSTX2V2bfH+LE0BRS6x2Y8F1TnQ==
 
-"@alfalab/icons-glyph@^1.96.0":
-  version "1.96.0"
-  resolved "https://registry.yarnpkg.com/@alfalab/icons-glyph/-/icons-glyph-1.96.0.tgz#4fbf352d02f208c13119c1cc33cc94fb6632d90a"
-  integrity sha512-VmxKoyZLPiJhhOlbN7XQIoV1jMeJhyzj4KFd3r0evhThORhJpB8Tga0Ufcj7r7OVYXXHxllMFducWqiFT9Ji3Q==
-
 "@alfalab/icons-logotype@^1.4.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@alfalab/icons-logotype/-/icons-logotype-1.8.0.tgz#b81e4aa24767172af498043688c0bd853e3e743f"
@@ -4886,10 +4886,10 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alfa-ui-primitives@^2.105.0:
-  version "2.122.0"
-  resolved "https://registry.yarnpkg.com/alfa-ui-primitives/-/alfa-ui-primitives-2.122.0.tgz#d6973fa3af555a8666d99aa10bd19ced25803743"
-  integrity sha512-icVw928Js/o98/Y4FxqS2K/YME0A+IXzb1K6cPYycuWIrzagM0GiFSU2mgnw5k1Y3OcWhyYfwbrBeY/UsPaHKA==
+alfa-ui-primitives@^2.148.0:
+  version "2.148.0"
+  resolved "https://registry.yarnpkg.com/alfa-ui-primitives/-/alfa-ui-primitives-2.148.0.tgz#ab90d50528986641fa391f94d16150a88a4ca9e9"
+  integrity sha512-Scv+Y7S8sWTyz8y1UBGd4bFghKCW5lD14Gw8mEXv8Hxx/6ihshyvsGWJMUM8Xllx7SJe13S2cDDYnMIeZBI4yg==
 
 alphanum-sort@^1.0.0:
   version "1.0.2"