@ippon-ui/ui 0.0.2

package/styles/src/token/_doctable.scss

@@ -0,0 +1,14 @@
+.ipp-doc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--ippon-typography-font);
+
+  &--cell {
+    padding: 0.5rem;
+    text-align: left;
+
+    &.-minimal {
+      width: 0;
+    }
+  }
+}

package/styles/src/token/_doctoken.scss

@@ -0,0 +1 @@
+@use 'doctable';

package/styles/src/token/_size.scss

@@ -0,0 +1,9 @@
+@use '../function/conversion';
+
+$sizes: 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 64, 886, 999;
+
+:root {
+  @each $size in $sizes {
+    --ippon-size-#{$size}: #{conversion.to-rem($size * 1px)};
+  }
+}

package/styles/src/token/_token.scss

@@ -0,0 +1,5 @@
+@use 'color/color';
+@use 'radius/radius';
+@use 'shadow/shadow';
+@use 'typography/typography';
+@use 'size';

package/styles/src/token/color/_color.scss

@@ -0,0 +1,9 @@
+@use 'color/base';
+@use 'color/semantic';
+@use 'color/brand';
+@use 'color/information';
+@use 'color/information-2';
+@use 'color/success';
+@use 'color/error';
+@use 'color/warning';
+@use 'color/neutral';

package/styles/src/token/color/color/_base.scss

@@ -0,0 +1,65 @@
+:root {
+  --ippon-color-brand-klein-100: #e6eeff;
+  --ippon-color-brand-klein-200: #ccd9ff;
+  --ippon-color-brand-klein-300: #99afff;
+  --ippon-color-brand-klein-400: #6685ff;
+  --ippon-color-brand-klein-500: #335cff;
+  --ippon-color-brand-klein-600: #003cdc;
+  --ippon-color-brand-klein-700: #002eb3;
+  --ippon-color-brand-klein-800: #001e8a;
+  --ippon-color-brand-klein-900: #001052;
+  --ippon-color-blue-100: #f1f9ff;
+  --ippon-color-blue-200: #eaf6ff;
+  --ippon-color-blue-300: #d4edff;
+  --ippon-color-blue-400: #74c4ff;
+  --ippon-color-blue-500: #68b0e6;
+  --ippon-color-blue-600: #5d9dcc;
+  --ippon-color-blue-700: #467699;
+  --ippon-color-blue-800: #345873;
+  --ippon-color-blue-900: #294559;
+  --ippon-color-blue-2-100: #e6f4ff;
+  --ippon-color-blue-2-200: #c7e4ff;
+  --ippon-color-blue-2-300: #94c9ff;
+  --ippon-color-blue-2-400: #60acff;
+  --ippon-color-blue-2-500: #2e90fa;
+  --ippon-color-blue-2-600: #0072c6;
+  --ippon-color-blue-2-700: #005c9e;
+  --ippon-color-blue-2-800: #004578;
+  --ippon-color-blue-2-900: #002e52;
+  --ippon-color-green-100: #ebf8f0;
+  --ippon-color-green-200: #e2f5e9;
+  --ippon-color-green-300: #c2ead1;
+  --ippon-color-green-400: #3bba6a;
+  --ippon-color-green-500: #35a75f;
+  --ippon-color-green-600: #2f9555;
+  --ippon-color-green-700: #267d47;
+  --ippon-color-green-800: #1e6338;
+  --ippon-color-green-900: #164d2b;
+  --ippon-color-yellow-100: #fff8ec;
+  --ippon-color-yellow-200: #fff5e3;
+  --ippon-color-yellow-300: #ffe9c5;
+  --ippon-color-yellow-400: #ffb945;
+  --ippon-color-yellow-500: #e6a73e;
+  --ippon-color-yellow-600: #cc9437;
+  --ippon-color-yellow-700: #bf8b34;
+  --ippon-color-yellow-800: #996f29;
+  --ippon-color-yellow-900: #73531f;
+  --ippon-color-orange-100: #fff0eb;
+  --ippon-color-orange-200: #ffe9e1;
+  --ippon-color-orange-300: #ffd1c0;
+  --ippon-color-orange-400: #ff6b34;
+  --ippon-color-orange-500: #e6602f;
+  --ippon-color-orange-600: #cc562a;
+  --ippon-color-orange-700: #bf5027;
+  --ippon-color-orange-800: #99401f;
+  --ippon-color-orange-900: #733017;
+  --ippon-color-red-100: #fce9e9;
+  --ippon-color-red-200: #fbdede;
+  --ippon-color-red-300: #ffc9c9;
+  --ippon-color-red-400: #e12121;
+  --ippon-color-red-500: #cb1e1e;
+  --ippon-color-red-600: #b41a1a;
+  --ippon-color-red-700: #a91919;
+  --ippon-color-red-800: #871414;
+  --ippon-color-red-900: #650f0f;
+}

