npm - @ippon-ui/styles - Versions diffs - 0.0.2 - Mend

@ippon-ui/styles 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/token/radius/radius.render.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><section><h3>round</h3><table class="ipp-doc-table"><tbody id="ippon-radius-round"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-round');
+  ipponTokenRadius(radiusList, '--ippon-radius-round');
+})();</script></section><section><h3>pill</h3><table class="ipp-doc-table"><tbody id="ippon-radius-pill"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-pill');
+  ipponTokenRadius(radiusList, '--ippon-radius-pill');
+})();</script></section><section><h3>xxl</h3><table class="ipp-doc-table"><tbody id="ippon-radius-xxl"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-xxl');
+  ipponTokenRadius(radiusList, '--ippon-radius-xxl');
+})();</script></section><section><h3>xl</h3><table class="ipp-doc-table"><tbody id="ippon-radius-xl"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-xl');
+  ipponTokenRadius(radiusList, '--ippon-radius-xl');
+})();</script></section><section><h3>l</h3><table class="ipp-doc-table"><tbody id="ippon-radius-l"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-l');
+  ipponTokenRadius(radiusList, '--ippon-radius-l');
+})();</script></section><section><h3>m</h3><table class="ipp-doc-table"><tbody id="ippon-radius-m"></tbody></table><script type="module">import { ipponTokenRadius } from '../../token/radius/radius.js';
+(() => {
+  const radiusList = document.getElementById('ippon-radius-m');
+  ipponTokenRadius(radiusList, '--ippon-radius-m');
+})();</script></section></body></html>

package/dist/token/shadow/shadow.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="shadow">Shadow</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../../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"></iframe></div></div>

package/dist/token/shadow/shadow.js ADDED Viewed

@@ -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/dist/token/shadow/shadow.mixin.html ADDED Viewed

File without changes

package/dist/token/shadow/shadow.render.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><section><h3>l1</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l1"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l1');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l1');
+})();</script></section><section><h3>l2</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l2"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l2');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l2');
+})();</script></section><section><h3>l3</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l3"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l3');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l3');
+})();</script></section><section><h3>l4</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l4"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l4');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l4');
+})();</script></section><section><h3>l5</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l5"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l5');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l5');
+})();</script></section><section><h3>l6</h3><table class="ipp-doc-table"><tbody id="ippon-shadow-l6"></tbody></table><script type="module">import { ipponTokenShadow } from '../../token/shadow/shadow.js';
+(() => {
+  const shadowList = document.getElementById('ippon-shadow-l6');
+  ipponTokenShadow(shadowList, '--ippon-shadow-l6');
+})();</script></section></body></html>

package/dist/token/token.html ADDED Viewed

@@ -0,0 +1 @@

+ <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Tikui - Tokens</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Tikui is a Pattern Library generator."><link rel="stylesheet" href="../documentation/style.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/index.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/700.css"><link rel="stylesheet" href="../lib/prismjs/prism-okaidia.css"></head><body><div class="tikui-template-page"><div class="tikui-template-page--header"><div class="tikui-template-page--header-container"><header class="tikui-header"><div class="tikui-header--slot"><a class="tikui-title-brand" href="../index.html">Tikui</a></div><div class="tikui-header--slot"><nav><ul class="tikui-header-navigation"><li class="tikui-header-navigation--slot"><a class="tikui-header-item -selected" href="../token/token.html"><span class="tikui-header-item--text">Tokens</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../atom/atom.html"><span class="tikui-header-item--text">Atoms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../molecule/molecule.html"><span class="tikui-header-item--text">Molecules</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../organism/organism.html"><span class="tikui-header-item--text">Organisms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../template/template.html"><span class="tikui-header-item--text">Templates</span><span class="tikui-header-item--feedback"></span></a></li></ul></nav></div></header></div></div><div class="tikui-template-page--body" data-navigable><div class="tikui-template-page--container"><div class="tikui-template-page--container-content"><div class="tikui-vertical-spacing -s32"><div class="tikui-vertical-spacing--line"><h1 class="tikui-title-main" id="tokens">Tokens</h1></div><div class="tikui-vertical-spacing--line"><figure class="tikui-quote"><blockquote class="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. »</p></blockquote><figcaption class="tikui-quote--author">Jina Anne</figcaption></figure></div><div class="tikui-vertical-spacing--line"><div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="color">Colors</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../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"></iframe></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="radius">Radius</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../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"></iframe></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="shadow">Shadow</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../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"></iframe></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="typography">Typographies</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../token/typography/typography.render.html" onload="javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+70+"px";}(this));" style="height: 200px; width: 100%; border: none; overflow: hidden"></iframe></div></div></div></div></div></div></div></div><script src="../lib/prismjs/prism.js"></script><script src="../lib/prismjs/prism-pug.js"></script><script src="../documentation/scripts/tikui.js"></script></body></html>

package/dist/token/token.js ADDED Viewed

