@ippon-ui/ui 0.0.2

package/styles/src/organism/modal/_modal.scss

@@ -0,0 +1,58 @@
+@mixin -ippon-modal-slot {
+  padding: 0 var(--ippon-size-24);
+}
+
+.ippon-modal {
+  --_margin-horizontal: var(--ippon-size-24);
+  --_witdh-space-to-remove: calc(var(--_margin-horizontal) * 2);
+
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--ippon-size-24);
+  border: 0;
+  border-radius: var(--ippon-radius-m);
+  background-color: var(--ippon-color-neutral-surface-primary);
+  padding: var(--ippon-size-24) 0;
+  width: calc(100% - var(--_witdh-space-to-remove));
+  max-width: var(--ippon-size-886);
+  color: var(--ippon-color-neutral-text-icon-on-primary);
+
+  &::backdrop {
+    background-color: color-mix(in srgb, var(--ippon-color-neutral-999) 70%, transparent);
+  }
+
+  &:open {
+    display: flex;
+  }
+
+  &--header {
+    @include -ippon-modal-slot;
+  }
+
+  &--separator {
+    box-sizing: border-box;
+    margin: 0 var(--ippon-size-24);
+    border-top: 1px solid var(--ippon-color-neutral-border);
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+  }
+
+  &--actions {
+    border-top: 1px solid var(--ippon-color-neutral-border);
+    border-bottom: 1px solid var(--ippon-color-neutral-border);
+    background-color: var(--ippon-color-neutral-surface-secondary);
+    padding: var(--ippon-size-16) var(--ippon-size-24);
+    color: var(--ippon-color-neutral-text-icon-on-secondary);
+  }
+
+  &--body {
+    @include -ippon-modal-slot;
+
+    overflow: auto;
+  }
+
+  &--footer {
+    @include -ippon-modal-slot;
+  }
+}

package/styles/src/organism/modal/modal.code.pug

@@ -0,0 +1,68 @@
+include /atom/button/button.mixin.pug
+include /atom/meter/meter.mixin.pug
+include /atom/title/title.mixin.pug
+include /atom/text/text.mixin.pug
+include /atom/icon/icon.mixin.pug
+include /organism/h-space/h-space.mixin.pug
+include /organism/v-space/v-space.mixin.pug
+
+include modal.mixin.pug
+
++ippon-button({ command: 'show-modal', commandfor: 'modal' }) Open modal
++ippon-modal({ id: 'modal' })
+  +ippon-modal--header
+    +ippon-h-space({ gap: 16, align: 'middle' })
+      +ippon-icon({ name: 'list', variant: 'outline', color: 'brand-primary' })
+      +ippon-h-space--slot({ expand: true })
+        ippon-v-space
+          hgroup
+            +ippon-title({ level: 5 }) Modal title
+            +ippon-text({ tag: 'p', variant: 'body', size: 'small', color: 'neutral-tertiary-inversed' }) Modal description
+      +ippon-button({ variant: 'text', color: 'neutral', icon: { name: 'close' }, command: 'close', commandfor: 'modal' })
+  +ippon-modal--separator
+  +ippon-modal--body
+    +ippon-text({ variant: 'body' }) Body
+  +ippon-modal--footer
+    +ippon-h-space({ gap: 24, align: 'middle' })
+      +ippon-button({ command: 'close', commandfor: 'modal', iconRight: { name: 'close' } }) Close
+      +ippon-button({ command: 'close', variant: 'outline', iconRight: { name: 'reload' } }) Other
+
++ippon-button({ command: 'show-modal', commandfor: 'modal-actions' }) Open modal with actions
++ippon-modal({ id: 'modal-actions' })
+  +ippon-modal--header
+    +ippon-h-space({ gap: 16, align: 'middle' })
+      +ippon-icon({ name: 'list', variant: 'outline', color: 'brand-primary' })
+      +ippon-h-space--slot({ expand: true })
+        ippon-v-space
+          hgroup
+            +ippon-title({ level: 5 }) Modal title
+            +ippon-text({ tag: 'p', variant: 'body', size: 'small', color: 'neutral-tertiary-inversed' }) Modal description
+      +ippon-button({ variant: 'text', color: 'neutral', icon: { name: 'close' }, command: 'close', commandfor: 'modal-actions' })
+  +ippon-modal--actions
+    +ippon-h-space({ gap: 24, align: 'middle' })
+      +ippon-button({ variant: 'text', size: 'small' }) Select all
+      +ippon-button({ color: 'neutral', variant: 'text', size: 'small' }) Unselect all
+  +ippon-modal--body
+    +ippon-text({ variant: 'body' }) Body
+  +ippon-modal--footer
+    +ippon-h-space({ gap: 24, align: 'middle' })
+      +ippon-button({ command: 'close', commandfor: 'modal-actions', iconRight: { name: 'close' } }) Close
+      +ippon-button({ command: 'close', variant: 'outline', iconRight: { name: 'reload' } }) Other
+
++ippon-button({ command: 'show-modal', commandfor: 'modal-loading' }) Open loading modal
++ippon-modal({ id: 'modal-loading' })
+  +ippon-modal--header
+    +ippon-h-space({ gap: 16, align: 'middle' })
+      +ippon-icon({ name: 'hourglass', variant: 'outline', color: 'brand-primary', size: 32 })
+      +ippon-h-space--slot({ expand: true })
+        ippon-v-space
+          hgroup
+            +ippon-title({ level: 5 }) Loading title
+            +ippon-text({ tag: 'p', variant: 'body', size: 'small', color: 'neutral-tertiary-inversed' }) Please wait...
+  +ippon-modal--separator
+  +ippon-modal--body
+    +ippon-v-space({ gap: 16 })
+      +ippon-meter({ value: 60, min: 0, max: 100 })
+      +ippon-text({ variant: 'body' }) 60%
+  +ippon-modal--footer
+    +ippon-button({ command: 'close', commandfor: 'modal-loading', variant: 'outline', color: 'neutral', iconRight: { name: 'close' } }) Close (demo only)

