@fundamento/make-kit-ekzemplo 0.1.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +10 -0
  2. package/dist/element.cjs +906 -0
  3. package/dist/element.d.ts +3 -0
  4. package/dist/element.js +903 -0
  5. package/dist/index.cjs +35 -0
  6. package/dist/index.d.ts +23 -0
  7. package/dist/index.js +31 -0
  8. package/guidelines/Guidelines.md +15 -0
  9. package/guidelines/components/butono.md +81 -0
  10. package/guidelines/foundations/color.md +82 -0
  11. package/guidelines/foundations/dimensioj.md +14 -0
  12. package/guidelines/foundations/spacing.md +60 -0
  13. package/guidelines/foundations/typography.md +22 -0
  14. package/guidelines/setup.md +17 -0
  15. package/package.json +54 -0
  16. package/styles.css +1098 -0
  17. package/tailwind.css +199 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,35 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_element = require("./element.cjs");
3
+ let react = require("react");
4
+ //#region src/react.ts
5
+ require_element.defineFmButono();
6
+ /** <fm-butono> for React 18 and 19. */
7
+ var Butono = (0, react.forwardRef)(function Butono({ variant, tone, size, type, disabled, loading, fullWidth, label, iconStart, iconEnd, children, ...rest }, ref) {
8
+ const attributes = {
9
+ "variant": variant,
10
+ "tone": tone,
11
+ "size": size,
12
+ "type": type,
13
+ "disabled": disabled === true ? true : void 0,
14
+ "loading": loading === true ? true : void 0,
15
+ "full-width": fullWidth === true ? true : void 0,
16
+ "label": label
17
+ };
18
+ for (const key of Object.keys(attributes)) if (attributes[key] === void 0) delete attributes[key];
19
+ return (0, react.createElement)("fm-butono", {
20
+ ...rest,
21
+ ...attributes,
22
+ ref
23
+ }, iconStart === void 0 ? null : (0, react.createElement)("span", {
24
+ slot: "icon-start",
25
+ key: "icon-start"
26
+ }, iconStart), iconEnd === void 0 ? null : (0, react.createElement)("span", {
27
+ slot: "icon-end",
28
+ key: "icon-end"
29
+ }, iconEnd), children);
30
+ });
31
+ //#endregion
32
+ exports.Butono = Butono;
33
+ exports.FmButono = require_element.FmButono;
34
+ exports.defineEroj = require_element.defineEroj;
35
+ exports.defineFmButono = require_element.defineFmButono;
package/dist/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ // Generated by fm projekcioj build; do not edit (Art. I).
2
+ import type { HTMLAttributes, ReactNode } from "react";
3
+
4
+ /** Props of <Butono>: the Skemo props of butono, plus HTML attributes for the element. */
5
+ export interface ButonoProps extends Omit<HTMLAttributes<HTMLElement>, "variant" | "tone" | "size" | "type" | "disabled" | "loading" | "fullWidth" | "label" | "children"> {
6
+ variant?: "primary" | "secondary" | "tertiary";
7
+ tone?: "default" | "danger";
8
+ size?: "small" | "medium" | "large";
9
+ type?: "button" | "submit" | "reset";
10
+ disabled?: boolean;
11
+ loading?: boolean;
12
+ fullWidth?: boolean;
13
+ label?: string;
14
+ iconStart?: ReactNode;
15
+ iconEnd?: ReactNode;
16
+ children?: ReactNode;
17
+ }
18
+
19
+ export declare class FmButono extends HTMLElement {}
20
+ export declare const Butono: import("react").ForwardRefExoticComponent<
21
+ ButonoProps & import("react").RefAttributes<HTMLElement>
22
+ >;
23
+ export declare function defineEroj(): void;
package/dist/index.js ADDED
@@ -0,0 +1,31 @@
1
+ import { FmButono, defineEroj, defineFmButono } from "./element.js";
2
+ import { createElement, forwardRef } from "react";
3
+ //#region src/react.ts
4
+ defineFmButono();
5
+ /** <fm-butono> for React 18 and 19. */
6
+ var Butono = forwardRef(function Butono({ variant, tone, size, type, disabled, loading, fullWidth, label, iconStart, iconEnd, children, ...rest }, ref) {
7
+ const attributes = {
8
+ "variant": variant,
9
+ "tone": tone,
10
+ "size": size,
11
+ "type": type,
12
+ "disabled": disabled === true ? true : void 0,
13
+ "loading": loading === true ? true : void 0,
14
+ "full-width": fullWidth === true ? true : void 0,
15
+ "label": label
16
+ };
17
+ for (const key of Object.keys(attributes)) if (attributes[key] === void 0) delete attributes[key];
18
+ return createElement("fm-butono", {
19
+ ...rest,
20
+ ...attributes,
21
+ ref
22
+ }, iconStart === void 0 ? null : createElement("span", {
23
+ slot: "icon-start",
24
+ key: "icon-start"
25
+ }, iconStart), iconEnd === void 0 ? null : createElement("span", {
26
+ slot: "icon-end",
27
+ key: "icon-end"
28
+ }, iconEnd), children);
29
+ });
30
+ //#endregion
31
+ export { Butono, FmButono, defineEroj, defineFmButono };
package/guidelines/Guidelines.md ADDED
@@ -0,0 +1,15 @@
1
+ # Fundamento (ekzemplo)
2
+
3
+ This kit is the design system Fundamento in the Aspekto `ekzemplo`. Build screens from its
4
+ components and its tokens; never write a colour, a size or a font value yourself.
5
+
6
+ - Use the components of this kit; do not rebuild them.
7
+ - Take every value from a token: Tailwind classes `*-fm-*` or the CSS variables `--fm-*`.
8
+ - Switch brand, colour scheme, contrast, density, viewport and motion with the `data-fm-*`
9
+ attributes on `<html>`; never with a second stylesheet.
10
+ - A container holds at most one butono with variant=primary; instances without a named container count as one container.
11
+ - An action that destroys data is never a butono with variant=primary and tone=default: as the main action (a confirmation dialog) it is primary with tone=danger, next to another primary action it is secondary.
12
+ - Every butono has a visible label or, when it shows only an icon, a label prop as its accessible name.
13
+
14
+ Where to look: `setup.md` for the imports, `foundations/` for the tokens, `components/` for
15
+ each component.
package/guidelines/components/butono.md ADDED
@@ -0,0 +1,81 @@
1
+ # Butono
2
+
3
+ A button: starts an action. Its label is always visible, or given as the label prop when only an icon shows.
4
+
5
+ Use `<Butono>` in React, or the element `<fm-butono>` in plain HTML. The label is the children of
6
+ the component; for an icon-only button set `label` as its accessible name.
7
+
8
+ ## Props
9
+
10
+ | Prop | Values | Default | Meaning |
11
+ |---|---|---|---|
12
+ | `variant` | `primary`, `secondary`, `tertiary` | `secondary` | Emphasis: at most one primary per container (Regulo one-primary-per-container). |
13
+ | `tone` | `default`, `danger` | `default` | Meaning: danger marks an action that destroys data (Regulo destructive-not-primary-color); only with variant=primary. |
14
+ | `size` | `small`, `medium`, `large` | `medium` | Height, padding, type and icon size; every size is at least size.target.min (Regulo touch-target-min). |
15
+ | `type` | `button`, `submit`, `reset` | `button` | What the button does in a form. |
16
+ | `disabled` | boolean | `false` | Not available; skipped by the keyboard. |
17
+ | `loading` | boolean | `false` | Working: keeps focus, announces busy, ignores activation. |
18
+ | `full-width` | boolean | `false` | Takes the full inline size of its container. |
19
+ | `label` | string | – | Accessible name when the label slot is empty (icon-only); never shown. |
20
+
21
+ States: `rest`, `hover`, `pressed`, `focus`, `disabled`, `loading`. They come from the browser (hover, press, focus) or from `disabled` and
22
+ `loading`; never style them yourself.
23
+
24
+ ## Which button for which intent
25
+
26
+ | Intent | Words | Use | Rule |
27
+ |---|---|---|---|
28
+ | destructive | delete, remove, destroy, discard | `variant=primary`, `tone=danger` | `destructive-not-primary-color` |
29
+ | confirm | save, submit, confirm, continue | `variant=primary` | `one-primary-per-container` |
30
+ | dismiss | cancel, close, back, abbrechen | `variant=tertiary` | – |
31
+
32
+ ## Rules
33
+
34
+ - **one-primary-per-container** — A container holds at most one butono with variant=primary; instances without a named container count as one container.
35
+ Why: Two equal calls to action move the decision onto the user; one primary action makes the next step obvious, and every other action steps back as secondary or tertiary.
36
+ - **destructive-not-primary-color** — An action that destroys data is never a butono with variant=primary and tone=default: as the main action (a confirmation dialog) it is primary with tone=danger, next to another primary action it is secondary.
37
+ Why: The primary colour promises the expected next step; a destructive action needs a colour that warns before it acts, and a danger fill only where the destruction is the step the user came for.
38
+ - **label-required** — Every butono has a visible label or, when it shows only an icon, a label prop as its accessible name.
39
+ Why: A button without a name cannot be found or understood by assistive technology, and an icon alone is not understood by everyone; the name is what a screen reader announces and what voice control listens for.
40
+
41
+ ## Examples
42
+
43
+ **CORRECT** — One primary action per dialog: Speichern leads, Abbrechen steps back as tertiary.
44
+
45
+ ```html
46
+ <fm-butono variant="primary" type="submit">Speichern</fm-butono>
47
+ <fm-butono variant="tertiary">Abbrechen</fm-butono>
48
+ ```
49
+
50
+ **WRONG** — Two primary buttons in one dialog: the user has to decide which one is the main action.
51
+
52
+ ```html
53
+ <fm-butono variant="primary">Speichern</fm-butono>
54
+ <fm-butono variant="primary">Weiter</fm-butono>
55
+ ```
56
+
57
+ **CORRECT** — A confirmation dialog whose main action destroys data uses the danger fill; the escape stays tertiary.
58
+
59
+ ```html
60
+ <fm-butono variant="primary" tone="danger">Löschen</fm-butono>
61
+ <fm-butono variant="tertiary">Abbrechen</fm-butono>
62
+ ```
63
+
64
+ **WRONG** — Löschen in the neutral primary colour promises the expected next step instead of warning before data is lost.
65
+
66
+ ```html
67
+ <fm-butono variant="primary">Löschen</fm-butono>
68
+ <fm-butono variant="tertiary">Abbrechen</fm-butono>
69
+ ```
70
+
71
+ **CORRECT** — An icon-only button names itself with the label prop, so assistive technology can announce it.
72
+
73
+ ```html
74
+ <fm-butono variant="tertiary" size="small" label="Schließen"></fm-butono>
75
+ ```
76
+
77
+ **WRONG** — An icon-only button without a name: a screen reader announces only "button".
78
+
79
+ ```html
80
+ <fm-butono variant="tertiary" size="small"></fm-butono>
81
+ ```
package/guidelines/foundations/color.md ADDED
@@ -0,0 +1,82 @@
1
+ # Colour
2
+
3
+ Every colour is a role, never a value. Use the class or the variable, never a hex code.
4
+
5
+ | Token | CSS | Tailwind | Use |
6
+ |---|---|---|---|
7
+ | `color.action.danger.hover` | `--fm-color-action-danger-hover` | `bg-fm-action-danger-hover` | Danger action: fill on hover. |
8
+ | `color.action.danger.pressed` | `--fm-color-action-danger-pressed` | `bg-fm-action-danger-pressed` | Danger action: fill while pressed. |
9
+ | `color.action.danger.rest` | `--fm-color-action-danger-rest` | `bg-fm-action-danger-rest` | Danger action: fill at rest, for the main action that destroys data (butono tone=danger). |
10
+ | `color.action.danger.text` | `--fm-color-action-danger-text` | `bg-fm-action-danger-text` | Danger action: label and icon on the danger fill in every state. |
11
+ | `color.action.primary.disabled` | `--fm-color-action-primary-disabled` | `bg-fm-action-primary-disabled` | Primary action: fill when disabled. |
12
+ | `color.action.primary.hover` | `--fm-color-action-primary-hover` | `bg-fm-action-primary-hover` | Primary action: fill on hover. |
13
+ | `color.action.primary.pressed` | `--fm-color-action-primary-pressed` | `bg-fm-action-primary-pressed` | Primary action: fill while pressed. |
14
+ | `color.action.primary.rest` | `--fm-color-action-primary-rest` | `bg-fm-action-primary-rest` | Primary action: fill at rest. |
15
+ | `color.action.primary.selected` | `--fm-color-action-primary-selected` | `bg-fm-action-primary-selected` | Primary action: fill when selected. |
16
+ | `color.action.primary.text` | `--fm-color-action-primary-text` | `bg-fm-action-primary-text` | Primary action: text on the fill. |
17
+ | `color.action.secondary.disabled` | `--fm-color-action-secondary-disabled` | `bg-fm-action-secondary-disabled` | Secondary action: fill when disabled. |
18
+ | `color.action.secondary.hover` | `--fm-color-action-secondary-hover` | `bg-fm-action-secondary-hover` | Secondary action: fill on hover. |
19
+ | `color.action.secondary.pressed` | `--fm-color-action-secondary-pressed` | `bg-fm-action-secondary-pressed` | Secondary action: fill while pressed. |
20
+ | `color.action.secondary.rest` | `--fm-color-action-secondary-rest` | `bg-fm-action-secondary-rest` | Secondary action: fill at rest. |
21
+ | `color.action.secondary.selected` | `--fm-color-action-secondary-selected` | `bg-fm-action-secondary-selected` | Secondary action: fill when selected. |
22
+ | `color.action.secondary.text` | `--fm-color-action-secondary-text` | `bg-fm-action-secondary-text` | Secondary action: text on the fill. |
23
+ | `color.action.tertiary.disabled` | `--fm-color-action-tertiary-disabled` | `bg-fm-action-tertiary-disabled` | Tertiary action: fill when disabled. |
24
+ | `color.action.tertiary.hover` | `--fm-color-action-tertiary-hover` | `bg-fm-action-tertiary-hover` | Tertiary action: fill on hover. |
25
+ | `color.action.tertiary.pressed` | `--fm-color-action-tertiary-pressed` | `bg-fm-action-tertiary-pressed` | Tertiary action: fill while pressed. |
26
+ | `color.action.tertiary.rest` | `--fm-color-action-tertiary-rest` | `bg-fm-action-tertiary-rest` | Tertiary action: fill at rest. |
27
+ | `color.action.tertiary.selected` | `--fm-color-action-tertiary-selected` | `bg-fm-action-tertiary-selected` | Tertiary action: fill when selected. |
28
+ | `color.action.tertiary.text` | `--fm-color-action-tertiary-text` | `bg-fm-action-tertiary-text` | Tertiary action: text on the fill. |
29
+ | `color.backdrop` | `--fm-color-backdrop` | `bg-fm-backdrop` | Backdrop behind modal layers. |
30
+ | `color.background.canvas` | `--fm-color-background-canvas` | `bg-fm-background-canvas` | Page canvas behind surfaces. |
31
+ | `color.background.default` | `--fm-color-background-default` | `bg-fm-background-default` | Default surface background. |
32
+ | `color.background.inverse` | `--fm-color-background-inverse` | `bg-fm-background-inverse` | Inverted surface (dark in light mode). |
33
+ | `color.background.raised` | `--fm-color-background-raised` | `bg-fm-background-raised` | Raised surface such as a card or menu. |
34
+ | `color.background.sunken` | `--fm-color-background-sunken` | `bg-fm-background-sunken` | Sunken area such as a well or input track. |
35
+ | `color.border.default` | `--fm-color-border-default` | `bg-fm-border-default` | Default border and divider of interactive content. |
36
+ | `color.border.disabled` | `--fm-color-border-disabled` | `bg-fm-border-disabled` | Border of disabled controls. |
37
+ | `color.border.inverse` | `--fm-color-border-inverse` | `bg-fm-border-inverse` | Border on inverted surfaces. |
38
+ | `color.border.strong` | `--fm-color-border-strong` | `bg-fm-border-strong` | Emphasised border. |
39
+ | `color.border.subtle` | `--fm-color-border-subtle` | `bg-fm-border-subtle` | Decorative divider without information. |
40
+ | `color.brand.fill` | `--fm-color-brand-fill` | `bg-fm-brand-fill` | Brand or hero surface. |
41
+ | `color.brand.text` | `--fm-color-brand-text` | `bg-fm-brand-text` | Text on the brand surface. |
42
+ | `color.focus.inner` | `--fm-color-focus-inner` | `bg-fm-focus-inner` | Gap between focus ring and content. |
43
+ | `color.focus.ring` | `--fm-color-focus-ring` | `bg-fm-focus-ring` | Focus ring colour. |
44
+ | `color.link.hover` | `--fm-color-link-hover` | `bg-fm-link-hover` | Link text on hover. |
45
+ | `color.link.rest` | `--fm-color-link-rest` | `bg-fm-link-rest` | Link text at rest. |
46
+ | `color.link.visited` | `--fm-color-link-visited` | `bg-fm-link-visited` | Visited link text. |
47
+ | `color.navigation.hover` | `--fm-color-navigation-hover` | `bg-fm-navigation-hover` | Navigation item on hover. |
48
+ | `color.navigation.rest` | `--fm-color-navigation-rest` | `bg-fm-navigation-rest` | Navigation item at rest. |
49
+ | `color.navigation.selected` | `--fm-color-navigation-selected` | `bg-fm-navigation-selected` | Selected navigation item. |
50
+ | `color.navigation.text.rest` | `--fm-color-navigation-text-rest` | `bg-fm-navigation-text-rest` | Navigation text, rest. |
51
+ | `color.navigation.text.selected` | `--fm-color-navigation-text-selected` | `bg-fm-navigation-text-selected` | Navigation text, selected. |
52
+ | `color.shadow.ambient` | `--fm-color-shadow-ambient` | `bg-fm-shadow-ambient` | Colour of the ambient (diffuse) shadow. |
53
+ | `color.shadow.key` | `--fm-color-shadow-key` | `bg-fm-shadow-key` | Colour of the key (direct) shadow. |
54
+ | `color.status.danger.basic` | `--fm-color-status-danger-basic` | `bg-fm-status-danger-basic` | Status danger: strong fill and indicator. |
55
+ | `color.status.danger.border` | `--fm-color-status-danger-border` | `bg-fm-status-danger-border` | Status danger: border that outlines a danger surface and carries its contrast when the fill is too light. |
56
+ | `color.status.danger.on` | `--fm-color-status-danger-on` | `bg-fm-status-danger-on` | Status danger: text on the strong fill. |
57
+ | `color.status.danger.subtle` | `--fm-color-status-danger-subtle` | `bg-fm-status-danger-subtle` | Status danger: lightest fill, e.g. an inline notice. |
58
+ | `color.status.danger.text` | `--fm-color-status-danger-text` | `bg-fm-status-danger-text` | Status danger: text on light surfaces. |
59
+ | `color.status.danger.weak` | `--fm-color-status-danger-weak` | `bg-fm-status-danger-weak` | Status danger: light fill, e.g. a banner. |
60
+ | `color.status.info.basic` | `--fm-color-status-info-basic` | `bg-fm-status-info-basic` | Status info: strong fill and indicator. |
61
+ | `color.status.info.border` | `--fm-color-status-info-border` | `bg-fm-status-info-border` | Status info: border that outlines an info surface and carries its contrast when the fill is too light. |
62
+ | `color.status.info.on` | `--fm-color-status-info-on` | `bg-fm-status-info-on` | Status info: text on the strong fill. |
63
+ | `color.status.info.subtle` | `--fm-color-status-info-subtle` | `bg-fm-status-info-subtle` | Status info: lightest fill, e.g. an inline notice. |
64
+ | `color.status.info.text` | `--fm-color-status-info-text` | `bg-fm-status-info-text` | Status info: text on light surfaces. |
65
+ | `color.status.info.weak` | `--fm-color-status-info-weak` | `bg-fm-status-info-weak` | Status info: light fill, e.g. a banner. |
66
+ | `color.status.success.basic` | `--fm-color-status-success-basic` | `bg-fm-status-success-basic` | Status success: strong fill and indicator. |
67
+ | `color.status.success.border` | `--fm-color-status-success-border` | `bg-fm-status-success-border` | Status success: border that outlines a success surface and carries its contrast when the fill is too light. |
68
+ | `color.status.success.on` | `--fm-color-status-success-on` | `bg-fm-status-success-on` | Status success: text on the strong fill. |
69
+ | `color.status.success.subtle` | `--fm-color-status-success-subtle` | `bg-fm-status-success-subtle` | Status success: lightest fill, e.g. an inline notice. |
70
+ | `color.status.success.text` | `--fm-color-status-success-text` | `bg-fm-status-success-text` | Status success: text on light surfaces. |
71
+ | `color.status.success.weak` | `--fm-color-status-success-weak` | `bg-fm-status-success-weak` | Status success: light fill, e.g. a banner. |
72
+ | `color.status.warning.basic` | `--fm-color-status-warning-basic` | `bg-fm-status-warning-basic` | Status warning: strong fill and indicator. |
73
+ | `color.status.warning.border` | `--fm-color-status-warning-border` | `bg-fm-status-warning-border` | Status warning: border that outlines a warning surface and carries its contrast when the fill is too light. |
74
+ | `color.status.warning.on` | `--fm-color-status-warning-on` | `bg-fm-status-warning-on` | Status warning: text on the strong fill. |
75
+ | `color.status.warning.subtle` | `--fm-color-status-warning-subtle` | `bg-fm-status-warning-subtle` | Status warning: lightest fill, e.g. an inline notice. |
76
+ | `color.status.warning.text` | `--fm-color-status-warning-text` | `bg-fm-status-warning-text` | Status warning: text on light surfaces. |
77
+ | `color.status.warning.weak` | `--fm-color-status-warning-weak` | `bg-fm-status-warning-weak` | Status warning: light fill, e.g. a banner. |
78
+ | `color.text.default` | `--fm-color-text-default` | `bg-fm-text-default` | Default body text. |
79
+ | `color.text.disabled` | `--fm-color-text-disabled` | `bg-fm-text-disabled` | Text of disabled content (exempt from contrast, WCAG 1.4.3). |
80
+ | `color.text.inverse` | `--fm-color-text-inverse` | `bg-fm-text-inverse` | Text on inverted surfaces. |
81
+ | `color.text.muted` | `--fm-color-text-muted` | `bg-fm-text-muted` | Tertiary text such as hints, two steps quieter. |
82
+ | `color.text.subtle` | `--fm-color-text-subtle` | `bg-fm-text-subtle` | Secondary text, one step quieter. |
package/guidelines/foundations/dimensioj.md ADDED
@@ -0,0 +1,14 @@
1
+ # Dimensioj
2
+
3
+ Every Dimensio is an attribute on `<html>`; leaving it out means the default.
4
+
5
+ | Attribute | Values | Default |
6
+ |---|---|---|
7
+ | `data-fm-aspekto` | `komuna`, `ekzemplo` | `komuna` |
8
+ | `data-fm-viewport` | `compact`, `medium`, `expanded` | `medium` |
9
+ | `data-fm-density` | `compact`, `default`, `comfortable` | `default` |
10
+ | `data-fm-color-scheme` | `light`, `dark` | `light` |
11
+ | `data-fm-contrast` | `default`, `high` | `default` |
12
+ | `data-fm-motion` | `default`, `reduced` | `default` |
13
+
14
+ A frame never mixes two values of one Dimensio: the whole document switches together.
package/guidelines/foundations/spacing.md ADDED
@@ -0,0 +1,60 @@
1
+ # Spacing, size and radius
2
+
3
+ | Token | CSS | Tailwind | Use |
4
+ |---|---|---|---|
5
+ | `spacing.large` | `--fm-spacing-large` | `p-fm-large` | Gap between groups of elements. |
6
+ | `spacing.medium` | `--fm-spacing-medium` | `p-fm-medium` | Default gap between elements. |
7
+ | `spacing.scale.0` | `--fm-spacing-scale-0` | `p-fm-scale-0` | Spacing step 0 (0 px reference units). |
8
+ | `spacing.scale.100` | `--fm-spacing-scale-100` | `p-fm-scale-100` | Spacing step 100 (4 px reference units). |
9
+ | `spacing.scale.1000` | `--fm-spacing-scale-1000` | `p-fm-scale-1000` | Spacing step 1000 (40 px reference units). |
10
+ | `spacing.scale.1200` | `--fm-spacing-scale-1200` | `p-fm-scale-1200` | Spacing step 1200 (48 px reference units). |
11
+ | `spacing.scale.150` | `--fm-spacing-scale-150` | `p-fm-scale-150` | Spacing step 150 (6 px reference units). |
12
+ | `spacing.scale.200` | `--fm-spacing-scale-200` | `p-fm-scale-200` | Spacing step 200 (8 px reference units). |
13
+ | `spacing.scale.300` | `--fm-spacing-scale-300` | `p-fm-scale-300` | Spacing step 300 (12 px reference units). |
14
+ | `spacing.scale.400` | `--fm-spacing-scale-400` | `p-fm-scale-400` | Spacing step 400 (16 px reference units). |
15
+ | `spacing.scale.50` | `--fm-spacing-scale-50` | `p-fm-scale-50` | Spacing step 50 (2 px reference units). |
16
+ | `spacing.scale.500` | `--fm-spacing-scale-500` | `p-fm-scale-500` | Spacing step 500 (20 px reference units). |
17
+ | `spacing.scale.600` | `--fm-spacing-scale-600` | `p-fm-scale-600` | Spacing step 600 (24 px reference units). |
18
+ | `spacing.scale.800` | `--fm-spacing-scale-800` | `p-fm-scale-800` | Spacing step 800 (32 px reference units). |
19
+ | `spacing.small` | `--fm-spacing-small` | `p-fm-small` | Small gap between related elements. |
20
+ | `spacing.xlarge` | `--fm-spacing-xlarge` | `p-fm-xlarge` | Gap between sections of a component. |
21
+ | `spacing.xsmall` | `--fm-spacing-xsmall` | `p-fm-xsmall` | Tightest gap, e.g. between an icon and its label. |
22
+ | `spacing.xxlarge` | `--fm-spacing-xxlarge` | `p-fm-xxlarge` | Gap between page sections. |
23
+
24
+ | Token | CSS | Tailwind | Use |
25
+ |---|---|---|---|
26
+ | `size.breakpoint.expanded` | `--fm-size-breakpoint-expanded` | – | Lower bound of the expanded viewport. |
27
+ | `size.breakpoint.medium` | `--fm-size-breakpoint-medium` | – | Lower bound of the medium viewport (compact below it). |
28
+ | `size.container.large` | `--fm-size-container-large` | – | Container width large (1280 px reference units). |
29
+ | `size.container.max` | `--fm-size-container-max` | – | Container width max (1440 px reference units). |
30
+ | `size.container.medium` | `--fm-size-container-medium` | – | Container width medium (960 px reference units). |
31
+ | `size.container.small` | `--fm-size-container-small` | – | Container width small (640 px reference units). |
32
+ | `size.control.large` | `--fm-size-control-large` | – | Height of a large control such as a button or input. |
33
+ | `size.control.medium` | `--fm-size-control-medium` | – | Height of a medium control such as a button or input. |
34
+ | `size.control.small` | `--fm-size-control-small` | – | Height of a small control such as a button or input. |
35
+ | `size.icon.large` | `--fm-size-icon-large` | – | Icon size large. |
36
+ | `size.icon.medium` | `--fm-size-icon-medium` | – | Icon size medium. |
37
+ | `size.icon.small` | `--fm-size-icon-small` | – | Icon size small. |
38
+ | `size.scale.100` | `--fm-size-scale-100` | – | Size step 100 (12 px reference units). |
39
+ | `size.scale.1000` | `--fm-size-scale-1000` | – | Size step 1000 (64 px reference units). |
40
+ | `size.scale.200` | `--fm-size-scale-200` | – | Size step 200 (16 px reference units). |
41
+ | `size.scale.300` | `--fm-size-scale-300` | – | Size step 300 (20 px reference units). |
42
+ | `size.scale.400` | `--fm-size-scale-400` | – | Size step 400 (24 px reference units). |
43
+ | `size.scale.500` | `--fm-size-scale-500` | – | Size step 500 (28 px reference units). |
44
+ | `size.scale.600` | `--fm-size-scale-600` | – | Size step 600 (32 px reference units). |
45
+ | `size.scale.700` | `--fm-size-scale-700` | – | Size step 700 (40 px reference units). |
46
+ | `size.scale.800` | `--fm-size-scale-800` | – | Size step 800 (48 px reference units). |
47
+ | `size.scale.900` | `--fm-size-scale-900` | – | Size step 900 (56 px reference units). |
48
+ | `size.target.min` | `--fm-size-target-min` | – | Minimum width and height of a pointer target (WCAG 2.5.8 Target Size (Minimum), AA: 24 × 24 px); the threshold of the Regulo touch-target-min. |
49
+
50
+ | Token | CSS | Tailwind | Use |
51
+ |---|---|---|---|
52
+ | `radius.full` | `--fm-radius-full` | `rounded-fm-full` | Fully round ends, e.g. a pill. |
53
+ | `radius.large` | `--fm-radius-large` | `rounded-fm-large` | Corner radius of large surfaces. |
54
+ | `radius.medium` | `--fm-radius-medium` | `rounded-fm-medium` | Default corner radius. |
55
+ | `radius.none` | `--fm-radius-none` | `rounded-fm-none` | No rounding. |
56
+ | `radius.role.control` | `--fm-radius-role-control` | `rounded-fm-role-control` | Corner radius of controls. |
57
+ | `radius.role.pill` | `--fm-radius-role-pill` | `rounded-fm-role-pill` | Corner radius of pill-shaped actions. |
58
+ | `radius.role.surface` | `--fm-radius-role-surface` | `rounded-fm-role-surface` | Corner radius of surfaces such as cards. |
59
+ | `radius.small` | `--fm-radius-small` | `rounded-fm-small` | Slight rounding. |
60
+ | `radius.xlarge` | `--fm-radius-xlarge` | `rounded-fm-xlarge` | Strong rounding. |
package/guidelines/foundations/typography.md ADDED
@@ -0,0 +1,22 @@
1
+ # Typography
2
+
3
+ Type comes as composite tokens: family, size, weight, letter spacing and line height together.
4
+
5
+ | Token | CSS | Tailwind | Use |
6
+ |---|---|---|---|
7
+ | `typography.body.1` | `--fm-typography-body-1` | – | Body text 1, composed from role tokens. |
8
+ | `typography.body.2` | `--fm-typography-body-2` | – | Body text 2, composed from role tokens. |
9
+ | `typography.caption` | `--fm-typography-caption` | – | Caption and helper text, composed from role tokens. |
10
+ | `typography.code` | `--fm-typography-code` | – | Code and monospaced text, composed from role tokens. |
11
+ | `typography.display.1` | `--fm-typography-display-1` | – | Display text, the largest headings on a page 1, composed from role tokens. |
12
+ | `typography.display.2` | `--fm-typography-display-2` | – | Display text, the largest headings on a page 2, composed from role tokens. |
13
+ | `typography.display.3` | `--fm-typography-display-3` | – | Display text, the largest headings on a page 3, composed from role tokens. |
14
+ | `typography.headline.1` | `--fm-typography-headline-1` | – | Headline 1, composed from role tokens. |
15
+ | `typography.headline.2` | `--fm-typography-headline-2` | – | Headline 2, composed from role tokens. |
16
+ | `typography.headline.3` | `--fm-typography-headline-3` | – | Headline 3, composed from role tokens. |
17
+ | `typography.headline.4` | `--fm-typography-headline-4` | – | Headline 4, composed from role tokens. |
18
+ | `typography.kicker` | `--fm-typography-kicker` | – | Kicker above a headline, in capitals, composed from role tokens. |
19
+ | `typography.label.1` | `--fm-typography-label-1` | – | Label of a control or field 1, composed from role tokens. |
20
+ | `typography.label.2` | `--fm-typography-label-2` | – | Label of a control or field 2, composed from role tokens. |
21
+
22
+ In CSS each field is its own variable, e.g. `--fm-typography-label-1-font-size`.
package/guidelines/setup.md ADDED
@@ -0,0 +1,17 @@
1
+ # Setup
2
+
3
+ Import the styles once, then use the components. There is no provider and no theme object.
4
+
5
+ ```tsx
6
+ import "@fundamento/make-kit-ekzemplo/styles.css";
7
+ import "@fundamento/make-kit-ekzemplo/tailwind.css"; // only with Tailwind v4
8
+ import { Butono } from "@fundamento/make-kit-ekzemplo";
9
+ ```
10
+
11
+ Set the Dimensioj on `<html>`; every value follows without a reload.
12
+
13
+ ```html
14
+ <html data-fm-color-scheme="dark" data-fm-contrast="high">
15
+ ```
16
+
17
+ See `foundations/dimensioj.md` for the attributes and their values.
package/package.json ADDED
@@ -0,0 +1,54 @@
1
+ {
2
+ "name": "@fundamento/make-kit-ekzemplo",
3
+ "version": "0.1.0-next.0",
4
+ "description": "Fundamento Make kit: the Aspekto ekzemplo with its Eroj, tokens and generated guidelines.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/thojank/fundamento.git",
9
+ "directory": "packages/projekcioj"
10
+ },
11
+ "homepage": "https://github.com/thojank/fundamento#readme",
12
+ "type": "module",
13
+ "main": "./dist/index.cjs",
14
+ "module": "./dist/index.js",
15
+ "types": "./dist/index.d.ts",
16
+ "exports": {
17
+ ".": {
18
+ "types": "./dist/index.d.ts",
19
+ "import": "./dist/index.js",
20
+ "require": "./dist/index.cjs"
21
+ },
22
+ "./element": {
23
+ "types": "./dist/element.d.ts",
24
+ "import": "./dist/element.js",
25
+ "require": "./dist/element.cjs"
26
+ },
27
+ "./styles.css": "./styles.css",
28
+ "./tailwind.css": "./tailwind.css",
29
+ "./guidelines/*": "./guidelines/*",
30
+ "./package.json": "./package.json"
31
+ },
32
+ "files": [
33
+ "dist",
34
+ "guidelines",
35
+ "styles.css",
36
+ "tailwind.css",
37
+ "README.md"
38
+ ],
39
+ "peerDependencies": {
40
+ "react": ">=18",
41
+ "react-dom": ">=18"
42
+ },
43
+ "publishConfig": {
44
+ "access": "public",
45
+ "tag": "next"
46
+ },
47
+ "sideEffects": [
48
+ "**/*.css",
49
+ "./dist/element.js",
50
+ "./dist/element.cjs",
51
+ "./dist/index.js",
52
+ "./dist/index.cjs"
53
+ ]
54
+ }