@nordcode/ui 1.0.0

package/src/styles/utils/reset.css

@@ -0,0 +1,128 @@
+@layer reset {
+    *,
+    :after,
+    :before {
+        box-sizing: border-box;
+        accent-color: var(--color-brand-primary-base);
+        font-kerning: normal;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    :where(:not(dialog)) {
+        margin: 0;
+    }
+
+    :where(:not(fieldset, progress, meter)) {
+        border-width: 0;
+        border-style: solid;
+        background-origin: border-box;
+        background-repeat: no-repeat;
+    }
+
+    :where(:focus-visible) {
+        transition: outline-offset var(--transition-duration-short) var(--ease-2);
+    }
+
+    :where(:focus-visible, :focus) {
+        outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+        outline-offset: 1ch;
+    }
+
+    :where(:focus:not(:focus-visible)) {
+        outline: none;
+    }
+
+    :where(html) {
+        inline-size: 100%;
+        -moz-text-size-adjust: none;
+        -webkit-text-size-adjust: none;
+        text-size-adjust: none;
+        text-rendering: optimizeSpeed;
+        min-block-size: 100vh;
+        block-size: 100%;
+    }
+
+    :where(body) {
+        font-weight: var(--font-weight-default);
+        color: var(--color-text-base);
+        background-color: var(--color-surface-muted);
+        font-family: var(--font-family-default);
+        line-height: var(--line-height-base);
+        font-style: normal;
+    }
+
+    /* Remove default margin in favour of better control in authored CSS */
+    :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
+        margin: 0;
+    }
+
+    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+    :where(ul[role="list"], ol[role="list"]) {
+        list-style: none;
+    }
+
+    /* Balance text wrapping on headings */
+    :where(h1, h2, h3, h4) {
+        text-wrap: balance;
+    }
+
+    /* A elements that don't have a class get default styles */
+    :where(a:not([class])) {
+        text-decoration-skip-ink: auto;
+        color: currentColor;
+    }
+
+    :where(img, svg, video, canvas, audio, iframe, embed, object) {
+        display: block;
+    }
+
+    :where(img, svg, video) {
+        max-inline-size: 100%;
+        block-size: auto;
+    }
+
+    :where(figure) {
+        display: grid;
+        gap: 0;
+        place-items: center;
+    }
+
+    :where(
+            a[href],
+            area,
+            button,
+            input,
+            label[for],
+            select,
+            summary,
+            textarea,
+            [tabindex]:not([tabindex*="-"])
+        ) {
+        cursor: pointer;
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    :where(input, button, textarea, select),
+    :where(input[type="file"])::-webkit-file-upload-button {
+        font: inherit;
+        color: inherit;
+        letter-spacing: inherit;
+    }
+
+    :where(label:not(class) + input, label:not(class) + select, label:not(class) + textarea) {
+        display: block;
+    }
+
+    :where(p, summary) {
+        max-inline-size: var(--measure-base);
+        font-size: inherit;
+        line-height: var(--line-height-base);
+        margin: 0;
+    }
+
+    :where(p) {
+        text-wrap: pretty;
+    }
+}

package/src/styles/utils/theme.css

@@ -0,0 +1,120 @@
+@layer helpers.theme {
+    * {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+        --border: var(--color-border-muted);
+
+        --text-hover: var(--color-text-on-emphasis);
+        --color-hover: var(--color-text-on-emphasis);
+        --surface-hover: var(--color-surface-emphasis);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-primary {
+        --text: var(--color-brand-primary-emphasis);
+        --color: var(--color-brand-primary-base);
+        --surface: var(--color-brand-primary-surface);
+        --border: var(--color-brand-primary-base);
+
+        --text-hover: var(--color-brand-primary-contrast);
+        --color-hover: var(--color-brand-primary-contrast);
+        --surface-hover: var(--color-brand-primary-base);
+        --border-hover: var(--color-brand-primary-base);
+    }
+
+    .-secondary {
+        --text: var(--color-brand-secondary-emphasis);
+        --color: var(--color-brand-secondary-base);
+        --surface: var(--color-brand-secondary-surface);
+        --border: var(--color-brand-secondary-base);
+
+        --text-hover: var(--color-brand-secondary-contrast);
+        --color-hover: var(--color-brand-secondary-contrast);
+        --surface-hover: var(--color-brand-secondary-base);
+        --border-hover: var(--color-brand-secondary-base);
+    }
+
+    .-neutral {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+        --border: var(--color-border-muted);
+
+        --text-hover: var(--color-text-on-emphasis);
+        --color-hover: var(--color-text-on-emphasis);
+        --surface-hover: var(--color-surface-emphasis);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-muted {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+
+        --text-hover: var(--color-text-base);
+        --color-hover: var(--color-text-base);
+        --surface-hover: var(--color-surface-subtle);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-emphasis {
+        --text: var(--color-text-on-emphasis);
+        --color: var(--color-text-on-emphasis);
+        --surface: var(--color-surface-emphasis);
+        --border: var(--color-surface-emphasis);
+
+        --text-hover: var(--color-text-base);
+        --color-hover: var(--color-text-base);
+        --surface-hover: var(--color-surface-subtle);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-info {
+        --text: var(--color-status-info-emphasis);
+        --color: var(--color-status-info-base);
+        --surface: var(--color-status-info-surface);
+        --border: var(--color-status-info-base);
+
+        --text-hover: var(--color-status-info-contrast);
+        --color-hover: var(--color-status-info-contrast);
+        --surface-hover: var(--color-status-info-base);
+        --border-hover: var(--color-status-info-base);
+    }
+
+    .-warning {
+        --text: var(--color-status-warning-emphasis);
+        --color: var(--color-status-warning-base);
+        --surface: var(--color-status-warning-surface);
+        --border: var(--color-status-warning-base);
+
+        --text-hover: var(--color-status-warning-contrast);
+        --color-hover: var(--color-status-warning-contrast);
+        --surface-hover: var(--color-status-warning-base);
+        --border-hover: var(--color-status-warning-base);
+    }
+
+    .-danger {
+        --text: var(--color-status-danger-emphasis);
+        --color: var(--color-status-danger-base);
+        --surface: var(--color-status-danger-surface);
+        --border: var(--color-status-danger-base);
+
+        --text-hover: var(--color-status-danger-contrast);
+        --color-hover: var(--color-status-danger-contrast);
+        --surface-hover: var(--color-status-danger-base);
+        --border-hover: var(--color-status-danger-base);
+    }
+
+    .-success {
+        --text: var(--color-status-success-emphasis);
+        --color: var(--color-status-success-base);
+        --surface: var(--color-status-success-surface);
+        --border: var(--color-status-success-base);
+
+        --text-hover: var(--color-status-success-contrast);
+        --color-hover: var(--color-status-success-contrast);
+        --surface-hover: var(--color-status-success-base);
+        --border-hover: var(--color-status-success-base);
+    }
+}

package/transform.js

@@ -0,0 +1,71 @@
+import fs from 'node:fs';
+import browserslist from 'browserslist';
+import { browserslistToTargets, bundle } from 'lightningcss';
+
+const browserlistTargtsWidelyAvailable = [
+    'Chrome > 0 and last 2.5 years',
+    'ChromeAndroid > 0 and last 2.5 years',
+    'Edge > 0 and last 2.5 years',
+    'Firefox > 0 and last 2.5 years',
+    'FirefoxAndroid > 0 and last 2.5 years',
+    'Safari > 0 and last 2.5 years',
+    'iOS > 0 and last 2.5 years',
+    'not dead',
+];
+
+const targets = browserslistToTargets(browserslist(browserlistTargtsWidelyAvailable));
+
+const { code: colors } = bundle({
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
+    filename: 'src/styles/theme/colors.css',
+});
+
+fs.writeFileSync('out/colors.css', colors);
+
+const { code } = bundle({
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
+    filename: 'src/styles/bundle.css',
+});
+
+fs.writeFileSync('out/bundle.css', code);
+
+const { code: bundleConfigless } = bundle({
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
+    filename: 'src/styles/bundle_configless.css',
+});
+
+fs.writeFileSync('out/bundle_configless.css', bundleConfigless);
+
+const { code: codeComplete } = bundle({
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
+    filename: 'src/styles/complete.css',
+});
+
+fs.writeFileSync('out/complete.css', codeComplete);
+
+const { code: codeCompleteConfigless } = bundle({
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
+    filename: 'src/styles/complete_configless.css',
+});
+
+fs.writeFileSync('out/complete_configless.css', codeCompleteConfigless);