package/styles/src/organism/modal/modal.md

@@ -0,0 +1 @@
+## Modal

package/styles/src/organism/modal/modal.mixin.pug

@@ -0,0 +1,25 @@
+include /atom/button/button.mixin.pug
+
+mixin ippon-modal(options)
+  - const { id, additionalClass } = options || {};
+  dialog.ippon-modal(id=id, class=additionalClass)
+    block
+
+mixin ippon-modal--header
+  .ippon-modal--header
+    block
+
+mixin ippon-modal--separator
+  hr.ippon-modal--separator
+
+mixin ippon-modal--actions
+  .ippon-modal--actions
+    block
+
+mixin ippon-modal--body
+  .ippon-modal--body
+    block
+
+mixin ippon-modal--footer
+  .ippon-modal--footer
+    block

package/styles/src/organism/modal/modal.render.pug

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

package/styles/src/organism/organism.pug

@@ -0,0 +1,30 @@
+extends /layout-documentation
+
+block append vars
+  - active = 'organism';
+
+block title
+  title Tikui - Organisms
+
+block content
+  .tikui-vertical-spacing.-s32
+    .tikui-vertical-spacing--line
+      h1#organisms.tikui-title-main Organisms
+    .tikui-vertical-spacing--line
+      include /documentation/atomic-design/quote/organism
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=330) button-card/button-card.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=200) card/card.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=110) container/container.md
+    .tikui-vertical-spacing--line
+      include:componentDoc header/header.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=400) modal/modal.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=800) h-space/h-space.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=1120) v-space/v-space.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=550) grid/grid.md

package/styles/src/organism/v-space/_v-space.scss

@@ -0,0 +1,45 @@
+@use '../../quark/gap';
+
+.ippon-v-space {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  @include gap.gaps;
+
+  &.-left {
+    align-items: flex-start;
+  }
+
+  &.-center {
+    align-items: center;
+  }
+
+  &.-justify {
+    align-items: stretch;
+  }
+
+  &.-right {
+    align-items: flex-end;
+  }
+
+  &--slot {
+    &.-left {
+      align-self: flex-start;
+    }
+
+    &.-center {
+      align-self: center;
+    }
+
+    &.-justify {
+      align-self: stretch;
+    }
+
+    &.-right {
+      align-self: flex-end;
+    }
+  }
+}

package/styles/src/organism/v-space/v-space.code.pug

@@ -0,0 +1,41 @@
+include v-space.mixin.pug
+
+mixin ippon-v-space-rectangle(width = '100%')
+  div(
+    style=`width: ${width}; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)`
+  )
+
++ippon-v-space
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+
++ippon-v-space({ gap: 8 })
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+
++ippon-v-space({ gap: 32, align: 'center' })
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+
++ippon-v-space({ gap: 16, align: 'left' })
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+
++ippon-v-space({ gap: 20, align: 'right' })
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+
++ippon-v-space({ gap: 24, align: 'justify' })
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+  +ippon-v-space-rectangle
+
++ippon-v-space({ gap: 16, tag: 'section' })
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')
+  +ippon-v-space-rectangle('100px')