package/styles/src/token/color/color/_brand.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-brand-surface-primary: var(--ippon-color-default-700);
+  --ippon-color-brand-surface-primary-hover: var(--ippon-color-default-800);
+  --ippon-color-brand-surface-primary-active: var(--ippon-color-default-900);
+  --ippon-color-brand-surface-secondary: var(--ippon-color-default-100);
+  --ippon-color-brand-surface-secondary-hover: var(--ippon-color-default-200);
+  --ippon-color-brand-surface-secondary-active: var(--ippon-color-default-300);
+  --ippon-color-brand-text-icon-primary: var(--ippon-color-default-600);
+  --ippon-color-brand-text-icon-secondary: var(--ippon-color-default-800);
+  --ippon-color-brand-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-brand-text-icon-on-secondary: var(--ippon-color-default-700);
+  --ippon-color-brand-border: var(--ippon-color-default-500);
+}

package/styles/src/token/color/color/_error.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-error-surface-primary: var(--ippon-color-negative-700);
+  --ippon-color-error-surface-primary-hover: var(--ippon-color-negative-800);
+  --ippon-color-error-surface-primary-active: var(--ippon-color-negative-900);
+  --ippon-color-error-surface-secondary: var(--ippon-color-negative-100);
+  --ippon-color-error-surface-secondary-hover: var(--ippon-color-negative-200);
+  --ippon-color-error-surface-secondary-active: var(--ippon-color-negative-300);
+  --ippon-color-error-text-icon-primary: var(--ippon-color-negative-600);
+  --ippon-color-error-text-icon-secondary: var(--ippon-color-negative-800);
+  --ippon-color-error-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-error-text-icon-on-secondary: var(--ippon-color-negative-700);
+  --ippon-color-error-border: var(--ippon-color-negative-500);
+}

package/styles/src/token/color/color/_information-2.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-information-2-surface-primary: var(--ippon-color-information-2-600);
+  --ippon-color-information-2-surface-primary-hover: var(--ippon-color-information-2-700);
+  --ippon-color-information-2-surface-primary-active: var(--ippon-color-information-2-800);
+  --ippon-color-information-2-surface-secondary: var(--ippon-color-information-2-100);
+  --ippon-color-information-2-surface-secondary-hover: var(--ippon-color-information-2-200);
+  --ippon-color-information-2-surface-secondary-active: var(--ippon-color-information-2-300);
+  --ippon-color-information-2-text-icon-primary: var(--ippon-color-information-2-500);
+  --ippon-color-information-2-text-icon-secondary: var(--ippon-color-information-2-600);
+  --ippon-color-information-2-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-information-2-text-icon-on-secondary: var(--ippon-color-information-2-700);
+  --ippon-color-information-2-border: var(--ippon-color-information-2-500);
+}

package/styles/src/token/color/color/_information.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-information-surface-primary: var(--ippon-color-information-700);
+  --ippon-color-information-surface-primary-hover: var(--ippon-color-information-800);
+  --ippon-color-information-surface-primary-active: var(--ippon-color-information-900);
+  --ippon-color-information-surface-secondary: var(--ippon-color-information-100);
+  --ippon-color-information-surface-secondary-hover: var(--ippon-color-information-200);
+  --ippon-color-information-surface-secondary-active: var(--ippon-color-information-300);
+  --ippon-color-information-text-icon-primary: var(--ippon-color-information-600);
+  --ippon-color-information-text-icon-secondary: var(--ippon-color-information-800);
+  --ippon-color-information-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-information-text-icon-on-secondary: var(--ippon-color-information-700);
+  --ippon-color-information-border: var(--ippon-color-information-500);
+}

