@fortanix/baklava 1.0.0-beta-20241114

package/src/styling/variables.ts

@@ -0,0 +1,64 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import variablesText from './variables.scss?raw';
+
+
+type Variables = Record<string, string>;
+const variables = [...variablesText.matchAll(/\$(.+):(.+)(?:!default).*;/g)].reduce<Variables>(
+  (variables, [match, variableName, variableValue]) => {
+    if (!match.includes('/* ignore */') && variableName && variableValue) {
+      variables[variableName.trim()] = variableValue.trim();
+    }
+    return variables;
+  },
+  {},
+);
+
+
+type VariableName = string;
+
+type Color = { category: string, weight: number, color: string };
+type Colors = Record<VariableName, Color>;
+export const colors = Object.entries(variables).reduce<Colors>(
+  (colors, [variableName, value]) => {
+    const match = variableName.match(/^color-(.+)-(\d+)$/);
+    if (!match) { return colors; }
+    
+    const [_, category, weight] = match;
+    if (typeof category === 'undefined' || typeof weight === 'undefined') { throw new Error(`Expected match`); }
+    
+    colors[variableName] = { category, weight: Number(weight), color: value };
+    return colors;
+  },
+  {},
+);
+
+// Group colors by category
+type ColorsByCategory = Record<VariableName, Record<string, Color>>;
+export const colorsByCategory = Object.values(colors).reduce<ColorsByCategory>(
+  (colorsByCategory, { category, weight, color }) => {
+    colorsByCategory[category] = Object.assign(
+      colorsByCategory[category] ?? {},
+      { [`${category}-${weight}`]: { category, weight: Number(weight), color } },
+    );
+    return colorsByCategory;
+  },
+  {},
+);
+
+type FontSizes = Record<string, { sizeQualifier: string, sizeInRem: number }>;
+export const fontSizes = Object.entries(variables).reduce<FontSizes>(
+  (fontSizes, [variableName, value]) => {
+    const match = variableName.match(/^font-size-(.+)$/);
+    if (!match) { return fontSizes; }
+    
+    const [_, sizeQualifier] = match;
+    if (typeof sizeQualifier === 'undefined') { throw new Error(`Expected match`); }
+    
+    fontSizes[variableName] = { sizeQualifier, sizeInRem: Number(value.replace('rem', '')) };
+    return fontSizes;
+  },
+  {},
+);

package/src/types/globals.d.ts

@@ -0,0 +1,14 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+declare module "*.module.css" {
+  //const classes: Record<string, string>;
+  const classes: any; // Must be `any` rather than `Record<>`, because with record index returns `string | undefined`
+  export default classes;
+}
+declare module "*.module.scss" {
+  //const classes: Record<string, string>;
+  const classes: any; // Must be `any` rather than `Record<>`, because with record index returns `string | undefined`
+  export default classes;
+}

package/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/typography/BodyText/BodyText.mixins.scss

