@ippon-ui/ui 0.0.2

package/styles/src/atom/text/_text.scss

@@ -0,0 +1,74 @@
+@use '../../quark/typography';
+@use '../../quark/font';
+@use '../../quark/placeholder';
+
+.ippon-text {
+  @include font.colors;
+
+  margin: 0;
+  padding: 0;
+
+  &.-placeholder {
+    min-width: 10rem;
+  }
+
+  &.-body {
+    @include typography.body-medium;
+
+    &.-placeholder {
+      @include placeholder.placeholder(var(--ippon-typography-body-medium-line-height));
+    }
+
+    &.-bold {
+      @include typography.body-medium-bold;
+    }
+
+    &.-small {
+      @include typography.body-small;
+
+      &.-placeholder {
+        @include placeholder.placeholder(var(--ippon-typography-body-small-line-height));
+      }
+
+      &.-bold {
+        @include typography.body-small-bold;
+      }
+    }
+
+    &.-large {
+      @include typography.body-large;
+
+      &.-placeholder {
+        @include placeholder.placeholder(var(--ippon-typography-body-large-line-height));
+      }
+
+      &.-bold {
+        @include typography.body-large-bold;
+      }
+    }
+  }
+
+  &.-label {
+    @include typography.label-medium;
+
+    &.-placeholder {
+      @include placeholder.placeholder(var(--ippon-typography-label-medium-line-height));
+    }
+
+    &.-small {
+      @include typography.label-small;
+
+      &.-placeholder {
+        @include placeholder.placeholder(var(--ippon-typography-label-small-line-height));
+      }
+    }
+
+    &.-large {
+      @include typography.label-large;
+
+      &.-placeholder {
+        @include placeholder.placeholder(var(--ippon-typography-label-large-line-height));
+      }
+    }
+  }
+}

package/styles/src/atom/text/text.code.pug

@@ -0,0 +1,19 @@
+include text.mixin.pug
+
++ippon-text({ variant: 'body', size: 'small' }) Body Small
++ippon-text({ variant: 'body', size: 'small', weight: 'bold' }) Body Small bold
++ippon-text({ variant: 'body' }) Body Medium
++ippon-text({ variant: 'body', weight: 'bold' }) Body Medium bold
++ippon-text({ variant: 'body', size: 'large' }) Body Large
++ippon-text({ variant: 'body', size: 'large', weight: 'bold' }) Body Large bold
++ippon-text({ variant: 'label', size: 'small' }) Label Small
++ippon-text({ variant: 'label', size: 'small', weight: 'bold' }) Label Small bold
++ippon-text({ variant: 'label' }) Label Medium
++ippon-text({ variant: 'label', weight: 'bold' }) Label Medium bold
++ippon-text({ variant: 'label', size: 'large' }) Label Large
++ippon-text({ variant: 'label', size: 'large', weight: 'bold' }) Label Large bold
++ippon-text({ variant: 'body', color: 'neutral-tertiary-inversed' }) Color Neutral Tertiary Inversed
++ippon-text({ variant: 'body', size: 'small', placeholder: true })
++ippon-text({ variant: 'body', placeholder: true })
++ippon-text({ variant: 'body', size: 'large', placeholder: true })
++ippon-text({ variant: 'label', placeholder: true })

package/styles/src/atom/text/text.md

@@ -0,0 +1,5 @@
+## Text
+
+**Placeholder (Loading State)**
+
+The `-placeholder` alternative displays a shimmer animation, typically used during content loading.

package/styles/src/atom/text/text.mixin.pug

@@ -0,0 +1,12 @@
+mixin ippon-text(options)
+  - const { size, variant, weight, color, tag, placeholder } = options || {};
+  - const sizeClass = size ? `-${size}` : null;
+  - const variantClass = variant ? `-${variant}` : null;
+  - const weightClass = weight ? `-${weight}` : null;
+  - const colorClass = color ? `-color-${color}` : null;
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  #{tag || 'span'}.ippon-text(
+    class=[sizeClass, variantClass, weightClass, colorClass, placeholderClass]
+  )
+    if !placeholder
+      block