package/styles/src/token/color/color/_neutral.scss

@@ -0,0 +1,20 @@
+:root {
+  --ippon-color-neutral-surface-primary: var(--ippon-color-neutral-0);
+  --ippon-color-neutral-surface-primary-hover: var(--ippon-color-neutral-100);
+  --ippon-color-neutral-surface-primary-active: var(--ippon-color-neutral-200);
+  --ippon-color-neutral-surface-secondary: var(--ippon-color-neutral-100);
+  --ippon-color-neutral-surface-secondary-hover: var(--ippon-color-neutral-200);
+  --ippon-color-neutral-surface-secondary-active: var(--ippon-color-neutral-300);
+  --ippon-color-neutral-surface-secondary2: var(--ippon-color-neutral-150);
+  --ippon-color-neutral-surface-tertiary: var(--ippon-color-neutral-300);
+  --ippon-color-neutral-surface-tertiary-hover: var(--ippon-color-neutral-400);
+  --ippon-color-neutral-surface-tertiary-active: var(--ippon-color-neutral-500);
+  --ippon-color-neutral-text-icon-primary: var(--ippon-color-neutral-900);
+  --ippon-color-neutral-text-icon-secondary: var(--ippon-color-neutral-800);
+  --ippon-color-neutral-text-icon-tertiary: var(--ippon-color-neutral-600);
+  --ippon-color-neutral-text-icon-tertiary-inversed: var(--ippon-color-neutral-400);
+  --ippon-color-neutral-text-icon-on-primary: var(--ippon-color-neutral-900);
+  --ippon-color-neutral-text-icon-on-secondary: var(--ippon-color-neutral-700);
+  --ippon-color-neutral-text-icon-on-tertiary: var(--ippon-color-neutral-900);
+  --ippon-color-neutral-border: var(--ippon-color-neutral-300);
+}

package/styles/src/token/color/color/_semantic.scss