package/styles/src/organism/v-space/v-space.md

@@ -0,0 +1,20 @@
+## Vertical space (v-space)
+
+The `v-space` organism represents vertical spaces between elements.
+
+**Gap**
+
+The `-gap-{size}` alternative specifies the gap between child elements.
+
+**Tag**
+
+The `tag` property allows specifying a custom HTML element (e.g., `div`, `section`, `article`). Defaults to `div`.
+
+**Alignment**
+
+The following alternatives control the horizontal alignment of child elements:
+
+- `-left`: Align items to the left (flex-start)
+- `-center`: Center align items
+- `-justify`: Stretch items to full width (stretch)
+- `-right`: Align items to the right (flex-end)

package/styles/src/organism/v-space/v-space.mixin.pug

@@ -0,0 +1,7 @@
+mixin ippon-v-space(options)
+  - const { gap, align, tag } = options || {};
+  - const gapClass = gap ? `-gap-${gap}` : null;
+  - const alignClass = align ? `-${align}` : null;
+
+  #{tag || 'div'}.ippon-v-space(class=[gapClass, alignClass])
+    block

package/styles/src/organism/v-space/v-space.render.pug

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

package/styles/src/quark/_breakpoint.scss

@@ -0,0 +1,12 @@
+$media-breakpoints: (
+  'mobile': 320px,
+  'tab': 680px,
+  'desktop-s': 1024px,
+  'desktop-m': 1280px,
+);
+$container-breakpoints: (
+  's': 224px,
+  'm': 584px,
+  'l': 928px,
+  'xl': 1184px,
+);

package/styles/src/quark/_font.scss

@@ -0,0 +1,38 @@
+@use '../token/size';
+
+@mixin -color-for-variant($color-name, $variant-name) {
+  &.-color-#{$color-name}-#{$variant-name} {
+    color: var(#{'--ippon-color-' + $color-name + '-text-icon-' + $variant-name});
+  }
+}
+
+@mixin -color-for($color-name) {
+  @include -color-for-variant($color-name, 'primary');
+  @include -color-for-variant($color-name, 'secondary');
+  @include -color-for-variant($color-name, 'on-primary');
+  @include -color-for-variant($color-name, 'on-secondary');
+}
+
+@mixin -neutral {
+  @include -color-for('neutral');
+  @include -color-for-variant('neutral', 'tertiary');
+  @include -color-for-variant('neutral', 'tertiary-inversed');
+}
+
+@mixin sizes {
+  @each $size in size.$sizes {
+    &.-size-#{$size} {
+      font-size: var(--ippon-size-#{$size});
+    }
+  }
+}
+
+@mixin colors {
+  @include -neutral;
+  @include -color-for('brand');
+  @include -color-for('success');
+  @include -color-for('error');
+  @include -color-for('warning');
+  @include -color-for('information');
+  @include -color-for('information-2');
+}

package/styles/src/quark/_gap.scss

@@ -0,0 +1,34 @@
+@use '../token/size';
+@use 'breakpoint';
+
+@mixin gaps {
+  @each $size in size.$sizes {
+    &.-gap-#{$size} {
+      gap: var(--ippon-size-#{$size});
+    }
+  }
+}
+
+@mixin media-gaps {
+  @each $breakpoint, $breakpoint-value in breakpoint.$media-breakpoints {
+    @media (min-width: $breakpoint-value) {
+      @each $size in size.$sizes {
+        &.-gap-#{$breakpoint}-#{$size} {
+          gap: var(--ippon-size-#{$size});
+        }
+      }
+    }
+  }
+}
+
+@mixin container-gaps {
+  @each $breakpoint, $container-value in breakpoint.$container-breakpoints {
+    @container (min-width: #{$container-value}) {
+      @each $size in size.$sizes {
+        &.-gap-#{$breakpoint}-#{$size} {
+          gap: var(--ippon-size-#{$size});
+        }
+      }
+    }
+  }
+}

package/styles/src/quark/_placeholder.scss