package/styles/src/atom/text/text.render.pug

@@ -0,0 +1,7 @@
+extends /layout
+
+block body
+  div(
+    style='display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: left'
+  )
+    include text.code.pug

package/styles/src/atom/title/_title.scss

@@ -0,0 +1,68 @@
+@use '../../quark/typography';
+@use '../../quark/placeholder';
+
+@mixin ippon-title($level) {
+  $tag: h#{$level};
+  $alternative: -l#{$level};
+  #{$tag}.ippon-title,
+  .ippon-title.#{$alternative} {
+    @content;
+  }
+}
+
+@mixin ippon-title-placeholder($level) {
+  $tag: h#{$level};
+  $alternative: -l#{$level};
+  #{$tag}.ippon-title.-placeholder,
+  .ippon-title.#{$alternative}.-placeholder {
+    @content;
+  }
+}
+
+.ippon-title {
+  margin: 0;
+
+  &.-placeholder {
+    min-width: 12rem;
+  }
+}
+
+@include ippon-title(1) {
+  @include typography.title-1;
+}
+
+@include ippon-title-placeholder(1) {
+  @include placeholder.placeholder(var(--ippon-typography-title-1-line-height));
+}
+
+@include ippon-title(2) {
+  @include typography.title-2;
+}
+
+@include ippon-title-placeholder(2) {
+  @include placeholder.placeholder(var(--ippon-typography-title-2-line-height));
+}
+
+@include ippon-title(3) {
+  @include typography.title-3;
+}
+
+@include ippon-title-placeholder(3) {
+  @include placeholder.placeholder(var(--ippon-typography-title-3-line-height));
+}
+
+@include ippon-title(4) {
+  @include typography.title-4;
+}
+
+@include ippon-title-placeholder(4) {
+  @include placeholder.placeholder(var(--ippon-typography-title-4-line-height));
+}
+
+@include ippon-title(5) {
+  @include typography.title-5;
+}
+
+@include ippon-title-placeholder(5) {
+  @include placeholder.placeholder(var(--ippon-typography-title-5-line-height));
+}

package/styles/src/atom/title/title.code.pug

@@ -0,0 +1,25 @@
+include title.mixin.pug
+
++ippon-title({ tag: 'h1' })
++ippon-title({ tag: 'h2' })
++ippon-title({ tag: 'h3' })
++ippon-title({ tag: 'h4' })
++ippon-title({ tag: 'h5' })
+
++ippon-title({ tag: 'h2', level: 1 })
++ippon-title({ tag: 'h1', level: 2 })
++ippon-title({ tag: 'h5', level: 3 })
++ippon-title({ tag: 'h2', level: 4 })
++ippon-title({ tag: 'h3', level: 5 })
+
++ippon-title({ tag: 'h1', placeholder: true })
++ippon-title({ tag: 'h2', placeholder: true })
++ippon-title({ tag: 'h3', placeholder: true })
++ippon-title({ tag: 'h4', placeholder: true })
++ippon-title({ tag: 'h5', placeholder: true })
+
++ippon-title({ tag: 'h2', level: 1, placeholder: true })
++ippon-title({ tag: 'h1', level: 2, placeholder: true })
++ippon-title({ tag: 'h5', level: 3, placeholder: true })
++ippon-title({ tag: 'h2', level: 4, placeholder: true })
++ippon-title({ tag: 'h3', level: 5, placeholder: true })

package/styles/src/atom/title/title.md

@@ -0,0 +1,9 @@
+## Title
+
+The `title` will have an associated size depending on the heading level (e.g., `h1`, `h2`, …).
+
+Alternatives classes can be used to change the **level** using alternative classes (e.g., `-l1`, `-l2`, …).
+
+**Placeholder (Loading State)**
+
+The `-placeholder` alternative displays a shimmer animation, typically used during content loading.

package/styles/src/atom/title/title.mixin.pug

