@once-ui-system/core 1.8.3 → 2.0.0-alpha.0

package/dist/styles/typography.scss

@@ -1,223 +0,0 @@
-@use "../styles/breakpoints.scss" as breakpoints;
-
-html {
-    font-size:   var(--font-scaling-desktop);
-    font-family: var(--font-body);
-    font-weight: var(--font-weight-normal);
-    color: var(--neutral-on-background-strong);
-}
-
-@include breakpoints.m {
-    html {
-        font-size: var(--font-scaling-tablet);
-    }
-}
-
-@include breakpoints.s {
-    html {
-        font-size: var(--font-scaling-mobile);
-    }
-}
-
-@include breakpoints.xs {
-    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-default {
-    font-weight: var(--font-weight-display-default);
-}
-
-.font-normal {
-    font-weight: var(--font-weight-display-normal);
-}
-
-.font-medium {
-    font-weight: var(--font-weight-display-medium);
-}
-
-.font-strong {
-    font-weight: var(--font-weight-display-strong);
-}
-
-.font-display {
-    font-family: var(--font-heading);
-
-    &.font-xl, & > .font-xl {
-        font-size:   calc(var(--font-size-display-xl) * var(--font-size-display-multiplier));
-        line-height: calc(var(--line-height-display-xl) * var(--line-height-display-multiplier));
-        letter-spacing: -0.05em;
-    }
-    
-    &.font-l, & > .font-l {
-        font-size:   calc(var(--font-size-display-l) * var(--font-size-display-multiplier));
-        line-height: calc(var(--line-height-display-l) * var(--line-height-display-multiplier));
-        letter-spacing: -0.04em;
-    }
-    
-    &.font-m, & > .font-m {
-        font-size:   calc(var(--font-size-display-m) * var(--font-size-display-multiplier));
-        line-height: calc(var(--line-height-display-m) * var(--line-height-display-multiplier));
-        letter-spacing: -0.03em;
-    }
-    
-    &.font-s, & > .font-s {
-        font-size:   calc(var(--font-size-display-s) * var(--font-size-display-multiplier));
-        line-height: calc(var(--line-height-display-s) * var(--line-height-display-multiplier));
-        letter-spacing: -0.02em;
-    }
-
-    &.font-xs, & > .font-xs {
-        font-size:   calc(var(--font-size-display-xs) * var(--font-size-display-multiplier));
-        line-height: calc(var(--line-height-display-xs) * var(--line-height-display-multiplier));
-    }
-}
-
-.font-heading {
-    font-family: var(--font-heading);
-
-    &.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-body);
-
-    &.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-label);
-
-    &.font-xl, & > .font-xl {
-        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
-        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
-    }
-
-    &.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-xs, & > .font-xs {
-        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
-        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
-    }
-}
-
-.font-code {
-    font-family: var(--font-code);
-
-    &.font-xl, & > .font-xl {
-        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
-        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
-    }
-
-    &.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-xs, & > .font-xs {
-        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
-        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
-    }
-}
-
-.font-family-display {
-    font-family: var(--font-display);
-}
-
-.font-family-heading {
-    font-family: var(--font-heading);
-}
-
-.font-family-body {
-    font-family: var(--font-body);
-}
-
-.font-family-label {
-    font-family: var(--font-label);
-}
-
-.font-family-code {
-    font-family: var(--font-code);
-}

package/dist/styles/utilities.scss

@@ -1,23 +0,0 @@
-.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;
-  }
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/dist/tokens/border.scss

@@ -1,95 +0,0 @@
-[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.625rem;
-
-    --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;
-}
-
-[data-border="sharp"] {
-    --radius-xs:        0;
-    --radius-xs-nest-4: 0;
-    --radius-xs-nest-8: 0;
-
-    --radius-s:         0;
-    --radius-s-nest-4:  0;
-    --radius-s-nest-8:  0;
-
-    --radius-m:         0;
-    --radius-m-nest-4:  0;
-    --radius-m-nest-8:  0;
-    
-    --radius-l:         0;
-    --radius-l-nest-4:  0;
-    --radius-l-nest-8:  0;
-
-    --radius-xl:        0;
-    --radius-xl-nest-4: 0;
-    --radius-xl-nest-8: 0;
-
-    --radius-full:      999rem;
-}

package/dist/tokens/data.scss

@@ -1,107 +0,0 @@
-[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);
-}