@once-ui-system/core 1.0.0

package/dist/styles/typography.scss

@@ -0,0 +1,199 @@
+html {
+    font-size:   var(--font-scaling-desktop);
+    font-family: var(--font-family-body);
+    font-weight: var(--font-weight-normal);
+    color: var(--neutral-on-background-strong);
+}
+
+@media (--m) {
+    html {
+        font-size: var(--font-scaling-tablet);
+    }
+}
+
+@media (--s) {
+    html {
+        font-size: var(--font-scaling-mobile);
+    }
+}
+
+h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+}
+
+.font-size-inherit {
+    font-size: inherit;
+}
+
+.font-weight-inherit {
+    font-weight: inherit;
+}
+
+.font-display {
+    font-family: var(--font-family-heading);
+
+    &.font-strong, & > .font-strong {
+        font-weight: var(--font-weight-display-strong);
+    }
+
+    &.font-default, & > .font-default {
+        font-weight: var(--font-weight-display-default);
+    }
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-display-xl) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-display-xl) * var(--line-height-heading-multiplier));
+        letter-spacing: -0.05em;
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-display-l) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-display-l) * var(--line-height-heading-multiplier));
+        letter-spacing: -0.04em;
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-display-m) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-display-m) * var(--line-height-heading-multiplier));
+        letter-spacing: -0.03em;
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-display-s) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-display-s) * var(--line-height-heading-multiplier));
+        letter-spacing: -0.02em;
+    }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-display-xs) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-display-xs) * var(--line-height-heading-multiplier));
+    }
+}
+
+.font-heading {
+    font-family: var(--font-family-heading);
+
+    &.font-strong, & > .font-strong {
+        font-weight: var(--font-weight-heading-strong);
+    }
+
+    &.font-default, & > .font-default {
+        font-weight: var(--font-weight-heading-default);
+    }
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-heading-xl) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-xl) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-heading-l) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-l) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-heading-m) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-m) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-heading-s) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-s) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-heading-xs) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-xs) * var(--line-height-heading-multiplier));
+    }
+}
+
+.font-body {
+    font-family: var(--font-family-body);
+
+    &.font-strong, & > .font-strong {
+        font-weight: var(--font-weight-body-strong);
+    }
+
+    &.font-default, & > .font-default {
+        font-weight: var(--font-weight-body-default);
+    }
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-body-xl) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-xl) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-body-l) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-l) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-body-m) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-m) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-body-xs) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-xs) * var(--line-height-body-multiplier));
+    }
+}
+
+.font-label {
+    font-family: var(--font-family-label);
+
+    &.font-strong, & > .font-strong {
+        font-weight: var(--font-weight-label-strong);
+    }
+
+    &.font-default, & > .font-default {
+        font-weight: var(--font-weight-label-default);
+    }
+
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
+    }
+}
+
+.font-code {
+    font-family: var(--font-family-code);
+
+    &.font-strong, & > .font-strong {
+        font-weight: var(--font-weight-code-strong);
+    }
+
+    &.font-default, & > .font-default {
+        font-weight: var(--font-weight-code-default);
+    }
+
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
+    }
+}

package/dist/styles/utilities.scss

@@ -0,0 +1,17 @@
+.text-decoration-none {
+  text-decoration: none;
+}
+
+.reset-button-styles {
+  background: none;
+  padding: 0;
+  outline: 0;
+  border: 0;
+}
+
+.focus-ring {
+  &:focus-visible {
+    outline: var(--static-space-2) solid var(--brand-solid-strong);
+    outline-offset: 2px;
+  }
+}

package/dist/styles.d.ts

@@ -0,0 +1,3 @@
+import "./styles/index.scss";
+import "./tokens/index.scss";
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/once-ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./styles/index.scss");
+require("./tokens/index.scss");
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/once-ui/styles.ts"],"names":[],"mappings":";;AAAA,+BAA6B;AAC7B,+BAA6B"}

package/dist/tokens/border.scss

@@ -0,0 +1,71 @@
+[data-border="playful"] {
+    --radius-xs:        0.25rem;
+    --radius-xs-nest-4: 0.375rem;
+    --radius-xs-nest-8: 0.5rem;
+
+    --radius-s:         0.5rem;
+    --radius-s-nest-4:  0.75rem;
+    --radius-s-nest-8:  1rem;
+
+    --radius-m:         0.75rem;
+    --radius-m-nest-4:  1rem;
+    --radius-m-nest-8:  1.25rem;
+    
+    --radius-l:         1rem;
+    --radius-l-nest-4:  1.25rem;
+    --radius-l-nest-8:  1.75rem;
+
+    --radius-xl:        1.25rem;
+    --radius-xl-nest-4: 1.5rem;
+    --radius-xl-nest-8: 1.875rem;
+
+    --radius-full:       999rem;
+}
+
+[data-border="conservative"] {
+    --radius-xs:        0.125rem;
+    --radius-xs-nest-4: 0.25rem;
+    --radius-xs-nest-8: 0.375rem;
+
+    --radius-s:         0.25rem;
+    --radius-s-nest-4:  0.375rem;
+    --radius-s-nest-8:  0.5rem;
+
+    --radius-m:         0.375rem;
+    --radius-m-nest-4:  0.5rem;
+    --radius-m-nest-8:  0.625rem;
+    
+    --radius-l:         0.625rem;
+    --radius-l-nest-4:  0.875rem;
+    --radius-l-nest-8:  1.125rem;
+
+    --radius-xl:        0.75rem;
+    --radius-xl-nest-4: 1rem;
+    --radius-xl-nest-8: 1.25rem;
+
+    --radius-full:       999rem;
+}
+
+[data-border="rounded"] {
+    --radius-xs:        1rem;
+    --radius-xs-nest-4: 1.25rem;
+    --radius-xs-nest-8: 1.5rem;
+
+    --radius-s:         1.25rem;
+    --radius-s-nest-4:  1.5rem;
+    --radius-s-nest-8:  2rem;
+
+    --radius-m:         1.25rem;
+    --radius-m-nest-4:  1.5rem;
+    --radius-m-nest-8:  1.875rem;
+    
+    --radius-l:         1.75rem;
+    --radius-l-nest-4:  2rem;
+    --radius-l-nest-8:  2.5rem;
+
+    --radius-xl:        2rem;
+    --radius-xl-nest-4: 2.25rem;
+    --radius-xl-nest-8: 2.75rem;
+
+    --radius-full:       999rem;
+}