@@ -0,0 +1,69 @@
+:root {
+  --ippon-color-neutral-0: #fff;
+  --ippon-color-neutral-50: #fbfcfe;
+  --ippon-color-neutral-100: #f9fafb;
+  --ippon-color-neutral-150: #eff2f6;
+  --ippon-color-neutral-200: #eaecf0;
+  --ippon-color-neutral-300: #d0d5dd;
+  --ippon-color-neutral-400: #98a2b3;
+  --ippon-color-neutral-500: #667085;
+  --ippon-color-neutral-600: #475467;
+  --ippon-color-neutral-700: #344054;
+  --ippon-color-neutral-800: #1d2939;
+  --ippon-color-neutral-900: #191919;
+  --ippon-color-neutral-999: #000;
+  --ippon-color-default-100: var(--ippon-color-brand-klein-100);
+  --ippon-color-default-200: var(--ippon-color-brand-klein-200);
+  --ippon-color-default-300: var(--ippon-color-brand-klein-300);
+  --ippon-color-default-400: var(--ippon-color-brand-klein-400);
+  --ippon-color-default-500: var(--ippon-color-brand-klein-500);
+  --ippon-color-default-600: var(--ippon-color-brand-klein-600);
+  --ippon-color-default-700: var(--ippon-color-brand-klein-700);
+  --ippon-color-default-800: var(--ippon-color-brand-klein-800);
+  --ippon-color-default-900: var(--ippon-color-brand-klein-900);
+  --ippon-color-positive-100: var(--ippon-color-green-100);
+  --ippon-color-positive-200: var(--ippon-color-green-200);
+  --ippon-color-positive-300: var(--ippon-color-green-300);
+  --ippon-color-positive-400: var(--ippon-color-green-400);
+  --ippon-color-positive-500: var(--ippon-color-green-500);
+  --ippon-color-positive-600: var(--ippon-color-green-600);
+  --ippon-color-positive-700: var(--ippon-color-green-700);
+  --ippon-color-positive-800: var(--ippon-color-green-800);
+  --ippon-color-positive-900: var(--ippon-color-green-900);
+  --ippon-color-information-100: var(--ippon-color-blue-100);
+  --ippon-color-information-200: var(--ippon-color-blue-200);
+  --ippon-color-information-300: var(--ippon-color-blue-300);
+  --ippon-color-information-400: var(--ippon-color-blue-400);
+  --ippon-color-information-500: var(--ippon-color-blue-500);
+  --ippon-color-information-600: var(--ippon-color-blue-600);
+  --ippon-color-information-700: var(--ippon-color-blue-700);
+  --ippon-color-information-800: var(--ippon-color-blue-800);
+  --ippon-color-information-900: var(--ippon-color-blue-900);
+  --ippon-color-information-2-100: var(--ippon-color-blue-2-100);
+  --ippon-color-information-2-200: var(--ippon-color-blue-2-200);
+  --ippon-color-information-2-300: var(--ippon-color-blue-2-300);
+  --ippon-color-information-2-400: var(--ippon-color-blue-2-400);
+  --ippon-color-information-2-500: var(--ippon-color-blue-2-500);
+  --ippon-color-information-2-600: var(--ippon-color-blue-2-600);
+  --ippon-color-information-2-700: var(--ippon-color-blue-2-700);
+  --ippon-color-information-2-800: var(--ippon-color-blue-2-800);
+  --ippon-color-information-2-900: var(--ippon-color-blue-2-900);
+  --ippon-color-negative-100: var(--ippon-color-red-100);
+  --ippon-color-negative-200: var(--ippon-color-red-200);
+  --ippon-color-negative-300: var(--ippon-color-red-300);
+  --ippon-color-negative-400: var(--ippon-color-red-400);
+  --ippon-color-negative-500: var(--ippon-color-red-500);
+  --ippon-color-negative-600: var(--ippon-color-red-600);
+  --ippon-color-negative-700: var(--ippon-color-red-700);
+  --ippon-color-negative-800: var(--ippon-color-red-800);
+  --ippon-color-negative-900: var(--ippon-color-red-900);
+  --ippon-color-warning-100: var(--ippon-color-yellow-100);
+  --ippon-color-warning-200: var(--ippon-color-yellow-200);
+  --ippon-color-warning-300: var(--ippon-color-yellow-300);
+  --ippon-color-warning-400: var(--ippon-color-yellow-400);
+  --ippon-color-warning-500: var(--ippon-color-yellow-500);
+  --ippon-color-warning-600: var(--ippon-color-yellow-600);
+  --ippon-color-warning-700: var(--ippon-color-yellow-700);
+  --ippon-color-warning-800: var(--ippon-color-yellow-800);
+  --ippon-color-warning-900: var(--ippon-color-yellow-900);
+}

package/styles/src/token/color/color/_success.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-success-surface-primary: var(--ippon-color-positive-700);
+  --ippon-color-success-surface-primary-hover: var(--ippon-color-positive-800);
+  --ippon-color-success-surface-primary-active: var(--ippon-color-positive-900);
+  --ippon-color-success-surface-secondary: var(--ippon-color-positive-100);
+  --ippon-color-success-surface-secondary-hover: var(--ippon-color-positive-200);
+  --ippon-color-success-surface-secondary-active: var(--ippon-color-positive-300);
+  --ippon-color-success-text-icon-primary: var(--ippon-color-positive-600);
+  --ippon-color-success-text-icon-secondary: var(--ippon-color-positive-800);
+  --ippon-color-success-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-success-text-icon-on-secondary: var(--ippon-color-positive-700);
+  --ippon-color-success-border: var(--ippon-color-positive-500);
+}

package/styles/src/token/color/color/_warning.scss

@@ -0,0 +1,13 @@
+:root {
+  --ippon-color-warning-surface-primary: var(--ippon-color-warning-700);
+  --ippon-color-warning-surface-primary-hover: var(--ippon-color-warning-800);
+  --ippon-color-warning-surface-primary-active: var(--ippon-color-warning-900);
+  --ippon-color-warning-surface-secondary: var(--ippon-color-warning-100);
+  --ippon-color-warning-surface-secondary-hover: var(--ippon-color-warning-200);
+  --ippon-color-warning-surface-secondary-active: var(--ippon-color-warning-300);
+  --ippon-color-warning-text-icon-primary: var(--ippon-color-warning-600);
+  --ippon-color-warning-text-icon-secondary: var(--ippon-color-warning-800);
+  --ippon-color-warning-text-icon-on-primary: var(--ippon-color-neutral-0);
+  --ippon-color-warning-text-icon-on-secondary: var(--ippon-color-warning-700);
+  --ippon-color-warning-border: var(--ippon-color-warning-500);
+}