@@ -0,0 +1,27 @@
+@keyframes ippon-placeholder-shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+%ippon-placeholder {
+  animation: ippon-placeholder-shimmer 2s infinite;
+  background: linear-gradient(
+    90deg,
+    var(--ippon-color-neutral-surface-secondary) 0%,
+    var(--ippon-color-neutral-surface-tertiary) 50%,
+    var(--ippon-color-neutral-surface-secondary) 100%
+  );
+  background-size: 62rem 100%;
+  color: transparent;
+}
+
+@mixin placeholder($height) {
+  @extend %ippon-placeholder;
+
+  height: $height;
+}

package/styles/src/quark/_shadow.scss

@@ -0,0 +1,13 @@
+@use '../token/shadow/shadow';
+
+@mixin -shadow($level) {
+  &.-shadow-l#{$level} {
+    box-shadow: var(--ippon-shadow-l#{$level});
+  }
+}
+
+@mixin shadows {
+  @each $level in shadow.$shadow-levels {
+    @include -shadow($level);
+  }
+}

package/styles/src/quark/_typography.scss

@@ -0,0 +1,146 @@
+@use 'sass:map';
+
+@mixin display-large {
+  text-transform: var(--ippon-typography-display-large-transform);
+  line-height: var(--ippon-typography-display-large-line-height);
+  font-family: var(--ippon-typography-display-large-font);
+  font-size: var(--ippon-typography-display-large-size);
+  font-weight: var(--ippon-typography-display-large-weight);
+}
+
+@mixin display-medium {
+  text-transform: var(--ippon-typography-display-medium-transform);
+  line-height: var(--ippon-typography-display-medium-line-height);
+  font-family: var(--ippon-typography-display-medium-font);
+  font-size: var(--ippon-typography-display-medium-size);
+  font-weight: var(--ippon-typography-display-medium-weight);
+}
+
+@mixin display-small {
+  text-transform: var(--ippon-typography-display-small-transform);
+  line-height: var(--ippon-typography-display-small-line-height);
+  font-family: var(--ippon-typography-display-small-font);
+  font-size: var(--ippon-typography-display-small-size);
+  font-weight: var(--ippon-typography-display-small-weight);
+}
+
+@mixin title-1 {
+  text-transform: var(--ippon-typography-title-1-transform);
+  line-height: var(--ippon-typography-title-1-line-height);
+  font-family: var(--ippon-typography-title-1-font);
+  font-size: var(--ippon-typography-title-1-size);
+  font-weight: var(--ippon-typography-title-1-weight);
+}
+
+@mixin title-2 {
+  text-transform: var(--ippon-typography-title-2-transform);
+  line-height: var(--ippon-typography-title-2-line-height);
+  font-family: var(--ippon-typography-title-2-font);
+  font-size: var(--ippon-typography-title-2-size);
+  font-weight: var(--ippon-typography-title-2-weight);
+}
+
+@mixin title-3 {
+  text-transform: var(--ippon-typography-title-3-transform);
+  line-height: var(--ippon-typography-title-3-line-height);
+  font-family: var(--ippon-typography-title-3-font);
+  font-size: var(--ippon-typography-title-3-size);
+  font-weight: var(--ippon-typography-title-3-weight);
+}
+
+@mixin title-4 {
+  text-transform: var(--ippon-typography-title-4-transform);
+  line-height: var(--ippon-typography-title-4-line-height);
+  font-family: var(--ippon-typography-title-4-font);
+  font-size: var(--ippon-typography-title-4-size);
+  font-weight: var(--ippon-typography-title-4-weight);
+}
+
+@mixin title-5 {
+  text-transform: var(--ippon-typography-title-5-transform);
+  line-height: var(--ippon-typography-title-5-line-height);
+  font-family: var(--ippon-typography-title-5-font);
+  font-size: var(--ippon-typography-title-5-size);
+  font-weight: var(--ippon-typography-title-5-weight);
+}
+
+$-body-large-weights: (
+  'normal': var(--ippon-typography-body-large-weight),
+  'bold': var(--ippon-typography-body-large-weight-bold),
+);
+
+@mixin -body-large($weight: 'normal') {
+  line-height: var(--ippon-typography-body-large-line-height);
+  font-family: var(--ippon-typography-body-large-font);
+  font-size: var(--ippon-typography-body-large-size);
+  font-weight: map.get($-body-large-weights, $weight);
+}
+
+@mixin body-large {
+  @include -body-large('normal');
+}
+
+@mixin body-large-bold {
+  @include -body-large('bold');
+}
+
+$-body-medium-weights: (
+  'normal': var(--ippon-typography-body-medium-weight),
+  'bold': var(--ippon-typography-body-medium-weight-bold),
+);
+
+@mixin -body-medium($weight: 'normal') {
+  line-height: var(--ippon-typography-body-medium-line-height);
+  font-family: var(--ippon-typography-body-medium-font);
+  font-size: var(--ippon-typography-body-medium-size);
+  font-weight: map.get($-body-medium-weights, $weight);
+}
+
+@mixin body-medium {
+  @include -body-medium('normal');
+}
+
+@mixin body-medium-bold {
+  @include -body-medium('bold');
+}
+
+$-body-small-weights: (
+  'normal': var(--ippon-typography-body-small-weight),
+  'bold': var(--ippon-typography-body-small-weight-bold),
+);
+
+@mixin -body-small($weight: 'normal') {
+  line-height: var(--ippon-typography-body-small-line-height);
+  font-family: var(--ippon-typography-body-small-font);
+  font-size: var(--ippon-typography-body-small-size);
+  font-weight: map.get($-body-small-weights, $weight);
+}
+
+@mixin body-small {
+  @include -body-small('normal');
+}
+
+@mixin body-small-bold {
+  @include -body-small('bold');
+}
+
+@mixin label-large {
+  line-height: var(--ippon-typography-label-large-line-height);
+  font-family: var(--ippon-typography-label-large-font);
+  font-size: var(--ippon-typography-label-large-size);
+  font-weight: var(--ippon-typography-label-large-weight);
+}
+
+@mixin label-medium {
+  line-height: var(--ippon-typography-label-medium-line-height);
+  font-family: var(--ippon-typography-label-medium-font);
+  font-size: var(--ippon-typography-label-medium-size);
+  font-weight: var(--ippon-typography-label-medium-weight);
+}
+
+@mixin label-small {
+  line-height: var(--ippon-typography-label-small-line-height);
+  font-family: var(--ippon-typography-label-small-font);
+  font-size: var(--ippon-typography-label-small-size);
+  font-weight: var(--ippon-typography-label-small-weight);
+}