@@ -0,0 +1,12 @@
+mixin ippon-title(options)
+  - const { tag = 'div', level, placeholder } = options || {};
+  - const titleTag = `Title ${tag}`;
+  - const titleName = level ? `${titleTag} (alternative level ${level})` : titleTag;
+  - const alternativeClass = level ? `-l${level}` : null;
+  - const placeholderClass = placeholder ? '-placeholder' : null;
+  #{tag}.ippon-title(class=[alternativeClass, placeholderClass])
+    if !placeholder
+      if block
+        block
+      else
+        | #{ titleName }

package/styles/src/atom/title/title.render.pug

@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  div(style='display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start')
+    include title.code.pug

package/styles/src/atom/title-display/_title-display.scss

@@ -0,0 +1,26 @@
+@use '../../quark/typography';
+
+@mixin ippon-title-display($level, $size) {
+  $tag: h#{$level};
+  $alternative: -#{$size};
+  #{$tag}.ippon-title-display,
+  .ippon-title-display.#{$alternative} {
+    @content;
+  }
+}
+
+.ippon-title-display {
+  margin: 0;
+}
+
+@include ippon-title-display(1, 'large') {
+  @include typography.display-large;
+}
+
+@include ippon-title-display(2, 'medium') {
+  @include typography.display-medium;
+}
+
+@include ippon-title-display(3, 'small') {
+  @include typography.display-small;
+}

package/styles/src/atom/title-display/title-display.code.pug

@@ -0,0 +1,9 @@
+include title-display.mixin.pug
+
++ippon-title-display({ tag: 'h1' })
++ippon-title-display({ tag: 'h2' })
++ippon-title-display({ tag: 'h3' })
+
++ippon-title-display({ tag: 'h2', size: 'large' })
++ippon-title-display({ tag: 'h1', size: 'medium' })
++ippon-title-display({ tag: 'h5', size: 'small' })

package/styles/src/atom/title-display/title-display.md

@@ -0,0 +1,5 @@
+## Title display
+
+The `title-display` will have an associated size depending on the heading level (e.g., `h1`, `h2`, …).
+
+Alternatives classes can be used to change the size using alternative classes (e.g., `-large`, `-medium`, …).

package/styles/src/atom/title-display/title-display.mixin.pug

@@ -0,0 +1,6 @@
+mixin ippon-title-display(options)
+  - const { tag = 'div', size } = options || {};
+  - const displayTag = `Title display ${tag}`;
+  - const displayName = size ? `${displayTag} (alternative ${size})` : displayTag;
+  - const alternativeClass = size ? `-${size}` : null;
+  #{tag}.ippon-title-display(class=[alternativeClass])= displayName

package/styles/src/atom/title-display/title-display.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include title-display.code.pug

package/styles/src/doc.scss

@@ -0,0 +1,2 @@
+@use 'token/doctoken';
+@use 'organism/docorganism';

package/styles/src/function/_conversion.scss

@@ -0,0 +1,9 @@
+@use 'sass:math';
+
+@function to-rem($value) {
+  @if $value == 0 {
+    @return 0;
+  }
+
+  @return math.div($value, 16px) * 1rem;
+}

package/styles/src/index.pug

