@ippon-ui/ui 0.0.2

package/styles/src/token/typography/_typography.scss

@@ -0,0 +1,103 @@
+@use '../../function/conversion';
+
+:root {
+  --ippon-typography-display-font: 'Saira Extra Condensed', sans-serif;
+  --ippon-typography-font: 'Open Sans', sans-serif;
+  --ippon-typography-weight-normal: 400;
+  --ippon-typography-weight-semi-bold: 600;
+  --ippon-typography-weight-bold: 700;
+  --ippon-typography-uppercase: uppercase;
+
+  // Display Large
+  --ippon-typography-display-large-line-height: var(--ippon-size-64);
+  --ippon-typography-display-large-size: var(--ippon-size-56);
+  --ippon-typography-display-large-font: var(--ippon-typography-display-font);
+  --ippon-typography-display-large-weight: var(--ippon-typography-weight-bold);
+  --ippon-typography-display-large-transform: var(--ippon-typography-uppercase);
+
+  // Display Medium
+  --ippon-typography-display-medium-line-height: var(--ippon-size-52);
+  --ippon-typography-display-medium-size: var(--ippon-size-44);
+  --ippon-typography-display-medium-font: var(--ippon-typography-display-font);
+  --ippon-typography-display-medium-weight: var(--ippon-typography-weight-bold);
+  --ippon-typography-display-medium-transform: var(--ippon-typography-uppercase);
+
+  // Display Small
+  --ippon-typography-display-small-line-height: var(--ippon-size-44);
+  --ippon-typography-display-small-size: var(--ippon-size-36);
+  --ippon-typography-display-small-font: var(--ippon-typography-display-font);
+  --ippon-typography-display-small-weight: var(--ippon-typography-weight-bold);
+  --ippon-typography-display-small-transform: var(--ippon-typography-uppercase);
+
+  // Title 1
+  --ippon-typography-title-1-line-height: var(--ippon-size-52);
+  --ippon-typography-title-1-size: var(--ippon-size-48);
+  --ippon-typography-title-1-font: var(--ippon-typography-font);
+  --ippon-typography-title-1-weight: var(--ippon-typography-weight-semi-bold);
+  --ippon-typography-title-1-transform: var(--ippon-typography-uppercase);
+
+  // Title 2
+  --ippon-typography-title-2-line-height: var(--ippon-size-48);
+  --ippon-typography-title-2-size: var(--ippon-size-40);
+  --ippon-typography-title-2-font: var(--ippon-typography-font);
+  --ippon-typography-title-2-weight: var(--ippon-typography-weight-semi-bold);
+  --ippon-typography-title-2-transform: var(--ippon-typography-uppercase);
+
+  // Title 3
+  --ippon-typography-title-3-line-height: var(--ippon-size-44);
+  --ippon-typography-title-3-size: var(--ippon-size-32);
+  --ippon-typography-title-3-font: var(--ippon-typography-font);
+  --ippon-typography-title-3-weight: var(--ippon-typography-weight-semi-bold);
+  --ippon-typography-title-3-transform: var(--ippon-typography-uppercase);
+
+  // Title 4
+  --ippon-typography-title-4-line-height: var(--ippon-size-40);
+  --ippon-typography-title-4-size: var(--ippon-size-28);
+  --ippon-typography-title-4-font: var(--ippon-typography-font);
+  --ippon-typography-title-4-weight: var(--ippon-typography-weight-semi-bold);
+
+  // Title 5
+  --ippon-typography-title-5-line-height: var(--ippon-size-36);
+  --ippon-typography-title-5-size: var(--ippon-size-24);
+  --ippon-typography-title-5-font: var(--ippon-typography-font);
+  --ippon-typography-title-5-weight: var(--ippon-typography-weight-bold);
+
+  // Body large
+  --ippon-typography-body-large-line-height: var(--ippon-size-28);
+  --ippon-typography-body-large-size: var(--ippon-size-20);
+  --ippon-typography-body-large-font: var(--ippon-typography-font);
+  --ippon-typography-body-large-weight: var(--ippon-typography-weight-normal);
+  --ippon-typography-body-large-weight-bold: var(--ippon-typography-weight-bold);
+
+  // Body medium
+  --ippon-typography-body-medium-line-height: var(--ippon-size-24);
+  --ippon-typography-body-medium-size: var(--ippon-size-16);
+  --ippon-typography-body-medium-font: var(--ippon-typography-font);
+  --ippon-typography-body-medium-weight: var(--ippon-typography-weight-normal);
+  --ippon-typography-body-medium-weight-bold: var(--ippon-typography-weight-semi-bold);
+
+  // Body small
+  --ippon-typography-body-small-line-height: var(--ippon-size-16);
+  --ippon-typography-body-small-size: var(--ippon-size-12);
+  --ippon-typography-body-small-font: var(--ippon-typography-font);
+  --ippon-typography-body-small-weight: var(--ippon-typography-weight-normal);
+  --ippon-typography-body-small-weight-bold: var(--ippon-typography-weight-bold);
+
+  // Label large
+  --ippon-typography-label-large-line-height: var(--ippon-size-28);
+  --ippon-typography-label-large-size: var(--ippon-size-20);
+  --ippon-typography-label-large-font: var(--ippon-typography-font);
+  --ippon-typography-label-large-weight: var(--ippon-typography-weight-semi-bold);
+
+  // Label medium
+  --ippon-typography-label-medium-line-height: var(--ippon-size-20);
+  --ippon-typography-label-medium-size: var(--ippon-size-16);
+  --ippon-typography-label-medium-font: var(--ippon-typography-font);
+  --ippon-typography-label-medium-weight: var(--ippon-typography-weight-semi-bold);
+
+  // Label small
+  --ippon-typography-label-small-line-height: var(--ippon-size-16);
+  --ippon-typography-label-small-size: var(--ippon-size-12);
+  --ippon-typography-label-small-font: var(--ippon-typography-font);
+  --ippon-typography-label-small-weight: var(--ippon-typography-weight-semi-bold);
+}