package/styles/src/token/color/color.js

@@ -0,0 +1,31 @@
+import { makeTextTd } from '../token.js';
+
+export const ipponTokenColor = (colorsList, color) => {
+  const colors = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 999].flatMap((quantity) => {
+    const prop = `${color}-${quantity}`;
+    const value = window.getComputedStyle(document.body).getPropertyValue(prop);
+    if (value === undefined || value === '') {
+      return [];
+    }
+    return [{ prop, value }];
+  });
+
+  const addToColorsList = ({ prop, value }) => {
+    const tr = document.createElement('tr');
+    const tdName = makeTextTd({ text: prop });
+    const tdValue = makeTextTd({ text: value.toString(), minimal: true });
+    const tdPreview = makeTextTd({ minimal: true });
+    const previewBox = document.createElement('div');
+    previewBox.style.width = '40px';
+    previewBox.style.height = '20px';
+    previewBox.style.backgroundColor = value.toString();
+    previewBox.style.border = '1px solid #0000001A';
+    tdPreview.appendChild(previewBox);
+    tr.appendChild(tdName);
+    tr.appendChild(tdValue);
+    tr.appendChild(tdPreview);
+    colorsList.append(tr);
+  };
+
+  colors.forEach((color) => addToColorsList(color));
+};

package/styles/src/token/color/color.mixin.pug

@@ -0,0 +1,19 @@
+mixin ippon-color(color)
+  - const id = `ippon-color-${color}`;
+  - const colorVar = `--ippon-color-${color}`;
+  section
+    h3= color
+    table.ipp-doc-table
+      thead
+        tr
+          th.ipp-doc-table--cell Name
+          th.ipp-doc-table--cell Value
+          th.ipp-doc-table--cell Preview
+      tbody(id=id)
+    script(type='module').
+      import { ipponTokenColor } from '[[TIKUI_BASEPATH]]token/color/color.js';
+
+      (() => {
+        const colorsList = document.getElementById('#{id}');
+        ipponTokenColor(colorsList, '#{colorVar}');
+      })();

package/styles/src/token/color/color.pug

@@ -0,0 +1,9 @@
+.tikui-vertical-spacing.-s24
+  .tikui-vertical-spacing--line
+    h2#color.tikui-title-section Colors
+  .tikui-vertical-spacing--line
+    iframe(
+      src='[[TIKUI_BASEPATH]]token/color/color.render.html',
+      onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+30+"px";}(this));',
+      style='height: 200px; width: 100%; border: none; overflow: hidden'
+    )

package/styles/src/token/color/color.render.pug

@@ -0,0 +1,13 @@
+extends /layout
+
+include color.mixin.pug
+
+block body
+  +ippon-color('neutral')
+  +ippon-color('brand-klein')
+  +ippon-color('information')
+  +ippon-color('information-2')
+  +ippon-color('positive')
+  +ippon-color('negative')
+  +ippon-color('warning')
+  +ippon-color('orange')

package/styles/src/token/radius/_radius.scss

@@ -0,0 +1,8 @@
+:root {
+  --ippon-radius-round: 50%;
+  --ippon-radius-pill: var(--ippon-size-999);
+  --ippon-radius-xxl: var(--ippon-size-16);
+  --ippon-radius-xl: var(--ippon-size-12);
+  --ippon-radius-l: var(--ippon-size-8);
+  --ippon-radius-m: var(--ippon-size-4);
+}

package/styles/src/token/radius/radius.js