@@ -0,0 +1,59 @@
+extends /layout-documentation
+
+block title
+  title Tikui
+
+block content
+  .tikui-vertical-spacing.-s32
+    .tikui-vertical-spacing--line
+      h1.tikui-title-main Tikui pattern library
+    .tikui-vertical-spacing--line
+      .tikui-vertical-spacing.-s24
+        .tikui-vertical-spacing--line
+          h2.tikui-title-section Use
+        .tikui-vertical-spacing--line
+          p.tikui-paragraph Import style using #[strong <link>] tag and replace #[strong {DOMAIN}] with the current domain:
+        .tikui-vertical-spacing--line
+          p.tikui-paragraph
+            em HTML
+        .tikui-vertical-spacing--line
+          pre
+            code.language-html
+              | #{ '<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />' }
+              |
+              | #{ '<link href="{DOMAIN}/fonts/open-sans/400.css" rel="stylesheet" />' }
+              | #{ '<link href="{DOMAIN}/fonts/open-sans/600.css" rel="stylesheet" />' }
+              | #{ '<link href="{DOMAIN}/fonts/open-sans/700.css" rel="stylesheet" />' }
+              | #{ '<link href="{DOMAIN}/fonts/saira-extra-condensed/700.css" rel="stylesheet" />' }
+              | #{ '<link href="{DOMAIN}/icons/ionicons.css" rel="stylesheet" />' }
+              | #{ '<link rel="stylesheet" href="{DOMAIN}/tikui.css" />' }
+        .tikui-vertical-spacing--line
+          p.tikui-paragraph
+            em Pug
+        .tikui-vertical-spacing--line
+          pre
+            code.language-pug.
+              meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
+
+              link(href='{DOMAIN}/fonts/open-sans/400.css' rel='stylesheet')
+              link(href='{DOMAIN}/fonts/open-sans/600.css' rel='stylesheet')
+              link(href='{DOMAIN}/fonts/open-sans/700.css' rel='stylesheet')
+              link(href='{DOMAIN}/fonts/saira-extra-condensed/700.css' rel='stylesheet')
+              link(href='{DOMAIN}/icons/ionicons.css' rel='stylesheet')
+              link(rel='stylesheet' href='{DOMAIN}/tikui.css')
+        .tikui-vertical-spacing--line
+          h2.tikui-title-section Documentation
+        .tikui-vertical-spacing--line
+          p.tikui-paragraph The Style have an #[a.tikui-link(href='http://atomicdesign.bradfrost.com', target='_blank') Atomic Design] structure.
+        .tikui-vertical-spacing--line
+          ul.tikui-list
+            li
+              a.tikui-link(href='[[TIKUI_BASEPATH]]token/token.html') Tokens
+            li
+              a.tikui-link(href='[[TIKUI_BASEPATH]]atom/atom.html') Atoms
+            li
+              a.tikui-link(href='[[TIKUI_BASEPATH]]molecule/molecule.html') Molecules
+            li
+              a.tikui-link(href='[[TIKUI_BASEPATH]]organism/organism.html') Organisms
+            li
+              a.tikui-link(href='[[TIKUI_BASEPATH]]template/template.html') Templates

package/styles/src/layout-documentation.pug

@@ -0,0 +1,14 @@
+extends /documentation/layout-atomic
+
+include /documentation/mixin
+
+block header
+  block vars
+    - let active = '';
+    - const isActive = (current) => current === active;
+  +tikui-navbar('[[TIKUI_BASEPATH]]index.html', 'Tikui')
+    +tikui-navbar-item('[[TIKUI_BASEPATH]]token/token.html', 'Tokens', isActive('token'))
+    +tikui-navbar-item('[[TIKUI_BASEPATH]]atom/atom.html', 'Atoms', isActive('atom'))
+    +tikui-navbar-item('[[TIKUI_BASEPATH]]molecule/molecule.html', 'Molecules', isActive('molecule'))
+    +tikui-navbar-item('[[TIKUI_BASEPATH]]organism/organism.html', 'Organisms', isActive('organism'))
+    +tikui-navbar-item('[[TIKUI_BASEPATH]]template/template.html', 'Templates', isActive('template'))

package/styles/src/layout.pug

@@ -0,0 +1,17 @@
+doctype html
+html
+  head
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
+    block title
+      title Tikui
+    link(href='[[TIKUI_BASEPATH]]fonts/open-sans/400.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]fonts/open-sans/600.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]fonts/open-sans/700.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]fonts/saira-extra-condensed/700.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]icons/ionicons.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]tikui.css', rel='stylesheet')
+    link(href='[[TIKUI_BASEPATH]]doc.css', rel='stylesheet')
+  body
+    block body
+      p Please include a body here.

package/styles/src/molecule/_molecule.scss