@@ -0,0 +1,224 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../Heading/Heading.mixins.scss' as Heading;
+
+
+/* Match either the current context (&), or a descendent of it */
+/* Note: only use this on single-element selectors (e.g. `p`), not on descendent selectors like `p a`. */
+@mixin self-or-descendent($selector) {
+  #{$selector}#{&}, & #{$selector} {
+    @content;
+  }
+}
+
+@mixin bk-body-text {
+  --bk-body-text-line-height: 1.6;
+  --bk-body-block-spacing: 0.8lh;
+  
+  font-family: var(--bk-font-family-body);
+  font-size: 1rem;
+  
+  overflow-wrap: break-word; /* Prevent long words causing overflow */
+  text-wrap: pretty; /* Favor better typography for text wrapping (e.g. prevent orphans */
+  hyphens: auto;
+  line-height: var(--bk-body-text-line-height);
+  
+  @include self-or-descendent(h1) { @include Heading.h1; }
+  @include self-or-descendent(h2) { @include Heading.h2; }
+  @include self-or-descendent(h3) { @include Heading.h3; }
+  @include self-or-descendent(h4) { @include Heading.h4; }
+  @include self-or-descendent(h5) { @include Heading.h5; }
+  @include self-or-descendent(h6) { @include Heading.h6; }
+  
+  @include self-or-descendent(p) { margin-block-start: var(--bk-body-block-spacing); }
+  
+  @include self-or-descendent(hr) {
+    margin-block: var(--bk-sizing-3);
+    border: none;
+    border-top: 1px solid #dbdbdb;
+  }
+  
+  @include self-or-descendent(":is(button, input, textarea)") {
+    transition:
+      background-color 0.1s linear,
+      border-color 0.1s linear,
+      color 0.1s linear,
+      box-shadow 0.1s linear,
+      transform 0.1s ease;
+  }
+  @include self-or-descendent(":is(b, strong, th)") {
+    font-weight: 600;
+  }
+  @include self-or-descendent(":is(u)") {
+    text-decoration: underline;
+  }
+  @include self-or-descendent(":is(i, em)") {
+    font-style: italic;
+  }
+  
+  @include self-or-descendent(blockquote) {
+    border-left: 4px solid #0096bfab;
+    margin: 1.5em 0;
+    padding: 0.5em 1em;
+    font-style: italic;
+    
+    & > footer, & cite {
+      font-style: normal;
+    }
+  }
+  
+  @include self-or-descendent(#{address}) {
+    font-style: normal;
+  }
+  
+  @include self-or-descendent(':is(button, input[type=submit], input[type=button], input[type=checkbox])') {
+    cursor: pointer;
+  }
+  
+  @include self-or-descendent(':is(input:not([type=checkbox]):not([type=radio]), select)') {
+    display: block;
+  }
+  
+  @include self-or-descendent(':is(input, select, button, textarea)') {
+    color: #000000;
+    background-color: #efefef;
+    font-family: inherit;
+    font-size: inherit;
+    margin-right: 6px;
+    margin-bottom: 6px;
+    padding: 10px;
+    border: none;
+    border-radius: 6px;
+    outline: none;
+  }
+  
+  /* @include self-or-descendent :is(
+    input:not([type=checkbox]):not([type=radio]),
+    select,
+    button,
+    textarea,
+  ) {
+    -webkit-appearance: none;
+  } */
+  
+  @include self-or-descendent(textarea) {
+    margin-right: 0;
+    width: 100%;
+    box-sizing: border-box;
+    resize: vertical;
+  }
+  
+  @include self-or-descendent(':is(button, input[type=submit], input[type=button])') {
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+  
+  @include self-or-descendent(':is(button:hover, input[type=submit]:hover, input[type=button]:hover)') {
+    background: #dddddd;
+  }
+  
+  @include self-or-descendent(':is(input:disabled, select:disabled, button:disabled, textarea:disabled)') {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+  
+  & ::-webkit-input-placeholder {
+    color: #949494;
+  }
+  
+  & ::placeholder {
+    color: #949494;
+  }
+  
+  @include self-or-descendent(a) {
+    text-decoration: none;
+    color: #0076d1;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  @include self-or-descendent(':is(code, kbd)') {
+    background: light-dark(#ccc, #333);
+    padding: 5px;
+    border-radius: 3px;
+    font-family: var(--bk-font-family-code, monospace);
+  }
+  
+  @include self-or-descendent(':is(pre)') {
+    > code {
+      padding: 10px;
+      display: block;
+      overflow-x: auto;
+    }
+  }
+  
+  @include self-or-descendent(img) {
+    max-width: 100%;
+  }
+  
+  @include self-or-descendent(':is(ul, ol, dl)') {
+    --list-indent: 1.5ch;
+    margin-block-start: var(--bk-body-block-spacing);
+  }
+  @include self-or-descendent(':is(li)') {
+    /* Nested lists */
+    > :is(ul, ol, dl) {
+      margin-left: var(--list-indent);
+    }
+  }
+  @include self-or-descendent(ul) {
+    display: block;
+    /* Note: do not use list-style: none, this causes accessibility issues:
+    https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/#aa-newer-accessibility-concerns-with-lists */
+    list-style: disc inside;
+    
+    > li::marker {
+      /* Override the marker style so we customize the gap size */
+      /* https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/ */
+      content: '\2022' ' ';
+      margin: 0; /* Margin and padding are not supported by `::marker` currently */
+    }
+    > li:not(:first-of-type) { /* Note: in the future we could use `margin-trim` instead */
+      margin-block-start: calc(var(--bk-body-block-spacing) / 4);
+    }
+  }
+  @include self-or-descendent(ol) {
+    display: block;
+    /* Note: do not use list-style: none, this causes accessibility issues:
+    https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/#aa-newer-accessibility-concerns-with-lists */
+    list-style: decimal inside;
+    
+    > li:not(:first-of-type) {
+      margin-block-start: calc(var(--bk-body-block-spacing) / 4);
+    }
+  }
+  
+  @include self-or-descendent(table) {
+    border-collapse: collapse;
+    margin-bottom: 10px;
+    width: 100%;
+  }
+  
+  @include self-or-descendent(':is(td, th)') {
+    padding: 6px;
+    text-align: left;
+  }
+  
+  @include self-or-descendent(th) {
+    border-bottom: 1px solid #dbdbdb;
+  }
+  
+  @include self-or-descendent(tbody) {
+    tr:nth-child(even) {
+      background-color: #efefef;
+    }
+  }
+  
+  > :first-child {
+    margin-block-start: 0;
+  }
+}

package/src/typography/BodyText/BodyText.module.scss

@@ -0,0 +1,28 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../styling/defs.scss' as bk;
+@use './BodyText.mixins.scss' as bodytext;
+
+/* Use a separate layer for body-text so that we can `revert-layer` */
+@layer baklava.body-text {
+  /*
+  XXX `@scope` does not yet have browser support
+  @scope (.bk-body-text) to (.bk, .isolate) { /* Do not leak .bk-body-text styling into components * /
+    :scope {
+      @include bk.component-base(bk-body-text);
+      @mixin bk-body-text;
+    }
+  }
+  */
+  
+  .bk-body-text {
+    @include bk.component-base(bk-body-text);
+    @include bodytext.bk-body-text;
+  }
+  
+  .bk-body-text .bk {
+    all: revert-layer;
+  }
+}

package/src/typography/BodyText/BodyText.stories.tsx

@@ -0,0 +1,109 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../../components/actions/Button/Button.tsx';
+import { Panel } from '../../components/containers/Panel/Panel.tsx';
+
+import { BodyText } from './BodyText.tsx';
+
+
+type BodyTextArgs = React.ComponentProps<typeof BodyText>;
+type Story = StoryObj<typeof BodyText>;
+
+export default {
+  component: BodyText,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <BodyText {...args}/>,
+} satisfies Meta<BodyTextArgs>;
+
+
+const SampleBodyText = () => {
+  const id = React.useId();
+  return (
+    <>
+      <h1>Example of body text</h1>
+      <h2>Example of body text</h2>
+      <p>
+        Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor. Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin euismod neque.
+      </p>
+      <p>
+        Duis mollis, justo vel pretium luctus, risus sem eleifend lectus, ac convallis dolor nibh id sapien. Donec vestibulum tellus non rutrum convallis. Aenean venenatis enim in egestas lobortis. Donec mollis elit in turpis imperdiet congue vel at magna. Vestibulum bibendum, ipsum quis lobortis lobortis, lorem libero mollis sapien, sed tempus lacus nibh a nunc. Vivamus sed sem eleifend, rutrum erat eget, ultricies neque. Morbi condimentum dolor vel ipsum consectetur iaculis. Donec ornare diam at orci luctus, sed placerat quam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum molestie augue. Ut vel nisl a augue ornare volutpat. Phasellus et enim in mi maximus ultricies. Integer dignissim ipsum mauris, id bibendum eros euismod et.
+      </p>
+      <p>An unordered list:</p>
+      <ul>
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li> Nested list:
+          <ol>
+            <li>Nested list item 1</li>
+            <li>Nested list item 2</li>
+          </ol>
+        </li>
+      </ul>
+      <p>An ordered list:</p>
+      <ol>
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li> Nested list:
+          <ul>
+            <li>Nested list item 1</li>
+            <li>Nested list item 2</li>
+          </ul>
+        </li>
+      </ol>
+      <hr/>
+      <h2>Forms</h2>
+      
+      <form>
+        <fieldset>
+          <legend>Test</legend>
+          
+          <label htmlFor={`${id}-input-1`}>Text input:</label>
+          <input id={`${id}-input-1`} type="text"/>
+        </fieldset>
+      </form>
+    </>
+  );
+};
+
+export const Standard: Story = {
+  args: {
+    children: <SampleBodyText/>,
+  },
+};
+
+export const WithComponents: Story = {
+  args: {
+    children: (
+      <>
+        <h1>Body text with embedded components</h1>
+        <p>
+          Body text can include Baklava components. Those components should not be affected by any styling inherited
+          from the body text styling.
+        </p>
+        <p>Here is a button component:</p>
+        <Button variant="primary" label="Button"/>
+        
+        <Panel>
+          <Panel.Heading>This panel contains a nested a bk-body-text</Panel.Heading>
+          
+          <div className="bk-body-text">
+            <p>The following should be bold and underlined:</p>
+            <p><strong><u>This is body text embedded within a component.</u></strong></p>
+          </div>
+        </Panel>
+      </>
+    ),
+  },
+};

package/src/typography/BodyText/BodyText.tsx

@@ -0,0 +1,30 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './BodyText.module.scss';
+
+
+export { cl as BodyTextClassNames };
+
+export type BodyTextProps = React.PropsWithChildren<ComponentProps<'article'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * BodyText component.
+ */
+export const BodyText = ({ unstyled, ...propsRest }: BodyTextProps) => {
+  return (
+    <article
+      {...propsRest}
+      className={cx({
+        bk: true,
+        ['bk-body-text']: !unstyled,
+      }, propsRest.className)}
+    />
+  );
+};

package/src/typography/Heading/Heading.mixins.scss

@@ -0,0 +1,42 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../styling/defs.scss' as bk;
+
+@mixin heading {
+  @include bk.font(bk.$font-family-display);
+  text-wrap: balance;
+  line-height: 1.6;
+}
+
+@mixin h1 {
+  @include heading;
+  font-size: 42px;
+  font-weight: 300;
+}
+@mixin h2 {
+  @include heading;
+  font-size: 30px;
+  font-weight: 400;
+}
+@mixin h3 {
+  @include heading;
+  font-size: 24px;
+  font-weight: 400;
+}
+@mixin h4 {
+  @include heading;
+  font-size: 20px;
+  font-weight: 400;
+}
+@mixin h5 {
+  @include heading;
+  font-size: 16px;
+  font-weight: 600;
+}
+@mixin h6 {
+  @include heading;
+  font-size: 16px;
+  font-weight: 500;
+}

package/src/typography/Heading/Heading.module.scss

@@ -0,0 +1,15 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../styling/defs.scss' as bk;
+@use './Heading.mixins.scss' as Heading;
+
+@layer baklava.components {
+  .bk-h1 { @include bk.component-base(bk-h1); @include Heading.h1; }
+  .bk-h2 { @include bk.component-base(bk-h2); @include Heading.h2; }
+  .bk-h3 { @include bk.component-base(bk-h3); @include Heading.h3; }
+  .bk-h4 { @include bk.component-base(bk-h4); @include Heading.h4; }
+  .bk-h5 { @include bk.component-base(bk-h5); @include Heading.h5; }
+  .bk-h6 { @include bk.component-base(bk-h6); @include Heading.h6; }
+}

package/src/typography/Heading/Heading.stories.tsx

@@ -0,0 +1,112 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as Heading from './Heading.tsx';
+
+
+export default {
+  component: Heading.H1,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+} satisfies Meta<Heading.H1Props>;
+
+
+const BaseStory = {
+  parameters: {
+    design: { type: 'figma', url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FnOF5w9LfPiJabQD5yPzCEp%2F2024-Design-System-UX%3Fnode-id%3D473%253A73818%26t%3DjsTF1ykn6P4yp2et-1' },
+  },
+} as const;
+
+export const H1: StoryObj<typeof Heading.H1> = {
+  ...BaseStory,
+  name: 'H1',
+  args: { children: `H1 - Montserrat Light 42` },
+  render: (args) => <Heading.H1 {...args}/>,
+};
+
+export const H1TextWrap: StoryObj<typeof Heading.H1> = {
+  ...BaseStory,
+  name: 'H1 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H1 {...args}/>,
+};
+
+export const H2: StoryObj<typeof Heading.H2> = {
+  ...BaseStory,
+  name: 'H2',
+  args: { children: `H2 - Montserrat Regular 30` },
+  render: (args) => <Heading.H2 {...args}/>,
+};
+
+export const H2TextWrap: StoryObj<typeof Heading.H2> = {
+  ...BaseStory,
+  name: 'H2 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H2 {...args}/>,
+};
+
+export const H3: StoryObj<typeof Heading.H3> = {
+  ...BaseStory,
+  name: 'H3',
+  args: { children: `H3 - Montserrat Regular 24` },
+  render: (args) => <Heading.H3 {...args}/>,
+};
+
+export const H3TextWrap: StoryObj<typeof Heading.H3> = {
+  ...BaseStory,
+  name: 'H3 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H3 {...args}/>,
+};
+
+export const H4: StoryObj<typeof Heading.H4> = {
+  ...BaseStory,
+  name: 'H4',
+  args: { children: `H4 - Montserrat Regular 20` },
+  render: (args) => <Heading.H4 {...args}/>,
+};
+
+export const H4TextWrap: StoryObj<typeof Heading.H4> = {
+  ...BaseStory,
+  name: 'H4 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H4 {...args}/>,
+};
+
+export const H5: StoryObj<typeof Heading.H5> = {
+  ...BaseStory,
+  name: 'H5',
+  args: { children: `H5 - Montserrat Semi-Bold 16` },
+  render: (args) => <Heading.H5 {...args}/>,
+};
+
+export const H5TextWrap: StoryObj<typeof Heading.H5> = {
+  ...BaseStory,
+  name: 'H5 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H5 {...args}/>,
+};
+
+export const H6: StoryObj<typeof Heading.H6> = {
+  ...BaseStory,
+  name: 'H6',
+  args: { children: `H6 - Montserrat Medium 16` },
+  render: (args) => <Heading.H6 {...args}/>,
+};
+
+export const H6TextWrap: StoryObj<typeof Heading.H6> = {
+  ...BaseStory,
+  name: 'H6 [text wrap]',
+  args: { children: `Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines. Some really long text to demonstrate text wrapping over multiple lines.` },
+  render: (args) => <Heading.H6 {...args}/>,
+};
+