Dark mode alias tokens and CDS component tokens (#32)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

config/dark/index.ts

@@ -8,7 +8,6 @@ import type {
 
 const {
   Color,
-  Elevation,
   Font,
   Spacing
 } = TokensTheme.default.Global;
@@ -18,6 +17,7 @@ const {
   Background,
   Border,
   Content,
+  Elevation,
   Interaction,
 } = TokensTheme.default.Alias;
 

config/densedDark/index.ts

@@ -8,7 +8,6 @@ import type {
 
 const {
   Color,
-  Elevation,
   Font,
   Spacing
 } = TokensTheme.default.Global;
@@ -18,6 +17,7 @@ const {
   Background,
   Border,
   Content,
+  Elevation,
   Interaction,
 } = TokensTheme.default.Alias;
 

config/densedLight/index.ts

@@ -8,7 +8,6 @@ import type {
 
 const {
   Color,
-  Elevation,
   Font,
   Spacing
 } = TokensTheme.default.Global;
@@ -18,6 +17,7 @@ const {
   Background,
   Border,
   Content,
+  Elevation,
   Interaction,
 } = TokensTheme.default.Alias;
 

config/index.ts

@@ -8,7 +8,6 @@ import type {
 
 const {
   Color,
-  Elevation,
   Font,
   Spacing
 } = TokensTheme.default.Global;
@@ -18,6 +17,7 @@ const {
   Background,
   Border,
   Content,
+  Elevation,
   Interaction,
 } = TokensTheme.default.Alias;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linode/design-language-system",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
   "module": "dist/index.js",
   "exports": {
@@ -76,5 +76,6 @@
   },
   "volta": {
     "node": "18.14.1"
-  }
+  },
+  "packageManager": "yarn@4.1.0"
 }

stories/ColorSwatch.tsx

@@ -1,23 +1,33 @@
 import React from 'react';
-import { Border } from '../dist/index.js';
+import { Border, Elevation } from '../dist/index.js';
 
 interface ColorSwatchProps {
   /**
    * The color to display
    */
   color: string;
+  /**
+   * The elevation to display
+   */
+  elevation: string;
+  /**
+   * The shape of the swatch
+   */
+  shape: 'circle' | 'square';
 }
 
-export const ColorSwatch = ({ color }: ColorSwatchProps) => {
+export const ColorSwatch = ({ color, elevation, shape }: ColorSwatchProps) => {
+  console.log(elevation)
   return (
     <div
       style={{
         backgroundColor: color,
         border: `1px solid ${Border.Normal}`,
-        borderRadius: '50%',
+        borderRadius: shape === 'square' ? '0' : '50%',
         flexShrink: 0,
         height: '50px',
-        width: '50px'
+        width: '50px',
+        boxShadow: elevation
       }}
     />
   );

stories/Info.tsx

@@ -4,21 +4,23 @@ import { Typography } from './Typography';
 import { formatValue } from './utils';
 
 interface TokenInfoProps {
-  concept?: string;
   color: string;
+  concept?: string;
+  shape?: 'circle' | 'square';
   state?: string;
   type?: string;
   value?: string;
   variant: string;
 }
 
 export const TokenInfo = ({
-  concept,
   color,
+  concept,
+  shape = 'circle',
   state = '',
   type = 'global',
   value,
-  variant
+  variant,
 }: TokenInfoProps) => {
   const hasCategory = type !== 'global';
   const jsConcept = concept ? `${concept}.` : '';
@@ -36,7 +38,7 @@ export const TokenInfo = ({
         padding: '.5rem'
       }}
     >
-      <ColorSwatch color={color} />
+      <ColorSwatch color={color} shape={shape} elevation={variant === 'Elevation' ? color : undefined}/>
       <div>
         <Typography key={value} format={'Hex'} value={color} />
         <Typography

stories/Section.tsx

@@ -4,6 +4,7 @@ import { Border, Font } from '../dist/index.js';
 
 interface SectionProps {
   concept?: string;
+  shape?: 'circle' | 'square';
   stacked?: boolean;
   state?: string;
   title: string;
@@ -25,7 +26,13 @@ export const Section = ({
   const isColorValueString = typeof value === 'string';
 
   const renderValue = (
-    <TokenInfo type={type} color={value} variant={concept} value={variant} />
+    <TokenInfo
+      color={value}
+      shape={concept === 'Elevation' ? 'square' : 'circle'}
+      type={type}
+      value={variant}
+      variant={concept}
+    />
   );
 
   const renderInfo = isColorValueString
@@ -36,6 +43,7 @@ export const Section = ({
             <Section
               concept={concept}
               key={key}
+              shape={concept === 'Elevation' ? 'square' : 'circle'}
               stacked
               state={key}
               title={key}
@@ -50,6 +58,7 @@ export const Section = ({
             color={value as string}
             concept={concept}
             key={state}
+            shape={concept === 'Elevation' ? 'square' : 'circle'}
             state={state}
             type={type}
             value={key}

stories/alias/AliasColors.stories.ts

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Action,
+import {
+  Action,
   Background,
   Border,
   Content,
-  Interaction, } from '../../dist/index.js';
+  Interaction,
+  Elevation
+} from '../../dist/index.js';
 import { AliasColors } from './AliasColors';
 
 const meta = {
@@ -55,3 +58,10 @@ export const Interactions: Story = {
     conceptHeading: 'Interaction'
   },
 };
+
+export const Elevations: Story = {
+  args: {
+    concept: Elevation,
+    conceptHeading: 'Elevation'
+  },
+};

tokens/$metadata.json

@@ -5,9 +5,60 @@
     "alias/densedLight",
     "alias/dark",
     "alias/densedDark",
-    "components/appBar/appBar",
+    "components/advancedSearch/advancedSearch",
+    "components/bars/appbar",
+    "components/badge/badge",
+    "components/breadcrumb/breadcrumb",
     "components/button/button",
+    "components/button/menuButton",
+    "components/button/overflowMenuButton",
+    "components/button/splitMenuButton",
+    "components/button/segmentedButton",
+    "components/calendar/calendar",
+    "components/card/card",
+    "components/checkbox/checkbox",
     "components/container/container",
-    "components/table/table"
+    "components/contentPanel/contentPanel",
+    "components/dateField/dateField",
+    "components/datePicker/datePicker",
+    "components/dateRangePicker/dateRangePicker",
+    "components/dateRangeField/dateRangeField",
+    "components/dateRangeInput/dateRangeInput",
+    "components/divider/divider",
+    "components/drawer/drawer",
+    "components/dropdown/dropdown",
+    "components/globals/header",
+    "components/globals/footer",
+    "components/groupSelect/groupSelect",
+    "components/inlineEdit/inlineEdit",
+    "components/kpiBar/kpiBar",
+    "components/label/label",
+    "components/list/list",
+    "components/masterSwitch/masterSwitch",
+    "components/modal/modal",
+    "components/notificatioBanner/notificationBanner",
+    "components/notificationToast/notificationToast",
+    "components/numericSpinner/numericSpinner",
+    "components/pagination/pagination",
+    "components/popover/popover",
+    "components/progressBar/progressBar",
+    "components/radioButton/radioButton",
+    "components/search/search",
+    "components/sideNavigation/sideNavigation",
+    "components/select/select",
+    "components/sidePanel/sidePanel",
+    "components/stepper/stepper",
+    "components/switch/switch",
+    "components/tabs/tabs",
+    "components/table/table",
+    "components/tagInput/tag",
+    "components/tagInput/tagInput",
+    "components/textArea/textArea",
+    "components/textField/textField",
+    "components/timePicker/timePicker",
+    "components/tooltip/tooltip",
+    "components/tree/tree",
+    "components/widgets/upload",
+    "components/widgets/download"
   ]
 }