@@ -0,0 +1,54 @@
+import { makeContentTd, makeTextTd, makeTh, makeLine, propToValue } from '../token.js';
+
+export const ipponTokenRadius = (radiusList, radius) => {
+  const makeKeyContentLine = (key, content) => {
+    if (content === undefined || content === null) {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeContentTd({ content });
+    line.append(thKey);
+    line.append(tdValue);
+
+    return line;
+  };
+
+  const makeKeyValueLine = (key, value) => {
+    if (value === undefined || value === '') {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeTextTd({ text: value });
+    line.append(thKey);
+    line.append(tdValue);
+
+    return line;
+  };
+
+  const appendValueToRadiusList = (key, value) => {
+    const line = makeKeyValueLine(key, value);
+    if (line) {
+      radiusList.append(line);
+    }
+  };
+
+  const appendContentToRadiusList = (key, content) => {
+    const line = makeKeyContentLine(key, content);
+    if (line) {
+      radiusList.append(line);
+    }
+  };
+
+  appendValueToRadiusList('Name', radius);
+  appendValueToRadiusList('Size', propToValue(radius));
+  const previewBox = document.createElement('div');
+  previewBox.style.width = '100px';
+  previewBox.style.height = '50px';
+  previewBox.style.borderRadius = `var(${radius})`;
+  previewBox.style.backgroundColor = '#000';
+  previewBox.style.boxShadow = '0 0 3px #fff';
+
+  appendContentToRadiusList('Preview', previewBox);
+};

package/styles/src/token/radius/radius.mixin.pug

@@ -0,0 +1,14 @@
+mixin ippon-radius(radius)
+  - const id = `ippon-radius-${radius}`;
+  - const radiusVar = `--ippon-radius-${radius}`;
+  section
+    h3= radius
+    table.ipp-doc-table
+      tbody(id=id)
+    script(type='module').
+      import { ipponTokenRadius } from '[[TIKUI_BASEPATH]]token/radius/radius.js';
+
+      (() => {
+        const radiusList = document.getElementById('#{id}');
+        ipponTokenRadius(radiusList, '#{radiusVar}');
+      })();

package/styles/src/token/radius/radius.pug

@@ -0,0 +1,9 @@
+.tikui-vertical-spacing.-s24
+  .tikui-vertical-spacing--line
+    h2#radius.tikui-title-section Radius
+  .tikui-vertical-spacing--line
+    iframe(
+      src='[[TIKUI_BASEPATH]]token/radius/radius.render.html',
+      onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+30+"px";}(this));',
+      style='height: 200px; width: 100%; border: none; overflow: hidden'
+    )

package/styles/src/token/radius/radius.render.pug

@@ -0,0 +1,11 @@
+extends /layout
+
+include radius.mixin.pug
+
+block body
+  +ippon-radius('round')
+  +ippon-radius('pill')
+  +ippon-radius('xxl')
+  +ippon-radius('xl')
+  +ippon-radius('l')
+  +ippon-radius('m')

package/styles/src/token/shadow/_shadow.scss

@@ -0,0 +1,22 @@
+$shadow-levels: 1, 2, 3, 4, 5, 6;
+
+:root {
+  --ippon-shadow-l1:
+    0px 0px 2px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 2px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent);
+  --ippon-shadow-l2:
+    0px 0px 4px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 4px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);
+  --ippon-shadow-l3:
+    0px 0px 6px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 8px 16px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);
+  --ippon-shadow-l4:
+    0px 0px 8px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 10px 20px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);
+  --ippon-shadow-l5:
+    0px 0px 10px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 12px 24px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);
+  --ippon-shadow-l6:
+    0px 0px 12px color-mix(in srgb, var(--ippon-color-neutral-999) 8%, transparent),
+    0px 16px 32px color-mix(in srgb, var(--ippon-color-neutral-999) 10%, transparent);
+}

package/styles/src/token/shadow/shadow.js