@@ -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/dist/token/typography/typography.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="tikui-vertical-spacing -s24"><div class="tikui-vertical-spacing--line"><h2 class="tikui-title-section" id="typography">Typographies</h2></div><div class="tikui-vertical-spacing--line"><iframe src="../../token/typography/typography.render.html" onload="javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+70+"px";}(this));" style="height: 200px; width: 100%; border: none; overflow: hidden"></iframe></div></div>

package/dist/token/typography/typography.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { makeTh, makeTextTd, makeLine } from '../token.js';
+export const ipponTokenTypography = (typographyList, typography) => {
+  const makeLineForProp = (name, prop) => {
+    const value = window.getComputedStyle(document.body).getPropertyValue(prop);
+    if (value === undefined || value === '') {
+      return;
+    }
+    const line = makeLine();
+    const tdName = makeTh(name);
+    const tdValue = makeTextTd({ text: value });
+    const tdProp = makeTextTd({ text: prop });
+    line.append(tdName);
+    line.append(tdValue);
+    line.append(tdProp);
+    return line;
+  };
+  const appendToTypographyList = (name, prop) => {
+    const line = makeLineForProp(name, prop);
+    if (line) {
+      typographyList.append(line);
+    }
+  };
+  appendToTypographyList('Font', `${typography}-font`);
+  appendToTypographyList('Transform', `${typography}-transform`);
+  appendToTypographyList('Weight', `${typography}-weight`);
+  appendToTypographyList('Weight bold', `${typography}-weight-bold`);
+  appendToTypographyList('Size', `${typography}-size`);
+  appendToTypographyList('Line height', `${typography}-line-height`);
+};

package/dist/token/typography/typography.mixin.html ADDED Viewed

File without changes