@@ -0,0 +1,2 @@
+@use 'import-file/import-file';
+@use 'toggle/toggle';

package/styles/src/molecule/import-file/_import-file.scss

@@ -0,0 +1,38 @@
+.ippon-import-file {
+  --_border-width: 2px;
+  --_padding-inline: calc(var(--ippon-size-32) - var(--_border-width));
+  --_icon-background-color: var(--ippon-color-neutral-surface-secondary);
+  --_icon-color: var(--ippon-color-neutral-text-icon-on-secondary);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: var(--_border-width) dashed var(--ippon-color-neutral-border);
+  border-radius: var(--ippon-radius-m);
+  padding: var(--_padding-inline);
+  cursor: pointer;
+
+  &--input {
+    display: none;
+  }
+
+  &--icon {
+    border-radius: var(--ippon-radius-pill);
+    background-color: var(--_icon-background-color);
+    padding: var(--ippon-size-12);
+    line-height: 0;
+    color: var(--_icon-color);
+  }
+
+  &:hover,
+  &.-dragover {
+    --_border-width: 1px;
+    --_icon-background-color: var(--ippon-color-information-2-surface-primary);
+    --_icon-color: var(--ippon-color-information-2-text-icon-on-primary);
+
+    border: var(--_border-width) dashed var(--ippon-color-information-2-border);
+    background-color: var(--ippon-color-information-2-surface-secondary);
+  }
+}

package/styles/src/molecule/import-file/import-file.code.pug

@@ -0,0 +1,4 @@
+include import-file.mixin.pug
+
++ippon-import-file
++ippon-import-file({ dragover: true })

package/styles/src/molecule/import-file/import-file.md

@@ -0,0 +1 @@
+## Import File

package/styles/src/molecule/import-file/import-file.mixin.pug

@@ -0,0 +1,15 @@
+include /atom/icon/icon.mixin.pug
+include /atom/text/text.mixin.pug
+include /organism/v-space/v-space.mixin.pug
+
+mixin ippon-import-file(options)
+  - const { dragover } = options || {};
+  - const dragoverClass = dragover ? '-dragover' : null;
+  label.ippon-import-file(class=dragoverClass)
+    +ippon-v-space({ gap: 8, align: 'center' })
+      .ippon-import-file--icon
+        +ippon-icon({ name: 'cloud-upload', size: 24 })
+      +ippon-v-space({ gap: 4, align: 'center' })
+        +ippon-text({ variant: 'body', weight: 'bold' }) Drag and drop your files here
+        +ippon-text({ variant: 'body', weight: 'small', color: 'neutral-tertiary-inversed' }) Or click to browse
+    input.ippon-import-file--input(type='file')

package/styles/src/molecule/import-file/import-file.render.pug

@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  div(style='display: flex; flex-direction: column; gap: 1rem')
+    include import-file.code.pug

package/styles/src/molecule/molecule.pug

@@ -0,0 +1,20 @@
+extends /layout-documentation
+
+block append vars
+  - active = 'molecule';
+
+block title
+  title Tikui - Molecules
+
+block content
+  .tikui-vertical-spacing.-s32
+    .tikui-vertical-spacing--line
+      h1#molecules.tikui-title-main Molecules
+    .tikui-vertical-spacing--line
+      include /documentation/atomic-design/quote/molecule
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=60) tabs/tabs.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=370) import-file/import-file.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=280) toggle/toggle.md

package/styles/src/molecule/tabs/_tabs.scss

@@ -0,0 +1,4 @@
+.ippon-tabs {
+  display: flex;
+  gap: 0;
+}

package/styles/src/molecule/tabs/tabs.code.pug