@@ -0,0 +1,45 @@
+import { makeContentTd, makeTextTd, makeTh, makeLine, propToValue } from '../token.js';
+export const ipponTokenShadow = (shadowList, shadow) => {
+  const makeKeyValueLine = (key, value) => {
+    if (value === undefined || value === '') {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeTextTd({ text: value });
+    line.append(thKey);
+    line.append(tdValue);
+    return line;
+  };
+  const makeKeyContentLine = (key, content) => {
+    if (content === undefined || content === null) {
+      return;
+    }
+    const line = makeLine();
+    const thKey = makeTh(key);
+    const tdValue = makeContentTd({ content });
+    line.append(thKey);
+    line.append(tdValue);
+    return line;
+  };
+  const appendValueToShadowList = (key, value) => {
+    const line = makeKeyValueLine(key, value);
+    if (line) {
+      shadowList.append(line);
+    }
+  };
+  const appendContentToShadowList = (key, content) => {
+    const line = makeKeyContentLine(key, content);
+    if (line) {
+      shadowList.append(line);
+    }
+  };
+  appendValueToShadowList('Name', shadow);
+  appendValueToShadowList('Value', propToValue(shadow));
+  const previewBox = document.createElement('div');
+  previewBox.style.width = '100px';
+  previewBox.style.height = '50px';
+  previewBox.style.boxShadow = `var(${shadow})`;
+  previewBox.style.backgroundColor = '#fff';
+  appendContentToShadowList('Preview', previewBox);
+};

package/styles/src/token/shadow/shadow.mixin.pug

@@ -0,0 +1,13 @@
+mixin ippon-shadow(level)
+  - const id = `ippon-shadow-${level}`;
+  - const shadowVar = `--ippon-shadow-${level}`;
+  section
+    h3= level
+    table.ipp-doc-table
+      tbody(id=id)
+    script(type='module').
+      import { ipponTokenShadow } from '[[TIKUI_BASEPATH]]token/shadow/shadow.js';
+      (() => {
+        const shadowList = document.getElementById('#{id}');
+        ipponTokenShadow(shadowList, '#{shadowVar}');
+      })();

package/styles/src/token/shadow/shadow.pug

@@ -0,0 +1,9 @@
+.tikui-vertical-spacing.-s24
+  .tikui-vertical-spacing--line
+    h2#shadow.tikui-title-section Shadow
+  .tikui-vertical-spacing--line
+    iframe(
+      src='[[TIKUI_BASEPATH]]token/shadow/shadow.render.html',
+      onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+80+"px";}(this));',
+      style='height: 200px; width: 100%; border: none; overflow: hidden'
+    )

package/styles/src/token/shadow/shadow.render.pug

@@ -0,0 +1,9 @@
+extends /layout
+include shadow.mixin.pug
+block body
+  +ippon-shadow('l1')
+  +ippon-shadow('l2')
+  +ippon-shadow('l3')
+  +ippon-shadow('l4')
+  +ippon-shadow('l5')
+  +ippon-shadow('l6')

package/styles/src/token/token.js

@@ -0,0 +1,38 @@
+export const makeTd = ({ minimal } = {}) => {
+  const td = document.createElement('td');
+  td.classList.add('ipp-doc-table--cell');
+  if (minimal) {
+    td.classList.add('-minimal');
+  }
+  return td;
+};
+
+export const makeContentTd = ({ content, minimal } = {}) => {
+  const td = makeTd({ minimal });
+  if (content) {
+    td.append(content);
+  }
+  return td;
+};
+
+export const makeTextTd = ({ text, minimal } = {}) => {
+  const td = makeTd({ minimal });
+  if (text) {
+    td.textContent = text;
+  }
+  return td;
+};
+
+export const makeTh = (content) => {
+  const th = document.createElement('th');
+  if (content) {
+    th.textContent = content;
+  }
+  th.classList.add('ipp-doc-table--cell');
+  th.classList.add('-minimal');
+  return th;
+};
+
+export const makeLine = () => document.createElement('tr');
+
+export const propToValue = (prop) => window.getComputedStyle(document.body).getPropertyValue(prop);

package/styles/src/token/token.pug

@@ -0,0 +1,25 @@
+extends /layout-documentation
+
+block append vars
+  - active = 'token';
+
+block title
+  title Tikui - Tokens
+
+block content
+  .tikui-vertical-spacing.-s32
+    .tikui-vertical-spacing--line
+      h1#tokens.tikui-title-main Tokens
+    .tikui-vertical-spacing--line
+      figure.tikui-quote
+        blockquote.tikui-quote--text
+          p « Design Tokens are a methodology. IMHO, saying “design tokens are just variables” is like saying “responsive design is just media queries”. It’s a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more. »
+        figcaption.tikui-quote--author Jina Anne
+    .tikui-vertical-spacing--line
+      include color/color
+    .tikui-vertical-spacing--line
+      include radius/radius
+    .tikui-vertical-spacing--line
+      include shadow/shadow
+    .tikui-vertical-spacing--line
+      include typography/typography