package/dist/token/typography/typography.render.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><section><h3 style="font-size: var(--ippon-typography-display-large-size); font-family: var(--ippon-typography-display-large-font); font-weight: var(--ippon-typography-display-large-weight); line-height: var(--ippon-typography-display-large-line-height); text-transform: var(--ippon-typography-display-large-transform);">Display-large</h3><table class="ipp-doc-table"><tbody id="ippon-typography-display-large"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-display-large');
+  ipponTokenTypography(typographyList, '--ippon-typography-display-large');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-display-medium-size); font-family: var(--ippon-typography-display-medium-font); font-weight: var(--ippon-typography-display-medium-weight); line-height: var(--ippon-typography-display-medium-line-height); text-transform: var(--ippon-typography-display-medium-transform);">Display-medium</h3><table class="ipp-doc-table"><tbody id="ippon-typography-display-medium"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-display-medium');
+  ipponTokenTypography(typographyList, '--ippon-typography-display-medium');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-display-small-size); font-family: var(--ippon-typography-display-small-font); font-weight: var(--ippon-typography-display-small-weight); line-height: var(--ippon-typography-display-small-line-height); text-transform: var(--ippon-typography-display-small-transform);">Display-small</h3><table class="ipp-doc-table"><tbody id="ippon-typography-display-small"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-display-small');
+  ipponTokenTypography(typographyList, '--ippon-typography-display-small');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-title-1-size); font-family: var(--ippon-typography-title-1-font); font-weight: var(--ippon-typography-title-1-weight); line-height: var(--ippon-typography-title-1-line-height); text-transform: var(--ippon-typography-title-1-transform);">Title-1</h3><table class="ipp-doc-table"><tbody id="ippon-typography-title-1"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-title-1');
+  ipponTokenTypography(typographyList, '--ippon-typography-title-1');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-title-2-size); font-family: var(--ippon-typography-title-2-font); font-weight: var(--ippon-typography-title-2-weight); line-height: var(--ippon-typography-title-2-line-height); text-transform: var(--ippon-typography-title-2-transform);">Title-2</h3><table class="ipp-doc-table"><tbody id="ippon-typography-title-2"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-title-2');
+  ipponTokenTypography(typographyList, '--ippon-typography-title-2');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-title-3-size); font-family: var(--ippon-typography-title-3-font); font-weight: var(--ippon-typography-title-3-weight); line-height: var(--ippon-typography-title-3-line-height); text-transform: var(--ippon-typography-title-3-transform);">Title-3</h3><table class="ipp-doc-table"><tbody id="ippon-typography-title-3"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-title-3');
+  ipponTokenTypography(typographyList, '--ippon-typography-title-3');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-title-4-size); font-family: var(--ippon-typography-title-4-font); font-weight: var(--ippon-typography-title-4-weight); line-height: var(--ippon-typography-title-4-line-height); text-transform: var(--ippon-typography-title-4-transform);">Title-4</h3><table class="ipp-doc-table"><tbody id="ippon-typography-title-4"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-title-4');
+  ipponTokenTypography(typographyList, '--ippon-typography-title-4');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-title-5-size); font-family: var(--ippon-typography-title-5-font); font-weight: var(--ippon-typography-title-5-weight); line-height: var(--ippon-typography-title-5-line-height); text-transform: var(--ippon-typography-title-5-transform);">Title-5</h3><table class="ipp-doc-table"><tbody id="ippon-typography-title-5"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-title-5');
+  ipponTokenTypography(typographyList, '--ippon-typography-title-5');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-body-large-size); font-family: var(--ippon-typography-body-large-font); font-weight: var(--ippon-typography-body-large-weight); line-height: var(--ippon-typography-body-large-line-height); text-transform: var(--ippon-typography-body-large-transform);">Body-large</h3><table class="ipp-doc-table"><tbody id="ippon-typography-body-large"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-body-large');
+  ipponTokenTypography(typographyList, '--ippon-typography-body-large');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-body-medium-size); font-family: var(--ippon-typography-body-medium-font); font-weight: var(--ippon-typography-body-medium-weight); line-height: var(--ippon-typography-body-medium-line-height); text-transform: var(--ippon-typography-body-medium-transform);">Body-medium</h3><table class="ipp-doc-table"><tbody id="ippon-typography-body-medium"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-body-medium');
+  ipponTokenTypography(typographyList, '--ippon-typography-body-medium');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-body-small-size); font-family: var(--ippon-typography-body-small-font); font-weight: var(--ippon-typography-body-small-weight); line-height: var(--ippon-typography-body-small-line-height); text-transform: var(--ippon-typography-body-small-transform);">Body-small</h3><table class="ipp-doc-table"><tbody id="ippon-typography-body-small"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-body-small');
+  ipponTokenTypography(typographyList, '--ippon-typography-body-small');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-label-small-size); font-family: var(--ippon-typography-label-small-font); font-weight: var(--ippon-typography-label-small-weight); line-height: var(--ippon-typography-label-small-line-height); text-transform: var(--ippon-typography-label-small-transform);">Label-small</h3><table class="ipp-doc-table"><tbody id="ippon-typography-label-small"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-label-small');
+  ipponTokenTypography(typographyList, '--ippon-typography-label-small');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-label-medium-size); font-family: var(--ippon-typography-label-medium-font); font-weight: var(--ippon-typography-label-medium-weight); line-height: var(--ippon-typography-label-medium-line-height); text-transform: var(--ippon-typography-label-medium-transform);">Label-medium</h3><table class="ipp-doc-table"><tbody id="ippon-typography-label-medium"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-label-medium');
+  ipponTokenTypography(typographyList, '--ippon-typography-label-medium');
+})();</script></section><section><h3 style="font-size: var(--ippon-typography-label-large-size); font-family: var(--ippon-typography-label-large-font); font-weight: var(--ippon-typography-label-large-weight); line-height: var(--ippon-typography-label-large-line-height); text-transform: var(--ippon-typography-label-large-transform);">Label-large</h3><table class="ipp-doc-table"><tbody id="ippon-typography-label-large"></tbody></table><script type="module">import { ipponTokenTypography } from '../../token/typography/typography.js';
+(() => {
+  const typographyList = document.getElementById('ippon-typography-label-large');
+  ipponTokenTypography(typographyList, '--ippon-typography-label-large');
+})();</script></section></body></html>

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@ippon-ui/styles",
+  "version": "0.0.2",
+  "description": "Ippon UI Pattern Library",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "sass": "./dist/tikui.css",
+      "default": "./dist/tikui.css"
+    },
+    "./*": {
+      "sass": "./dist/*",
+      "default": "./dist/*"
+    },
+    "./*.css": {
+      "sass": "./dist/*.css",
+      "default": "./dist/*.css"
+    },
+    "./*.woff": {
+      "sass": "./dist/*.woff",
+      "default": "./dist/*.woff"
+    },
+    "./*.woff2": {
+      "sass": "./dist/*.woff2",
+      "default": "./dist/*.woff2"
+    }
+  },
+  "keywords": [
+    "ui",
+    "ui kit",
+    "design system",
+    "pattern library"
+  ],
+  "license": "Apache-2.0",
+  "author": "Ippon Technologies",
+  "main": "./dist/tikui.css",
+  "devDependencies": {
+    "@fontsource/open-sans": "5.2.7",
+    "@fontsource/saira-extra-condensed": "5.2.7",
+    "@tikui/core": "7.0.1",
+    "postcss-scss": "4.0.9",
+    "sass": "1.99.0",
+    "sass-true": "10.1.0",
+    "stylelint": "17.6.0",
+    "stylelint-config-concentric-order": "5.5.0",
+    "stylelint-config-standard-scss": "17.0.0",
+    "stylelint-order": "8.1.1",
+    "stylelint-scss": "7.0.0",
+    "tikuidoc-tikui": "9.0.1",
+    "vitest": "4.1.4",
+    "@ippon-ui/icons": "0.0.2"
+  },
+  "scripts": {
+    "dev": "tikui-core serve",
+    "serve": "tikui-core serve",
+    "build": "tikui-core build",
+    "preview": "tikui-core preview",
+    "lint": "stylelint \"src/**/*.scss\" --fix",
+    "lint:ci": "stylelint \"src/**/*.scss\"",
+    "test:unit": "vitest",
+    "test:unit:ci": "vitest run",
+    "start:component-test": "tikui-core serve"
+  }
+}