package/styles/src/template/_template.scss

@@ -0,0 +1 @@
+@use 'layout/layout';

package/styles/src/template/layout/_layout.scss

@@ -0,0 +1,20 @@
+.ippon-layout {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  flex-direction: column;
+
+  &--header {
+    flex-shrink: 0;
+    background-color: var(--ippon-color-neutral-surface-primary);
+    color: var(--ippon-color-neutral-text-icon-on-primary);
+  }
+
+  &--body {
+    flex: 1;
+    background-color: var(--ippon-color-neutral-surface-secondary);
+    padding: var(--ippon-size-32) var(--ippon-size-48);
+    overflow-y: auto;
+    color: var(--ippon-color-neutral-text-icon-on-secondary);
+  }
+}

package/styles/src/template/layout/layout.code.pug

@@ -0,0 +1,11 @@
+include /organism/header/header.mixin.pug
+include /atom/title/title.mixin.pug
+
+include layout.mixin.pug
+
++ippon-layout
+  +ippon-layout--header
+    +ippon-header
+      +ippon-header--slot Logo
+  +ippon-layout--body
+    +ippon-title({ tag: 'h1' }) Title

package/styles/src/template/layout/layout.md

@@ -0,0 +1 @@
+## Layout

package/styles/src/template/layout/layout.mixin.pug

@@ -0,0 +1,11 @@
+mixin ippon-layout
+  .ippon-layout
+    block
+
+mixin ippon-layout--header
+  .ippon-layout--header
+    block
+
+mixin ippon-layout--body
+  .ippon-layout--body
+    block

package/styles/src/template/layout/layout.render.pug

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

package/styles/src/template/template.pug

@@ -0,0 +1,16 @@
+extends /layout-documentation
+
+block append vars
+  - active = 'template';
+
+block title
+  title Tikui - Templates
+
+block content
+  .tikui-vertical-spacing.-s32
+    .tikui-vertical-spacing--line
+      h1#templates.tikui-title-main Templates
+    .tikui-vertical-spacing--line
+      include /documentation/atomic-design/quote/template
+    .tikui-vertical-spacing--line
+      include:templateDoc layout/layout.md

package/styles/src/tikui.scss

@@ -0,0 +1,5 @@
+@use 'token/token';
+@use 'atom/atom';
+@use 'molecule/molecule';
+@use 'organism/organism';
+@use 'template/template';