package/dist/tokens/data.scss

@@ -0,0 +1,107 @@
+[data-theme="dark"] {
+  --data-blue:     var(--scheme-blue-400);
+  --data-aqua:     var(--scheme-aqua-400);
+  --data-magenta:  var(--scheme-magenta-400);
+  --data-pink:     var(--scheme-pink-400);
+  --data-yellow:   var(--scheme-yellow-400);
+  --data-orange:   var(--scheme-orange-400);
+  --data-red:      var(--scheme-red-400);
+  --data-moss:     var(--scheme-moss-400);
+  --data-green:    var(--scheme-green-400);
+  --data-emerald:  var(--scheme-emerald-400);
+  --data-cyan:     var(--scheme-cyan-400);
+  --data-violet:   var(--scheme-violet-400);
+  --data-indigo:   var(--scheme-indigo-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="dark"] [data-viz-style="divergent"] {
+  --data-blue:     var(--scheme-red-400);
+  --data-aqua:     var(--scheme-red-500);
+  --data-magenta:  var(--scheme-orange-500);
+  --data-pink:     var(--scheme-orange-600);
+  --data-yellow:   var(--scheme-yellow-700);
+  --data-orange:   var(--scheme-yellow-800);
+  --data-red:      var(--scheme-yellow-900);
+  --data-moss:     var(--scheme-moss-1000);
+  --data-green:    var(--scheme-moss-900);
+  --data-emerald:  var(--scheme-green-800);
+  --data-cyan:     var(--scheme-aqua-700);
+  --data-violet:   var(--scheme-aqua-600);
+  --data-indigo:   var(--scheme-cyan-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="dark"] [data-viz-style="sequential"] {
+  --data-blue:     var(--function-brand-200);
+  --data-aqua:     var(--function-brand-300);
+  --data-magenta:  var(--function-brand-400);
+  --data-pink:     var(--function-brand-500);
+  --data-yellow:   var(--function-brand-600);
+  --data-orange:   var(--function-brand-700);
+  --data-red:      var(--function-brand-800);
+  --data-moss:     var(--function-brand-900);
+  --data-green:    var(--function-brand-1000);
+  --data-emerald:  var(--function-brand-1100);
+  --data-cyan:     var(--function-brand-1200);
+  --data-violet:   var(--function-brand-1200);
+  --data-indigo:   var(--function-brand-1200);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="light"] {
+  --data-blue:     var(--scheme-blue-400);
+  --data-indigo:   var(--scheme-indigo-400);
+  --data-green:    var(--scheme-green-400);
+  --data-aqua:     var(--scheme-aqua-400);
+  --data-violet:   var(--scheme-violet-400);
+  --data-orange:   var(--scheme-orange-400);
+  --data-red:      var(--scheme-red-400);
+  --data-cyan:     var(--scheme-cyan-400);
+  --data-magenta:  var(--scheme-magenta-400);
+  --data-pink:     var(--scheme-pink-400);
+  --data-moss:     var(--scheme-moss-400);
+  --data-emerald:  var(--scheme-emerald-400);
+  --data-yellow:   var(--scheme-yellow-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}
+
+[data-theme="light"] [data-viz-style="divergent"] {
+  --data-blue:     var(--scheme-red-300);
+  --data-aqua:     var(--scheme-red-400);
+  --data-magenta:  var(--scheme-orange-400);
+  --data-pink:     var(--scheme-orange-500);
+  --data-yellow:   var(--scheme-yellow-500);
+  --data-orange:   var(--scheme-yellow-600);
+  --data-red:      var(--scheme-yellow-700);
+  --data-moss:     var(--scheme-moss-800);
+  --data-green:    var(--scheme-moss-900);
+  --data-emerald:  var(--scheme-green-800);
+  --data-cyan:     var(--scheme-aqua-700);
+  --data-violet:   var(--scheme-aqua-600);
+  --data-indigo:   var(--scheme-cyan-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}
+
+[data-theme="light"] [data-viz-style="sequential"] {
+  --data-blue:     var(--function-brand-200);
+  --data-aqua:     var(--function-brand-200);
+  --data-magenta:  var(--function-brand-200);
+  --data-pink:     var(--function-brand-300);
+  --data-yellow:   var(--function-brand-400);
+  --data-orange:   var(--function-brand-500);
+  --data-red:      var(--function-brand-600);
+  --data-moss:     var(--function-brand-700);
+  --data-green:    var(--function-brand-800);
+  --data-emerald:  var(--function-brand-900);
+  --data-cyan:     var(--function-brand-1000);
+  --data-violet:   var(--function-brand-1100);
+  --data-indigo:   var(--function-brand-1100);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}