diff --git a/CHANGELOG.md b/CHANGELOG.md index aa13d95..43c9fdd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,20 @@ All notable changes to the Ippon UI packages are documented in this file, so con The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), with one entry per release listing the affected package versions. +## 2026-07-08 — @ippon-ui/styles 0.0.10 · @ippon-ui/react 0.0.9 + +### Added + +- `table` molecule: `-minimal` alternative on `ippon-table--header` and `ippon-table--cell` shrinks the column to its content width (`{ minimal: true }` on the mixins). +- `table` molecule: a body row can start with a row header (`ippon-table--header` as first cell); row headers are bold and follow the same border rules as cells. +- `title-display` atom: color alternatives, the same classes as `text` (e.g. `-color-brand-primary`, `-color-neutral-tertiary`), with a `color` option on the mixin. +- `IpponTitleDisplay` React component: display title with `tag` (`h1`/`h2`/`h3` drive the size), `size` and `color` props. + +### Changed + +- `title` and `title-display` atoms are never underlined, so they can be used as links (`` tag) without extra styling. +- The Pattern Library documentation site is fully restyled with the Ippon UI design system (Ippon UI branding, components and tokens) and its home page documents the npm installation (`npm install -D @ippon-ui/styles`) alongside the stylesheet-link usage. + ## 2026-07-08 — @ippon-ui/styles 0.0.9 · @ippon-ui/react 0.0.8 ### Added diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4cba55e..708b975 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -174,9 +174,6 @@ importers: stylelint-scss: specifier: 7.0.0 version: 7.0.0(stylelint@17.6.0(typescript@6.0.3)) - tikuidoc-tikui: - specifier: 9.0.1 - version: 9.0.1(sass@1.99.0) vitest: specifier: 4.1.4 version: 4.1.4(@types/node@24.12.4)(jsdom@29.1.1)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.27.7)(jiti@2.6.1)(sass@1.99.0)(yaml@2.8.4)) @@ -4371,12 +4368,6 @@ packages: through2@4.0.2: resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==} - tikuidoc-tikui@9.0.1: - resolution: {integrity: sha512-ldD+h5O2Ze4y+WmkROl8PGs1puehVuV9hFeUEvwDuk0z3iTVjJdu7VU62kRkmlE/Vb7gKj9XXAG5XTHbY/MQPQ==} - engines: {node: '>=18.0.0'} - peerDependencies: - sass: '>=1.45.0 <2.0.0' - timers-ext@0.1.8: resolution: {integrity: sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==} engines: {node: '>=0.12'} @@ -9245,10 +9236,6 @@ snapshots: dependencies: readable-stream: 3.6.2 - tikuidoc-tikui@9.0.1(sass@1.99.0): - dependencies: - sass: 1.99.0 - timers-ext@0.1.8: dependencies: es5-ext: 0.10.64 diff --git a/react/package.json b/react/package.json index bdd3ce8..4346701 100644 --- a/react/package.json +++ b/react/package.json @@ -1,7 +1,7 @@ { "name": "@ippon-ui/react", "description": "Ippon UI React Component Library", - "version": "0.0.8", + "version": "0.0.9", "license": "Apache-2.0", "repository": { "type": "git", @@ -39,7 +39,7 @@ }, "peerDependencies": { "@ippon-ui/icons": "~0.0.2", - "@ippon-ui/styles": "~0.0.9", + "@ippon-ui/styles": "~0.0.10", "react": "^19.0.0", "react-dom": "^19.0.0" }, diff --git a/react/src/IpponTitleDisplay.tsx b/react/src/IpponTitleDisplay.tsx new file mode 100644 index 0000000..ee5d306 --- /dev/null +++ b/react/src/IpponTitleDisplay.tsx @@ -0,0 +1,43 @@ +import type { IpponTokenTextColor } from './Tokens.ts'; +import type { DataSelectableWithChildren } from './DataSelectable.ts'; +import { clsx } from 'clsx'; +import { optionalToAlternativeClass, optionalToPrefixedAlternativeClass } from './CAP.ts'; +import type { JSX } from 'react'; + +type Size = 'large' | 'medium' | 'small'; + +type HeadingTag = 'h1' | 'h2' | 'h3'; + +type IpponTitleDisplayWithHeadingProps = DataSelectableWithChildren<{ + tag: HeadingTag; + size?: Size; + color?: IpponTokenTextColor; +}>; + +type IpponTitleDisplayWithNonHeadingProps = DataSelectableWithChildren<{ + tag?: Exclude; + size: Size; + color?: IpponTokenTextColor; +}>; + +type IpponTitleDisplayProps = + | IpponTitleDisplayWithHeadingProps + | IpponTitleDisplayWithNonHeadingProps; + +export const IpponTitleDisplay = (props: IpponTitleDisplayProps) => { + const CustomTag: keyof JSX.IntrinsicElements = (props.tag || + 'div') as keyof JSX.IntrinsicElements; + + return ( + + {props.children} + + ); +}; diff --git a/react/src/index.ts b/react/src/index.ts index 34c06f8..fdb02ad 100644 --- a/react/src/index.ts +++ b/react/src/index.ts @@ -20,5 +20,6 @@ export { IpponProgress } from './IpponProgress.tsx'; export { IpponSeparator } from './IpponSeparator.tsx'; export { IpponText } from './IpponText.tsx'; export { IpponTitle } from './IpponTitle.tsx'; +export { IpponTitleDisplay } from './IpponTitleDisplay.tsx'; export { IpponVSpace, IpponVSpaceSlot } from './IpponVSpace.tsx'; export { type DataSelectableWithChildren } from './DataSelectable.ts'; diff --git a/react/stories/IpponTitleDisplay.stories.tsx b/react/stories/IpponTitleDisplay.stories.tsx new file mode 100644 index 0000000..4ebacd4 --- /dev/null +++ b/react/stories/IpponTitleDisplay.stories.tsx @@ -0,0 +1,53 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { IpponTitleDisplay } from '../src/IpponTitleDisplay.tsx'; + +const meta = { + title: 'Atom/Title display', + component: IpponTitleDisplay, + args: { + tag: 'h1', + children: 'Display title', + }, + argTypes: { + size: { + control: 'select', + options: [undefined, 'large', 'medium', 'small'], + }, + color: { + control: 'select', + options: [ + undefined, + 'brand-primary', + 'neutral-tertiary', + 'success-primary', + 'error-primary', + 'warning-primary', + 'information-primary', + ], + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Sizes: Story = { + render: () => ( + <> + Large display (h1) + Medium display (h2) + Small display (h3) + + ), +}; + +export const StyledAsSmall: Story = { + args: { tag: 'h1', size: 'small', children: 'h1 styled as small' }, +}; + +export const Colored: Story = { + args: { tag: 'h2', color: 'brand-primary', children: 'Brand display title' }, +}; diff --git a/react/test/IpponTitleDisplay.spec.tsx b/react/test/IpponTitleDisplay.spec.tsx new file mode 100644 index 0000000..221377f --- /dev/null +++ b/react/test/IpponTitleDisplay.spec.tsx @@ -0,0 +1,103 @@ +import { beforeEach, describe, expect, it } from 'vitest'; +import { render, screen, configure, cleanup } from '@testing-library/react'; +import '@testing-library/jest-dom/vitest'; +import { IpponTitleDisplay } from '../src'; + +configure({ + testIdAttribute: 'data-selector', +}); + +describe('IpponTitleDisplay', () => { + beforeEach(cleanup); + + describe('HTML Tags', () => { + it('should render as div by default', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title.tagName).toBe('DIV'); + expect(title).toHaveClass('ippon-title-display'); + }); + + it('should render as h1 when specified', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title.tagName).toBe('H1'); + expect(title).toHaveClass('ippon-title-display'); + }); + + it('should render as h2 when specified', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title.tagName).toBe('H2'); + expect(title).toHaveClass('ippon-title-display'); + }); + + it('should render as h3 when specified', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title.tagName).toBe('H3'); + expect(title).toHaveClass('ippon-title-display'); + }); + }); + + describe('Sizes', () => { + it('should not have a size class by default', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title.className).toBe('ippon-title-display'); + }); + + it.each(['large', 'medium', 'small'] as const)('should render %s size class', (size) => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title).toHaveClass('ippon-title-display', `-${size}`); + }); + }); + + describe('Colors', () => { + it('should render the color class', () => { + render( + + Display title + , + ); + const title = screen.getByTestId('ippon-title-display'); + expect(title).toHaveClass('ippon-title-display', '-color-brand-primary'); + }); + }); + + describe('Children', () => { + it('should render its children', () => { + render( + + Display title + , + ); + expect(screen.getByTestId('ippon-title-display')).toHaveTextContent('Display title'); + }); + }); +}); diff --git a/styles/logo.svg b/styles/logo.svg deleted file mode 100644 index 486e83e..0000000 --- a/styles/logo.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - 939F69E9-C193-4037-81BF-58C624AF804B - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/styles/package.json b/styles/package.json index 50d466b..25f9606 100644 --- a/styles/package.json +++ b/styles/package.json @@ -1,6 +1,6 @@ { "name": "@ippon-ui/styles", - "version": "0.0.9", + "version": "0.0.10", "description": "Ippon UI Pattern Library", "repository": { "type": "git", @@ -69,7 +69,6 @@ "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" } } diff --git a/styles/part/code.pug b/styles/part/code.pug new file mode 100644 index 0000000..8aae62c --- /dev/null +++ b/styles/part/code.pug @@ -0,0 +1,11 @@ +.ippon-grid.-media-4.-media-desktop-s-12.-gap-16 + .ippon-grid--slot.-col-4.-col-desktop-s-6 + .ippon-v-space.-gap-8.-left + pre.ipp-doc-snippet + code.code.language-html !{ htmlCode } + button.ippon-button.-secondary.-small(onclick='copyCode(this)', data-code=htmlRaw) Copy + .ippon-grid--slot.-col-4.-col-desktop-s-6 + .ippon-v-space.-gap-8.-left + pre.ipp-doc-snippet + code.code.language-pug !{ pugCode } + button.ippon-button.-secondary.-small(onclick='copyCode(this)', data-code=pugRaw) Copy diff --git a/styles/part/component-render.pug b/styles/part/component-render.pug new file mode 100644 index 0000000..f4b77e3 --- /dev/null +++ b/styles/part/component-render.pug @@ -0,0 +1 @@ +iframe.ipp-doc-iframe(src=src, height=height, title='Component rendering') diff --git a/styles/part/component.pug b/styles/part/component.pug new file mode 100644 index 0000000..75a50f0 --- /dev/null +++ b/styles/part/component.pug @@ -0,0 +1,5 @@ +.ippon-card.-border + .ippon-v-space.-gap-16 + .markdown !{ markdown } + .render !{ render } + .code !{ code } diff --git a/styles/part/template-render.pug b/styles/part/template-render.pug new file mode 100644 index 0000000..73404f4 --- /dev/null +++ b/styles/part/template-render.pug @@ -0,0 +1 @@ +a.ippon-button.-small(href=src, target='_blank') Show diff --git a/styles/part/template.pug b/styles/part/template.pug new file mode 100644 index 0000000..75a50f0 --- /dev/null +++ b/styles/part/template.pug @@ -0,0 +1,5 @@ +.ippon-card.-border + .ippon-v-space.-gap-16 + .markdown !{ markdown } + .render !{ render } + .code !{ code } diff --git a/styles/src/atom/atom.pug b/styles/src/atom/atom.pug index 4b172c4..9c63f17 100644 --- a/styles/src/atom/atom.pug +++ b/styles/src/atom/atom.pug @@ -4,39 +4,23 @@ block append vars - active = 'atom'; block title - title Tikui - Atoms + title Ippon UI - Atoms block content - .tikui-vertical-spacing.-s32 - .tikui-vertical-spacing--line - h1#atoms.tikui-title-main Atoms - .tikui-vertical-spacing--line - include /documentation/atomic-design/quote/atom - .tikui-vertical-spacing--line - include:componentDoc(height=620) badge/badge.md - .tikui-vertical-spacing--line - include:componentDoc(height=740) button/button.md - .tikui-vertical-spacing--line - include:componentDoc(height=40) helper-text/helper-text.md - .tikui-vertical-spacing--line - include:componentDoc(height=50) icon/icon.md - .tikui-vertical-spacing--line - include:componentDoc(height=450) input-text/input-text.md - .tikui-vertical-spacing--line - include:componentDoc(height=60) ion/ion.md - .tikui-vertical-spacing--line - include:componentDoc(height=40) label/label.md - .tikui-vertical-spacing--line - include:componentDoc(height=150) meter/meter.md - .tikui-vertical-spacing--line - include:componentDoc(height=150) progress/progress.md - .tikui-vertical-spacing--line - include:componentDoc(height=40) separator/separator.md - .tikui-vertical-spacing--line - include:componentDoc(height=60) tab/tab.md - .tikui-vertical-spacing--line - include:componentDoc(height=220) text/text.md - .tikui-vertical-spacing--line - include:componentDoc(height=1050) title/title.md - .tikui-vertical-spacing--line - include:componentDoc(height=350) title-display/title-display.md + .ippon-v-space.-gap-32 + h1#atoms.ippon-title Atoms + include /documentation/atomic-design/quote/atom + include:componentDoc(height=700) badge/badge.md + include:componentDoc(height=890) button/button.md + include:componentDoc(height=40) helper-text/helper-text.md + include:componentDoc(height=50) icon/icon.md + include:componentDoc(height=450) input-text/input-text.md + include:componentDoc(height=60) ion/ion.md + include:componentDoc(height=40) label/label.md + include:componentDoc(height=150) meter/meter.md + include:componentDoc(height=150) progress/progress.md + include:componentDoc(height=20) separator/separator.md + include:componentDoc(height=60) tab/tab.md + include:componentDoc(height=220) text/text.md + include:componentDoc(height=1050) title/title.md + include:componentDoc(height=440) title-display/title-display.md diff --git a/styles/src/atom/title-display/_title-display.scss b/styles/src/atom/title-display/_title-display.scss index fc6b4a0..c720715 100644 --- a/styles/src/atom/title-display/_title-display.scss +++ b/styles/src/atom/title-display/_title-display.scss @@ -1,3 +1,4 @@ +@use '../../quark/font'; @use '../../quark/typography'; @mixin ippon-title-display($level, $size) { @@ -10,7 +11,10 @@ } .ippon-title-display { + @include font.colors; + margin: 0; + text-decoration: none; } @include ippon-title-display(1, 'large') { diff --git a/styles/src/atom/title-display/title-display.code.pug b/styles/src/atom/title-display/title-display.code.pug index 2a47a9f..36f661d 100644 --- a/styles/src/atom/title-display/title-display.code.pug +++ b/styles/src/atom/title-display/title-display.code.pug @@ -7,3 +7,6 @@ include title-display.mixin.pug +ippon-title-display({ tag: 'h2', size: 'large' }) +ippon-title-display({ tag: 'h1', size: 'medium' }) +ippon-title-display({ tag: 'h5', size: 'small' }) + ++ippon-title-display({ tag: 'h3', color: 'brand-primary' }) ++ippon-title-display({ tag: 'h3', color: 'neutral-tertiary' }) diff --git a/styles/src/atom/title-display/title-display.md b/styles/src/atom/title-display/title-display.md index 784a983..858be20 100644 --- a/styles/src/atom/title-display/title-display.md +++ b/styles/src/atom/title-display/title-display.md @@ -3,3 +3,7 @@ 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`, …). + +The color can be changed with the same color classes as `text` (e.g., `-color-brand-primary`, `-color-neutral-tertiary`, …). + +A `title-display` used as a link (`a` tag) is never underlined. diff --git a/styles/src/atom/title-display/title-display.mixin.pug b/styles/src/atom/title-display/title-display.mixin.pug index 24a85d0..f7a654b 100644 --- a/styles/src/atom/title-display/title-display.mixin.pug +++ b/styles/src/atom/title-display/title-display.mixin.pug @@ -1,6 +1,7 @@ mixin ippon-title-display(options) - - const { tag = 'div', size } = options || {}; + - const { tag = 'div', size, color } = 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 + - const colorClass = color ? `-color-${color}` : null; + #{tag}.ippon-title-display(class=[alternativeClass, colorClass])= displayName diff --git a/styles/src/atom/title/_title.scss b/styles/src/atom/title/_title.scss index 46ed9d0..5f14bef 100644 --- a/styles/src/atom/title/_title.scss +++ b/styles/src/atom/title/_title.scss @@ -21,6 +21,7 @@ .ippon-title { margin: 0; + text-decoration: none; &.-placeholder { min-width: 12rem; diff --git a/styles/src/atom/title/title.md b/styles/src/atom/title/title.md index f6ca709..49a0050 100644 --- a/styles/src/atom/title/title.md +++ b/styles/src/atom/title/title.md @@ -4,6 +4,8 @@ The `title` will have an associated size depending on the heading level (e.g., ` Alternatives classes can be used to change the **level** using alternative classes (e.g., `-l1`, `-l2`, …). +A `title` used as a link (`a` tag) is never underlined. + **Placeholder (Loading State)** The `-placeholder` alternative displays a shimmer animation, typically used during content loading. diff --git a/styles/src/doc.scss b/styles/src/doc.scss index 9024a89..33daea1 100644 --- a/styles/src/doc.scss +++ b/styles/src/doc.scss @@ -1,2 +1 @@ -@use 'token/doctoken'; @use 'organism/docorganism'; diff --git a/styles/src/documentation/atomic-design/quote/atom.pug b/styles/src/documentation/atomic-design/quote/atom.pug new file mode 100644 index 0000000..075d6d2 --- /dev/null +++ b/styles/src/documentation/atomic-design/quote/atom.pug @@ -0,0 +1,6 @@ +.ippon-card.-information.-shadow-l1 + .ippon-v-space.-gap-8 + blockquote.ippon-v-space.-gap-8(cite='http://bradfrost.com/blog/post/atomic-web-design/#atoms') + p.ippon-text.-body Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. + p.ippon-text.-body Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. + .ippon-text.-body.-small.-color-neutral-tertiary #[cite Atomic Design] by Brad Frost diff --git a/styles/src/documentation/atomic-design/quote/molecule.pug b/styles/src/documentation/atomic-design/quote/molecule.pug new file mode 100644 index 0000000..63d7bb3 --- /dev/null +++ b/styles/src/documentation/atomic-design/quote/molecule.pug @@ -0,0 +1,8 @@ +.ippon-card.-information.-shadow-l1 + .ippon-v-space.-gap-8 + blockquote.ippon-v-space.-gap-8( + cite='http://bradfrost.com/blog/post/atomic-web-design/#molecules' + ) + p.ippon-text.-body Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems. + p.ippon-text.-body For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together. + .ippon-text.-body.-small.-color-neutral-tertiary #[cite Atomic Design] by Brad Frost diff --git a/styles/src/documentation/atomic-design/quote/organism.pug b/styles/src/documentation/atomic-design/quote/organism.pug new file mode 100644 index 0000000..d6cddeb --- /dev/null +++ b/styles/src/documentation/atomic-design/quote/organism.pug @@ -0,0 +1,8 @@ +.ippon-card.-information.-shadow-l1 + .ippon-v-space.-gap-8 + blockquote.ippon-v-space.-gap-8( + cite='http://bradfrost.com/blog/post/atomic-web-design/#organisms' + ) + p.ippon-text.-body Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. + p.ippon-text.-body Building up from molecules to organisms encourages creating standalone, portable, reusable components. + .ippon-text.-body.-small.-color-neutral-tertiary #[cite Atomic Design] by Brad Frost diff --git a/styles/src/documentation/atomic-design/quote/template.pug b/styles/src/documentation/atomic-design/quote/template.pug new file mode 100644 index 0000000..0f8327a --- /dev/null +++ b/styles/src/documentation/atomic-design/quote/template.pug @@ -0,0 +1,7 @@ +.ippon-card.-information.-shadow-l1 + .ippon-v-space.-gap-8 + blockquote.ippon-v-space.-gap-8( + cite='http://bradfrost.com/blog/post/atomic-web-design/#templates' + ) + p.ippon-text.-body Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action. + .ippon-text.-body.-small.-color-neutral-tertiary #[cite Atomic Design] by Brad Frost diff --git a/styles/src/documentation/layout-atomic.pug b/styles/src/documentation/layout-atomic.pug new file mode 100644 index 0000000..98470db --- /dev/null +++ b/styles/src/documentation/layout-atomic.pug @@ -0,0 +1,13 @@ +extends layout + +block title + title Ippon UI + +block body + .ippon-layout--header + block header + .ippon-layout--body + .ipp-doc-page(data-navigable) + .ipp-doc-page--container + .ipp-doc-page--content + block content diff --git a/styles/src/documentation/layout.pug b/styles/src/documentation/layout.pug new file mode 100644 index 0000000..05c9917 --- /dev/null +++ b/styles/src/documentation/layout.pug @@ -0,0 +1,23 @@ +doctype html +html(lang='en') + head + meta(charset='utf-8') + block title + title Ippon UI + meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') + meta(name='description', content='Ippon UI is the Ippon Technologies pattern library.') + 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(rel='stylesheet', href='[[TIKUI_BASEPATH]]tikui.css') + link(rel='stylesheet', href='[[TIKUI_BASEPATH]]documentation/style.css') + link(rel='stylesheet', href='[[TIKUI_BASEPATH]]lib/prismjs/prism-okaidia.css') + body + .ippon-layout + block body + :reload + script(src='[[TIKUI_BASEPATH]]lib/prismjs/prism.js') + script(src='[[TIKUI_BASEPATH]]lib/prismjs/prism-pug.js') + script(src='[[TIKUI_BASEPATH]]documentation/scripts/doc.js') diff --git a/styles/src/documentation/mixin.pug b/styles/src/documentation/mixin.pug new file mode 100644 index 0000000..f1ab05e --- /dev/null +++ b/styles/src/documentation/mixin.pug @@ -0,0 +1,15 @@ +include /organism/header/header.mixin.pug +include /molecule/tabs/tabs.mixin.pug +include /atom/tab/tab.mixin.pug + +mixin ippon-doc-navbar(url, title) + +ippon-header + +ippon-header--slot + a.ippon-title-display.-small.-color-brand-primary(href=url)= title + +ippon-header--slot + nav + +ippon-tabs({ id: 'doc-navigation' }) + block + +mixin ippon-doc-navbar-item(url, name, selected) + +ippon-tab({ controls: 'doc-navigation', href: url, selected: selected })= name diff --git a/styles/src/documentation/scripts/doc.js b/styles/src/documentation/scripts/doc.js new file mode 100644 index 0000000..122526c --- /dev/null +++ b/styles/src/documentation/scripts/doc.js @@ -0,0 +1,68 @@ +const ipponDocScripts = () => { + const titleSelectors = (content) => + [...content?.querySelectorAll('h1, h2, h3, h4, h5, h6')].filter((title) => title.id) || []; + + const initNav = () => { + const content = document.querySelector('[data-navigable]'); + const titles = titleSelectors(content); + + if (titles.length === 0) { + return; + } + + const nav = document.createElement('div'); + nav.classList.add('ipp-doc-page--nav'); + const navList = document.createElement('ul'); + navList.classList.add('ipp-doc-nav', 'ippon-v-space', '-gap-8'); + + titles.forEach((title) => { + const level = title.tagName.slice(1); + const item = document.createElement('a'); + item.setAttribute('href', `#${title.id}`); + item.innerText = title.innerText; + item.classList.add('ipp-doc-nav--link', 'ippon-text', '-body', '-color-neutral-secondary'); + item.classList.add(level === '1' ? '-bold' : '-small'); + const slot = document.createElement('li'); + slot.appendChild(item); + slot.classList.add('ipp-doc-nav--item'); + slot.classList.add(`-level-${level}`); + + navList.appendChild(slot); + }); + + nav.appendChild(navList); + + content.prepend(nav); + }; + + const launchOnHash = (launch) => { + const hash = location.hash; + + if (hash) { + launch(hash.slice(1)); + } + }; + + const launchOnAnchor = (launch) => (hash) => { + const element = document.getElementById(hash); + + if (element) { + launch(element); + } + }; + + const scrollToAnchor = () => launchOnHash(launchOnAnchor((anchor) => anchor.scrollIntoView())); + + const init = () => { + initNav(); + scrollToAnchor(); + }; + + init(); +}; + +document.addEventListener('DOMContentLoaded', ipponDocScripts, false); + +const copyCode = async (element) => { + await navigator.clipboard.writeText(element.dataset['code']); +}; diff --git a/styles/src/documentation/style.scss b/styles/src/documentation/style.scss new file mode 100644 index 0000000..eb74697 --- /dev/null +++ b/styles/src/documentation/style.scss @@ -0,0 +1,130 @@ +@use 'sass:map'; +@use '../quark/breakpoint'; +@use '../quark/typography'; + +body { + margin: 0; +} + +.ipp-doc-page { + @include typography.body-medium; + + &--nav { + margin-bottom: var(--ippon-size-24); + } + + &--container { + min-width: 0; + } + + &--content { + margin: 0 auto; + max-width: 70rem; + } + + @media (min-width: map.get(breakpoint.$media-breakpoints, 'desktop-s')) { + display: flex; + gap: var(--ippon-size-48); + align-items: flex-start; + + &--nav { + position: sticky; + top: 0; + flex-shrink: 0; + margin-bottom: 0; + padding-bottom: var(--ippon-size-32); + width: 14rem; + max-height: calc(100dvh - 8rem); + overflow: auto; + } + + &--container { + flex: 1; + } + } +} + +.ipp-doc-nav { + &--item { + &.-level-2 { + padding-left: var(--ippon-size-16); + } + + &.-level-3 { + padding-left: var(--ippon-size-32); + } + } + + &--link { + text-decoration: none; + + &:hover { + color: var(--ippon-color-brand-text-icon-primary); + } + } +} + +.ipp-doc-iframe { + border: 1px solid var(--ippon-color-neutral-border); + border-radius: var(--ippon-radius-m); + background-color: var(--ippon-color-neutral-surface-primary); + width: 100%; + resize: both; +} + +.ipp-doc-snippet { + box-sizing: border-box; + margin: 0; + border-radius: var(--ippon-radius-l); + width: 100%; + max-height: 15rem; + overflow: auto; +} + +.markdown { + h1, + h2, + h3, + h4, + h5 { + margin: 0 0 var(--ippon-size-8); + } + + h1 { + @include typography.title-1; + } + + h2 { + @include typography.title-2; + } + + h3 { + @include typography.title-3; + } + + h4 { + @include typography.title-4; + } + + h5 { + @include typography.title-5; + } + + p { + margin: 0 0 var(--ippon-size-8); + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: var(--ippon-color-brand-text-icon-primary); + } + + code { + border-radius: var(--ippon-radius-m); + background-color: var(--ippon-color-neutral-surface-secondary); + padding: 0 var(--ippon-size-4); + } +} diff --git a/styles/src/index.pug b/styles/src/index.pug index 7158b47..d475182 100644 --- a/styles/src/index.pug +++ b/styles/src/index.pug @@ -1,59 +1,70 @@ extends /layout-documentation +include /organism/button-card/button-card.mixin.pug +include /organism/h-space/h-space.mixin.pug +include /atom/text/text.mixin.pug +include /atom/icon/icon.mixin.pug + +mixin doc-section-card(url, name) + li + +ippon-button-card({ border: true, fullWidth: true, href: url }) + +ippon-h-space({ gap: 16, align: 'middle' }) + +ippon-h-space--slot({ expand: true }) + +ippon-text({ variant: 'label', size: 'large' })= name + +ippon-icon({ name: 'chevron-forward', size: 24 }) + block title - title Tikui + title Ippon UI 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 - | #{ '' } - | - | #{ '' } - | #{ '' } - | #{ '' } - | #{ '' } - | #{ '' } - | #{ '' } - .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') + .ippon-v-space.-gap-32 + h1.ippon-title Ippon UI pattern library + .ippon-v-space.-gap-24 + h2.ippon-title Use + h3.ippon-title With Node + p.ippon-text.-body The package is bundled into your application, so install it as a dev dependency: + pre.ipp-doc-snippet + code.language-shell npm install -D @ippon-ui/styles + p.ippon-text.-body Then import the fonts, icons and the compiled stylesheet once in your application entry point: + pre.ipp-doc-snippet + code.language-js + | import '@ippon-ui/styles/fonts/open-sans/400.css'; + | import '@ippon-ui/styles/fonts/open-sans/600.css'; + | import '@ippon-ui/styles/fonts/open-sans/700.css'; + | import '@ippon-ui/styles/fonts/saira-extra-condensed/700.css'; + | import '@ippon-ui/styles/icons/ionicons.css'; + | import '@ippon-ui/styles/tikui.css'; + h3.ippon-title With a stylesheet link + p.ippon-text.-body Import style using #[strong <link>] tag and replace #[strong {DOMAIN}] with the current domain: + p.ippon-text.-body + em HTML + pre.ipp-doc-snippet + code.language-html + | #{ '' } + | + | #{ '' } + | #{ '' } + | #{ '' } + | #{ '' } + | #{ '' } + | #{ '' } + p.ippon-text.-body + em Pug + pre.ipp-doc-snippet + 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 + 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') + h2.ippon-title Documentation + p.ippon-text.-body The Style have an #[a(href='http://atomicdesign.bradfrost.com', target='_blank') Atomic Design] structure. + ul.ippon-v-space.-gap-16 + +doc-section-card('[[TIKUI_BASEPATH]]token/token.html', 'Tokens') + +doc-section-card('[[TIKUI_BASEPATH]]atom/atom.html', 'Atoms') + +doc-section-card('[[TIKUI_BASEPATH]]molecule/molecule.html', 'Molecules') + +doc-section-card('[[TIKUI_BASEPATH]]organism/organism.html', 'Organisms') + +doc-section-card('[[TIKUI_BASEPATH]]template/template.html', 'Templates') diff --git a/styles/src/layout-documentation.pug b/styles/src/layout-documentation.pug index 63d68ae..b1536c8 100644 --- a/styles/src/layout-documentation.pug +++ b/styles/src/layout-documentation.pug @@ -6,9 +6,9 @@ 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')) + +ippon-doc-navbar('[[TIKUI_BASEPATH]]index.html', 'Ippon UI') + +ippon-doc-navbar-item('[[TIKUI_BASEPATH]]token/token.html', 'Tokens', isActive('token')) + +ippon-doc-navbar-item('[[TIKUI_BASEPATH]]atom/atom.html', 'Atoms', isActive('atom')) + +ippon-doc-navbar-item('[[TIKUI_BASEPATH]]molecule/molecule.html', 'Molecules', isActive('molecule')) + +ippon-doc-navbar-item('[[TIKUI_BASEPATH]]organism/organism.html', 'Organisms', isActive('organism')) + +ippon-doc-navbar-item('[[TIKUI_BASEPATH]]template/template.html', 'Templates', isActive('template')) diff --git a/styles/src/molecule/molecule.pug b/styles/src/molecule/molecule.pug index 2c6a365..8b6514b 100644 --- a/styles/src/molecule/molecule.pug +++ b/styles/src/molecule/molecule.pug @@ -4,21 +4,14 @@ block append vars - active = 'molecule'; block title - title Tikui - Molecules + title Ippon UI - 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=480) field/field.md - .tikui-vertical-spacing--line - include:componentDoc(height=370) import-file/import-file.md - .tikui-vertical-spacing--line - include:componentDoc(height=190) table/table.md - .tikui-vertical-spacing--line - include:componentDoc(height=60) tabs/tabs.md - .tikui-vertical-spacing--line - include:componentDoc(height=280) toggle/toggle.md + .ippon-v-space.-gap-32 + h1#molecules.ippon-title Molecules + include /documentation/atomic-design/quote/molecule + include:componentDoc(height=480) field/field.md + include:componentDoc(height=370) import-file/import-file.md + include:componentDoc(height=210) table/table.md + include:componentDoc(height=60) tabs/tabs.md + include:componentDoc(height=280) toggle/toggle.md diff --git a/styles/src/molecule/table/_table.scss b/styles/src/molecule/table/_table.scss index 56082c1..17e4827 100644 --- a/styles/src/molecule/table/_table.scss +++ b/styles/src/molecule/table/_table.scss @@ -30,17 +30,24 @@ box-sizing: border-box; padding: var(--ippon-size-8) var(--ippon-size-12); text-align: left; + + &.-minimal { + width: 0; + } } &--header { border-bottom: var(--_border); - } - &--row:last-child &--cell { - border-bottom: 0; + @include typography.body-medium-bold; } &--cell { border-bottom: var(--_border); } + + &--body &--row:last-child &--header, + &--body &--row:last-child &--cell { + border-bottom: 0; + } } diff --git a/styles/src/molecule/table/table.code.pug b/styles/src/molecule/table/table.code.pug index be4e39e..7036f46 100644 --- a/styles/src/molecule/table/table.code.pug +++ b/styles/src/molecule/table/table.code.pug @@ -6,20 +6,20 @@ include table.mixin.pug +ippon-table--header Column A +ippon-table--header Column B +ippon-table--header Column C - +ippon-table--header Column D + +ippon-table--header({ minimal: true }) Column D +ippon-table--body +ippon-table--row - +ippon-table--cell Cell A1 + +ippon-table--header Row 1 +ippon-table--cell Cell B1 +ippon-table--cell Cell C1 +ippon-table--cell Cell D1 +ippon-table--row - +ippon-table--cell Cell A2 + +ippon-table--header Row 2 +ippon-table--cell Cell B2 +ippon-table--cell Cell C2 +ippon-table--cell Cell D2 +ippon-table--row - +ippon-table--cell Cell A3 + +ippon-table--header Row 3 +ippon-table--cell Cell B3 +ippon-table--cell Cell C3 +ippon-table--cell Cell D3 diff --git a/styles/src/molecule/table/table.md b/styles/src/molecule/table/table.md index a578ec5..c3734b3 100644 --- a/styles/src/molecule/table/table.md +++ b/styles/src/molecule/table/table.md @@ -1 +1,5 @@ ## Table + +Cells and headers can shrink to their content width with `-minimal` (pass `{ minimal: true }` to the `ippon-table--header` and `ippon-table--cell` mixins). + +A row can start with a row header: use `ippon-table--header` as the first element of a body row. Row headers are bold and follow the same border rules as cells. diff --git a/styles/src/molecule/table/table.mixin.pug b/styles/src/molecule/table/table.mixin.pug index 39b2e31..43be454 100644 --- a/styles/src/molecule/table/table.mixin.pug +++ b/styles/src/molecule/table/table.mixin.pug @@ -10,12 +10,16 @@ mixin ippon-table--row tr.ippon-table--row block -mixin ippon-table--header - th.ippon-table--header +mixin ippon-table--header(options) + - const { minimal } = options || {}; + - const minimalClass = minimal ? '-minimal' : null; + th.ippon-table--header(class=minimalClass) block -mixin ippon-table--cell - td.ippon-table--cell +mixin ippon-table--cell(options) + - const { minimal } = options || {}; + - const minimalClass = minimal ? '-minimal' : null; + td.ippon-table--cell(class=minimalClass) block mixin ippon-table diff --git a/styles/src/organism/grid/_docgrid.scss b/styles/src/organism/grid/_docgrid.scss index 0e9fee1..fdf9822 100644 --- a/styles/src/organism/grid/_docgrid.scss +++ b/styles/src/organism/grid/_docgrid.scss @@ -1,7 +1,3 @@ -.ipp-doc-container { - container-type: inline-size; -} - .ipp-doc-slot { box-sizing: border-box; border: var(--ippon-size-4) solid var(--ippon-color-brand-border); diff --git a/styles/src/organism/grid/grid.render.pug b/styles/src/organism/grid/grid.render.pug index fc56c5c..0a2a332 100644 --- a/styles/src/organism/grid/grid.render.pug +++ b/styles/src/organism/grid/grid.render.pug @@ -1,5 +1,5 @@ extends /layout block body - .ipp-doc-container + .ippon-container include grid.code.pug diff --git a/styles/src/organism/organism.pug b/styles/src/organism/organism.pug index c22ae33..f90dfa9 100644 --- a/styles/src/organism/organism.pug +++ b/styles/src/organism/organism.pug @@ -4,29 +4,18 @@ block append vars - active = 'organism'; block title - title Tikui - Organisms + title Ippon UI - 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=540) button-card/button-card.md - .tikui-vertical-spacing--line - include:componentDoc(height=280) card/card.md - .tikui-vertical-spacing--line - include:componentDoc(height=110) container/container.md - .tikui-vertical-spacing--line - include:componentDoc(height=200) dropdown/dropdown.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 + .ippon-v-space.-gap-32 + h1#organisms.ippon-title Organisms + include /documentation/atomic-design/quote/organism + include:componentDoc(height=540) button-card/button-card.md + include:componentDoc(height=280) card/card.md + include:componentDoc(height=110) container/container.md + include:componentDoc(height=200) dropdown/dropdown.md + include:componentDoc(height=130) header/header.md + include:componentDoc(height=400) modal/modal.md + include:componentDoc(height=800) h-space/h-space.md + include:componentDoc(height=1120) v-space/v-space.md + include:componentDoc(height=550) grid/grid.md diff --git a/styles/src/template/template.pug b/styles/src/template/template.pug index f534c50..fb50fc7 100644 --- a/styles/src/template/template.pug +++ b/styles/src/template/template.pug @@ -4,13 +4,10 @@ block append vars - active = 'template'; block title - title Tikui - Templates + title Ippon UI - 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 + .ippon-v-space.-gap-32 + h1#templates.ippon-title Templates + include /documentation/atomic-design/quote/template + include:templateDoc layout/layout.md diff --git a/styles/src/token/_doctable.scss b/styles/src/token/_doctable.scss deleted file mode 100644 index f17fb69..0000000 --- a/styles/src/token/_doctable.scss +++ /dev/null @@ -1,14 +0,0 @@ -.ipp-doc-table { - width: 100%; - border-collapse: collapse; - font-family: var(--ippon-typography-font); - - &--cell { - padding: 0.5rem; - text-align: left; - - &.-minimal { - width: 0; - } - } -} diff --git a/styles/src/token/_doctoken.scss b/styles/src/token/_doctoken.scss deleted file mode 100644 index cce0755..0000000 --- a/styles/src/token/_doctoken.scss +++ /dev/null @@ -1 +0,0 @@ -@use 'doctable'; diff --git a/styles/src/token/color/color.js b/styles/src/token/color/color.js index d051d98..2521946 100644 --- a/styles/src/token/color/color.js +++ b/styles/src/token/color/color.js @@ -1,4 +1,4 @@ -import { makeTextTd } from '../token.js'; +import { makeLine, 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) => { @@ -11,7 +11,7 @@ export const ipponTokenColor = (colorsList, color) => { }); const addToColorsList = ({ prop, value }) => { - const tr = document.createElement('tr'); + const tr = makeLine(); const tdName = makeTextTd({ text: prop }); const tdValue = makeTextTd({ text: value.toString(), minimal: true }); const tdPreview = makeTextTd({ minimal: true }); diff --git a/styles/src/token/color/color.mixin.pug b/styles/src/token/color/color.mixin.pug index cf4f2ff..47fef9f 100644 --- a/styles/src/token/color/color.mixin.pug +++ b/styles/src/token/color/color.mixin.pug @@ -3,13 +3,13 @@ mixin 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) + table.ippon-table + thead.ippon-table--head + tr.ippon-table--row + th.ippon-table--header Name + th.ippon-table--header Value + th.ippon-table--header Preview + tbody.ippon-table--body(id=id) script(type='module'). import { ipponTokenColor } from '[[TIKUI_BASEPATH]]token/color/color.js'; diff --git a/styles/src/token/color/color.pug b/styles/src/token/color/color.pug index e2dc263..dfa79a3 100644 --- a/styles/src/token/color/color.pug +++ b/styles/src/token/color/color.pug @@ -1,9 +1,7 @@ -.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' - ) +.ippon-v-space.-gap-24 + h2#color.ippon-title Colors + 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' + ) diff --git a/styles/src/token/radius/radius.mixin.pug b/styles/src/token/radius/radius.mixin.pug index f57008a..91999eb 100644 --- a/styles/src/token/radius/radius.mixin.pug +++ b/styles/src/token/radius/radius.mixin.pug @@ -3,8 +3,8 @@ mixin ippon-radius(radius) - const radiusVar = `--ippon-radius-${radius}`; section h3= radius - table.ipp-doc-table - tbody(id=id) + table.ippon-table + tbody.ippon-table--body(id=id) script(type='module'). import { ipponTokenRadius } from '[[TIKUI_BASEPATH]]token/radius/radius.js'; diff --git a/styles/src/token/radius/radius.pug b/styles/src/token/radius/radius.pug index c8a2665..904fa78 100644 --- a/styles/src/token/radius/radius.pug +++ b/styles/src/token/radius/radius.pug @@ -1,9 +1,7 @@ -.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' - ) +.ippon-v-space.-gap-24 + h2#radius.ippon-title Radius + 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' + ) diff --git a/styles/src/token/shadow/shadow.mixin.pug b/styles/src/token/shadow/shadow.mixin.pug index 63fbe00..ebf4765 100644 --- a/styles/src/token/shadow/shadow.mixin.pug +++ b/styles/src/token/shadow/shadow.mixin.pug @@ -3,8 +3,8 @@ mixin ippon-shadow(level) - const shadowVar = `--ippon-shadow-${level}`; section h3= level - table.ipp-doc-table - tbody(id=id) + table.ippon-table + tbody.ippon-table--body(id=id) script(type='module'). import { ipponTokenShadow } from '[[TIKUI_BASEPATH]]token/shadow/shadow.js'; (() => { diff --git a/styles/src/token/shadow/shadow.pug b/styles/src/token/shadow/shadow.pug index 6309e4a..ee033f0 100644 --- a/styles/src/token/shadow/shadow.pug +++ b/styles/src/token/shadow/shadow.pug @@ -1,9 +1,7 @@ -.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' - ) +.ippon-v-space.-gap-24 + h2#shadow.ippon-title Shadow + 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' + ) diff --git a/styles/src/token/token.js b/styles/src/token/token.js index 650f82d..358f223 100644 --- a/styles/src/token/token.js +++ b/styles/src/token/token.js @@ -1,6 +1,6 @@ export const makeTd = ({ minimal } = {}) => { const td = document.createElement('td'); - td.classList.add('ipp-doc-table--cell'); + td.classList.add('ippon-table--cell'); if (minimal) { td.classList.add('-minimal'); } @@ -28,11 +28,15 @@ export const makeTh = (content) => { if (content) { th.textContent = content; } - th.classList.add('ipp-doc-table--cell'); + th.classList.add('ippon-table--header'); th.classList.add('-minimal'); return th; }; -export const makeLine = () => document.createElement('tr'); +export const makeLine = () => { + const tr = document.createElement('tr'); + tr.classList.add('ippon-table--row'); + return tr; +}; export const propToValue = (prop) => window.getComputedStyle(document.body).getPropertyValue(prop); diff --git a/styles/src/token/token.pug b/styles/src/token/token.pug index 9a2cf34..5486450 100644 --- a/styles/src/token/token.pug +++ b/styles/src/token/token.pug @@ -4,22 +4,17 @@ block append vars - active = 'token'; block title - title Tikui - Tokens + title Ippon UI - 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 + .ippon-v-space.-gap-32 + h1#tokens.ippon-title Tokens + .ippon-card.-information.-shadow-l1 + .ippon-v-space.-gap-8 + blockquote.ippon-v-space.-gap-8 + p.ippon-text.-body « 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. » + .ippon-text.-body.-small.-color-neutral-tertiary Jina Anne + include color/color + include radius/radius + include shadow/shadow + include typography/typography diff --git a/styles/src/token/typography/typography.mixin.pug b/styles/src/token/typography/typography.mixin.pug index a2341d5..3cf8ce4 100644 --- a/styles/src/token/typography/typography.mixin.pug +++ b/styles/src/token/typography/typography.mixin.pug @@ -6,8 +6,8 @@ mixin ippon-typography(typography) 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) + table.ippon-table + tbody.ippon-table--body(id=id) script(type='module'). import { ipponTokenTypography } from '[[TIKUI_BASEPATH]]token/typography/typography.js'; diff --git a/styles/src/token/typography/typography.pug b/styles/src/token/typography/typography.pug index c79ae1b..54baad5 100644 --- a/styles/src/token/typography/typography.pug +++ b/styles/src/token/typography/typography.pug @@ -1,9 +1,7 @@ -.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' - ) +.ippon-v-space.-gap-24 + h2#typography.ippon-title Typographies + 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' + ) diff --git a/styles/tikuiconfig.json b/styles/tikuiconfig.json index 39f0c43..5311a39 100644 --- a/styles/tikuiconfig.json +++ b/styles/tikuiconfig.json @@ -1,5 +1,4 @@ { - "documentation": "tikui", "port": 4220, "reloadPort": 4221, "expose": {