@@ -0,0 +1,9 @@
+include tabs.mixin.pug
+include /atom/tab/tab.mixin.pug
+
++ippon-tabs({ id: 'panel-id' })
+  +ippon-tab({ id: 'tab-1', controls: 'panel-id' }) Tab 1
+  +ippon-tab({ id: 'tab-2', controls: 'panel-id', selected: true }) Tab 2
+  +ippon-tab({ id: 'tab-3', controls: 'panel-id', href: '#tab3' }) Tab 3
+  +ippon-tab({ id: 'tab-4', controls: 'panel-id' }) Tab 4
+  +ippon-tab({ id: 'tab-5', controls: 'panel-id' }) Tab 5

package/styles/src/molecule/tabs/tabs.md

@@ -0,0 +1 @@
+## Tabs

package/styles/src/molecule/tabs/tabs.mixin.pug

@@ -0,0 +1,4 @@
+mixin ippon-tabs(options)
+  - const { id } = options || {};
+  .ippon-tabs(id=id, role='tablist')
+    block

package/styles/src/molecule/tabs/tabs.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include tabs.code.pug

package/styles/src/molecule/toggle/_toggle.scss

@@ -0,0 +1,68 @@
+.ippon-toggle {
+  --_padding: var(--ippon-size-10);
+  --_animation-duration: 200ms;
+  --_animation-easing: ease-in-out;
+
+  box-sizing: border-box;
+  border: 1px solid var(--ippon-color-neutral-border);
+  border-radius: var(--ippon-radius-l);
+  background-color: var(--ippon-color-neutral-surface-primary);
+  color: var(--ippon-color-neutral-text-icon-on-primary);
+
+  &--header,
+  &--button {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+  }
+
+  &.-open &--icon {
+    rotate: 90deg;
+  }
+
+  &--button {
+    flex: 1;
+    gap: var(--_padding);
+    align-self: stretch;
+    border: none;
+    background: none;
+    padding: var(--_padding);
+    cursor: pointer;
+  }
+
+  &--icon {
+    transition: rotate var(--_animation-duration) var(--_animation-easing);
+    line-height: 1;
+    font-size: var(--ippon-size-16);
+  }
+
+  &--title {
+    flex: 1;
+  }
+
+  &--actions {
+    display: flex;
+    gap: var(--_padding);
+    align-items: center;
+    padding: var(--_padding) var(--_padding) var(--_padding) 0;
+  }
+
+  &--body {
+    display: flex;
+    flex-direction: column;
+    transition: height var(--_animation-duration) var(--_animation-easing);
+    height: 0;
+    overflow: hidden;
+  }
+
+  &--content {
+    border-top: 1px solid var(--ippon-color-neutral-border);
+    padding: var(--ippon-size-12);
+  }
+
+  &.-open &--body {
+    height: calc-size(max-content, size);
+  }
+}

package/styles/src/molecule/toggle/toggle.code.pug

@@ -0,0 +1,26 @@
+include /atom/button/button.mixin.pug
+include /atom/icon/icon.mixin.pug
+include /atom/text/text.mixin.pug
+include /organism/h-space/h-space.mixin.pug
+
+include toggle.mixin.pug
+
+mixin ippon-toggle-example(options)
+  - const { id, open } = options || {};
+  - const label = 'Toggle Title';
+  +ippon-toggle(options)
+    +ippon-toggle--header
+      +ippon-toggle--button({ id, open, label })
+        +ippon-h-space({ gap: 10, align: 'middle' })
+          +ippon-icon({ name: 'folder', variant: 'outline', size: 16, color: 'warning-primary' })
+          +ippon-text({ variant: 'body', weight: 'bold' })= label
+          +ippon-text({ variant: 'body', weight: 'small', color: 'neutral-tertiary-inversed' }) (3 elements)
+      +ippon-toggle--actions
+        +ippon-button({ color: 'neutral', variant: 'outline' }) Action
+    +ippon-toggle--body({ labelledBy: id })
+      +ippon-toggle--content First
+      +ippon-toggle--content Second
+      +ippon-toggle--content Third
+
++ippon-toggle-example({ id: 'first-toggle' })
++ippon-toggle-example({ id: 'second-toggle', open: true })

package/styles/src/molecule/toggle/toggle.md

@@ -0,0 +1 @@
+## Toggle