package/styles/src/token/typography/typography.js

@@ -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/styles/src/token/typography/typography.mixin.pug

@@ -0,0 +1,17 @@
+mixin ippon-typography(typography)
+  - const id = `ippon-typography-${typography}`;
+  - const typographyVar = `--ippon-typography-${typography}`;
+  - const ucFirstTypography = typography.charAt(0).toUpperCase() + typography.slice(1);
+  section
+    h3(
+      style=`font-size: var(${typographyVar}-size); font-family: var(${typographyVar}-font); font-weight: var(${typographyVar}-weight); line-height: var(${typographyVar}-line-height); text-transform: var(${typographyVar}-transform);`
+    )= ucFirstTypography
+    table.ipp-doc-table
+      tbody(id=id)
+    script(type='module').
+      import { ipponTokenTypography } from '[[TIKUI_BASEPATH]]token/typography/typography.js';
+
+      (() => {
+        const typographyList = document.getElementById('#{id}');
+        ipponTokenTypography(typographyList, '#{typographyVar}');
+      })();

package/styles/src/token/typography/typography.pug

@@ -0,0 +1,9 @@
+.tikui-vertical-spacing.-s24
+  .tikui-vertical-spacing--line
+    h2#typography.tikui-title-section Typographies
+  .tikui-vertical-spacing--line
+    iframe(
+      src='[[TIKUI_BASEPATH]]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'
+    )

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

@@ -0,0 +1,19 @@
+extends /layout
+
+include typography.mixin.pug
+
+block body
+  +ippon-typography('display-large')
+  +ippon-typography('display-medium')
+  +ippon-typography('display-small')
+  +ippon-typography('title-1')
+  +ippon-typography('title-2')
+  +ippon-typography('title-3')
+  +ippon-typography('title-4')
+  +ippon-typography('title-5')
+  +ippon-typography('body-large')
+  +ippon-typography('body-medium')
+  +ippon-typography('body-small')
+  +ippon-typography('label-small')
+  +ippon-typography('label-medium')
+  +ippon-typography('label-large')

package/styles/test/function/conversion.test.scss

@@ -0,0 +1,20 @@
+@use 'true' as *;
+@use '../../src/function/conversion';
+
+@include test-module('Conversion') {
+  @include test('Should convert 0 to 0') {
+    @include assert-equal(conversion.to-rem(0), 0);
+  }
+
+  @include test('Should convert 16px to 1rem') {
+    @include assert-equal(conversion.to-rem(16px), 1rem);
+  }
+
+  @include test('Should convert 32px to 2rem') {
+    @include assert-equal(conversion.to-rem(32px), 2rem);
+  }
+
+  @include test('Should convert 8px to 0.5rem') {
+    @include assert-equal(conversion.to-rem(8px), 0.5rem);
+  }
+}

package/styles/test/function/sass.spec.ts

@@ -0,0 +1,6 @@
+import path from 'node:path';
+import sassTrue from 'sass-true';
+import { describe, it } from 'vitest';
+
+const sassFile = path.join(__dirname, 'conversion.test.scss');
+sassTrue.runSass({ describe, it }, sassFile);

package/styles/tikuiconfig.json

@@ -0,0 +1,14 @@
+{
+  "documentation": "tikui",
+  "port": 4220,
+  "reloadPort": 4221,
+  "expose": {
+    "node_modules/@fontsource/open-sans/files": "fonts/open-sans/files",
+    "node_modules/@fontsource/open-sans/400.css": "fonts/open-sans/400.css",
+    "node_modules/@fontsource/open-sans/600.css": "fonts/open-sans/600.css",
+    "node_modules/@fontsource/open-sans/700.css": "fonts/open-sans/700.css",
+    "node_modules/@fontsource/saira-extra-condensed/files": "fonts/saira-extra-condensed/files",
+    "node_modules/@fontsource/saira-extra-condensed/700.css": "fonts/saira-extra-condensed/700.css",
+    "node_modules/@ippon-ui/icons/dist": "icons"
+  }
+}

package/styles/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "commonjs" /* Specify what module code is generated. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}