@once-ui-system/core 1.0.0

package/dist/tokens/theme.scss

@@ -0,0 +1,558 @@
+:root {
+    /* FONT FAMILY */
+    --font-family-body:     var(--font-primary);
+    --font-family-heading:  var(--font-secondary);
+    --font-family-label:    var(--font-tertiary);
+    --font-family-code:     var(--font-code);
+
+    --font-size-heading-multiplier:   1;
+    --font-size-body-multiplier:      1;
+    --font-size-label-multiplier:     1;
+
+    --line-height-heading-multiplier: 1;
+    --line-height-body-multiplier:    1;
+    --line-height-label-multiplier:   1;
+
+    /* FONT SCALING */
+    --font-scaling-desktop: 16px;
+    --font-scaling-tablet:  15px;
+    --font-scaling-mobile:  14px;
+
+    --cursor-interactive:    pointer;
+
+    --solid-inset-distance:  0;
+    --solid-inset-size:      0;
+    --solid-border-width:    0;
+    --backdrop-filter:       none;
+    --surface-border:        var(--static-transparent);
+    --surface-background:    var(--neutral-background-medium);
+}
+
+[data-theme="dark"] {
+    --page-background:              var(--neutral-background-weak);
+    --backdrop:                     var(--static-black-medium);
+
+    --solid-border-color-brand:     var(--brand-alpha-strong);
+    --solid-border-color-neutral:   var(--neutral-alpha-strong);
+    --solid-border-color-danger:    var(--danger-alpha-strong);
+
+    /* code */
+    --code-moss:                    var(--scheme-moss-800);
+    --code-gray:                    var(--scheme-gray-800);
+    --code-aqua:                    var(--scheme-aqua-800);
+    --code-green:                   var(--scheme-green-800);
+    --code-blue:                    var(--scheme-blue-800);
+    --code-violet:                  var(--scheme-violet-800);
+    --code-orange:                  var(--scheme-orange-800);
+
+    /* brand */
+    --brand-background-strong:      var(--function-brand-300);
+    --brand-background-medium:      var(--function-brand-200);
+    --brand-background-weak:        var(--function-brand-100);
+
+    --brand-on-background-strong:   var(--static-white);
+    --brand-on-background-medium:   var(--function-brand-900);
+    --brand-on-background-weak:     var(--function-brand-700);
+
+    --brand-border-strong:          var(--function-brand-400);
+    --brand-border-medium:          var(--function-brand-300);
+    --brand-border-weak:            var(--function-brand-200);
+  
+    --brand-alpha-strong:           var(--function-brand-600-50);
+    --brand-alpha-medium:           var(--function-brand-600-30);
+    --brand-alpha-weak:             var(--function-brand-600-10);
+
+    /* accent */
+    --accent-background-strong:     var(--function-accent-300);
+    --accent-background-medium:     var(--function-accent-200);
+    --accent-background-weak:       var(--function-accent-100);
+
+    --accent-on-background-strong:  var(--static-white);
+    --accent-on-background-medium:  var(--function-accent-900);
+    --accent-on-background-weak:    var(--function-accent-700);
+  
+    --accent-solid-strong:          var(--function-accent-500);
+    --accent-solid-medium:          var(--function-accent-400);
+    --accent-solid-weak:            var(--function-accent-300);
+  
+    --accent-on-solid-strong:       var(--static-white);      
+    --accent-on-solid-weak:         var(--function-accent-900);
+
+    --accent-border-strong:         var(--function-accent-400);
+    --accent-border-medium:         var(--function-accent-300);
+    --accent-border-weak:           var(--function-accent-200);
+  
+    --accent-alpha-strong:          var(--function-accent-600-50);
+    --accent-alpha-medium:          var(--function-accent-600-30);
+    --accent-alpha-weak:            var(--function-accent-600-10);
+
+    /* neutral */
+    --neutral-background-strong:    var(--function-neutral-300);
+    --neutral-background-medium:    var(--function-neutral-200);
+    --neutral-background-weak:      var(--function-neutral-100);
+
+    --neutral-on-background-strong: var(--static-white);
+    --neutral-on-background-medium: var(--function-neutral-900);
+    --neutral-on-background-weak:   var(--function-neutral-700);
+  
+    --neutral-solid-strong:         var(--function-neutral-500);
+    --neutral-solid-medium:         var(--function-neutral-400);
+    --neutral-solid-weak:           var(--function-neutral-300);
+  
+    --neutral-on-solid-strong:      var(--static-white);      
+    --neutral-on-solid-weak:        var(--function-neutral-900);
+
+    --neutral-border-strong:        var(--function-neutral-400);
+    --neutral-border-medium:        var(--function-neutral-300);
+    --neutral-border-weak:          var(--function-neutral-200);
+  
+    --neutral-alpha-strong:         var(--function-neutral-600-50);
+    --neutral-alpha-medium:         var(--function-neutral-600-30);
+    --neutral-alpha-weak:           var(--function-neutral-600-10);
+
+    /* info */
+    --info-background-strong:       var(--function-info-300);
+    --info-background-medium:       var(--function-info-200);
+    --info-background-weak:         var(--function-info-100);
+
+    --info-on-background-strong:    var(--static-white);
+    --info-on-background-medium:    var(--function-info-900);
+    --info-on-background-weak:      var(--function-info-700);
+  
+    --info-solid-strong:            var(--function-info-500);
+    --info-solid-medium:            var(--function-info-400);
+    --info-solid-weak:              var(--function-info-300);
+  
+    --info-on-solid-strong:         var(--static-white);      
+    --info-on-solid-weak:           var(--function-info-900);
+
+    --info-border-strong:           var(--function-info-400);
+    --info-border-medium:           var(--function-info-300);
+    --info-border-weak:             var(--function-info-200);
+  
+    --info-alpha-strong:            var(--function-info-600-50);
+    --info-alpha-medium:            var(--function-info-600-30);
+    --info-alpha-weak:              var(--function-info-600-10);
+
+    /* warning */
+    --warning-background-strong:    var(--function-warning-300);
+    --warning-background-medium:    var(--function-warning-200);
+    --warning-background-weak:      var(--function-warning-100);
+
+    --warning-on-background-strong: var(--static-white);
+    --warning-on-background-medium: var(--function-warning-900);
+    --warning-on-background-weak:   var(--function-warning-700);
+  
+    --warning-solid-strong:         var(--function-warning-500);
+    --warning-solid-medium:         var(--function-warning-400);
+    --warning-solid-weak:           var(--function-warning-300);
+  
+    --warning-on-solid-strong:      var(--static-white);      
+    --warning-on-solid-weak:        var(--function-warning-900);
+
+    --warning-border-strong:        var(--function-warning-400);
+    --warning-border-medium:        var(--function-warning-300);
+    --warning-border-weak:          var(--function-warning-200);
+  
+    --warning-alpha-strong:         var(--function-warning-600-50);
+    --warning-alpha-medium:         var(--function-warning-600-30);
+    --warning-alpha-weak:           var(--function-warning-600-10);
+
+    /* danger */
+    --danger-background-strong:     var(--function-danger-300);
+    --danger-background-medium:     var(--function-danger-200);
+    --danger-background-weak:       var(--function-danger-100);
+
+    --danger-on-background-strong:  var(--static-white);
+    --danger-on-background-medium:  var(--function-danger-900);
+    --danger-on-background-weak:    var(--function-danger-700);
+  
+    --danger-solid-strong:          var(--function-danger-500);
+    --danger-solid-medium:          var(--function-danger-400);
+    --danger-solid-weak:            var(--function-danger-300);
+  
+    --danger-on-solid-strong:       var(--static-white);      
+    --danger-on-solid-weak:         var(--function-danger-900);
+
+    --danger-border-strong:         var(--function-danger-400);
+    --danger-border-medium:         var(--function-danger-300);
+    --danger-border-weak:           var(--function-danger-200);
+  
+    --danger-alpha-strong:          var(--function-danger-600-50);
+    --danger-alpha-medium:          var(--function-danger-600-30);
+    --danger-alpha-weak:            var(--function-danger-600-10);
+
+    /* success */ 
+    --success-background-strong:    var(--function-success-300);
+    --success-background-medium:    var(--function-success-200);
+    --success-background-weak:      var(--function-success-100);
+
+    --success-on-background-strong: var(--static-white);
+    --success-on-background-medium: var(--function-success-900);
+    --success-on-background-weak:   var(--function-success-700);
+  
+    --success-solid-strong:         var(--function-success-500);
+    --success-solid-medium:         var(--function-success-400);
+    --success-solid-weak:           var(--function-success-300);
+  
+    --success-on-solid-strong:      var(--static-white);      
+    --success-on-solid-weak:        var(--function-success-900);
+
+    --success-border-strong:        var(--function-success-400);
+    --success-border-medium:        var(--function-success-300);
+    --success-border-weak:          var(--function-success-200);
+  
+    --success-alpha-strong:         var(--function-success-600-50);
+    --success-alpha-medium:         var(--function-success-600-30);
+    --success-alpha-weak:           var(--function-success-600-10);
+
+    .dark-flex {
+        display: flex;
+    }
+
+    .dark-grid {
+        display: grid;
+    }
+
+    .light-flex {
+        display: none;
+    }
+
+    .light-grid {
+        display: none;
+    }
+}
+
+[data-theme="light"] {
+    --page-background:              var(--neutral-background-weak);
+    --backdrop:                     var(--static-white-medium);
+
+    --solid-border-color-brand:     var(--brand-alpha-strong);
+    --solid-border-color-neutral:   var(--neutral-alpha-strong);
+    --solid-border-color-danger:    var(--danger-alpha-strong);
+
+    /* code */
+    --code-moss:                    var(--scheme-moss-600);
+    --code-gray:                    var(--scheme-gray-600);
+    --code-aqua:                    var(--scheme-aqua-600);
+    --code-green:                   var(--scheme-green-600);
+    --code-blue:                    var(--scheme-blue-600);
+    --code-violet:                  var(--scheme-violet-600);
+    --code-orange:                  var(--scheme-orange-600);
+    
+    /* brand */  
+    --brand-background-strong:      var(--function-brand-800);
+    --brand-background-medium:      var(--function-brand-1000);
+    --brand-background-weak:        var(--static-white);
+
+    --brand-on-background-strong:   var(--function-brand-100);
+    --brand-on-background-medium:   var(--function-brand-400);
+    --brand-on-background-weak:     var(--function-brand-500);
+
+    --brand-border-strong:          var(--function-brand-800);
+    --brand-border-medium:          var(--function-brand-900);
+    --brand-border-weak:            var(--function-brand-1000);
+  
+    --brand-alpha-strong:           var(--function-brand-600-50);
+    --brand-alpha-medium:           var(--function-brand-600-30);
+    --brand-alpha-weak:             var(--function-brand-600-10);
+    
+    /* accent */
+    --accent-background-strong:     var(--function-accent-800);
+    --accent-background-medium:     var(--function-accent-1000);
+    --accent-background-weak:       var(--static-white);
+
+    --accent-on-background-strong:  var(--function-accent-100);
+    --accent-on-background-medium:  var(--function-accent-400);
+    --accent-on-background-weak:    var(--function-accent-500);
+  
+    --accent-solid-strong:          var(--function-accent-600);
+    --accent-solid-medium:          var(--function-accent-500);
+    --accent-solid-weak:            var(--function-accent-400);
+  
+    --accent-on-solid-strong:       var(--static-white);      
+    --accent-on-solid-weak:         var(--function-accent-1000);
+
+    --accent-border-strong:         var(--function-accent-800);
+    --accent-border-medium:         var(--function-accent-900);
+    --accent-border-weak:           var(--function-accent-1000);
+  
+    --accent-alpha-strong:          var(--function-accent-600-50);
+    --accent-alpha-medium:          var(--function-accent-600-30);
+    --accent-alpha-weak:            var(--function-accent-600-10);
+
+    /* neutral */
+    --neutral-background-strong:    var(--function-neutral-800);
+    --neutral-background-medium:    var(--function-neutral-1000);
+    --neutral-background-weak:      var(--static-white);
+
+    --neutral-on-background-strong: var(--function-neutral-100);
+    --neutral-on-background-medium: var(--function-neutral-400);
+    --neutral-on-background-weak:   var(--function-neutral-500);
+  
+    --neutral-solid-strong:         var(--function-neutral-600);
+    --neutral-solid-medium:         var(--function-neutral-500);
+    --neutral-solid-weak:           var(--function-neutral-400);
+  
+    --neutral-on-solid-strong:      var(--static-white);      
+    --neutral-on-solid-weak:        var(--function-neutral-1000);
+
+    --neutral-border-strong:        var(--function-neutral-800);
+    --neutral-border-medium:        var(--function-neutral-900);
+    --neutral-border-weak:          var(--function-neutral-1000);
+  
+    --neutral-alpha-strong:         var(--function-neutral-600-50);
+    --neutral-alpha-medium:         var(--function-neutral-600-30);
+    --neutral-alpha-weak:           var(--function-neutral-600-10);
+
+    /* info */
+    --info-background-strong:       var(--function-info-800);
+    --info-background-medium:       var(--function-info-1000);
+    --info-background-weak:         var(--static-white);
+
+    --info-on-background-strong:    var(--function-info-100);
+    --info-on-background-medium:    var(--function-info-400);
+    --info-on-background-weak:      var(--function-info-500);
+  
+    --info-solid-strong:            var(--function-info-600);
+    --info-solid-medium:            var(--function-info-500);
+    --info-solid-weak:              var(--function-info-400);
+  
+    --info-on-solid-strong:         var(--static-white);      
+    --info-on-solid-weak:           var(--function-info-1000);
+
+    --info-border-strong:           var(--function-info-800);
+    --info-border-medium:           var(--function-info-900);
+    --info-border-weak:             var(--function-info-1000);
+  
+    --info-alpha-strong:            var(--function-info-600-50);
+    --info-alpha-medium:            var(--function-info-600-30);
+    --info-alpha-weak:              var(--function-info-600-10);
+
+    /* warning */
+    --warning-background-strong:    var(--function-warning-800);
+    --warning-background-medium:    var(--function-warning-1000);
+    --warning-background-weak:      var(--static-white);
+
+    --warning-on-background-strong: var(--function-warning-100);
+    --warning-on-background-medium: var(--function-warning-400);
+    --warning-on-background-weak:   var(--function-warning-500);
+  
+    --warning-solid-strong:         var(--function-warning-600);
+    --warning-solid-medium:         var(--function-warning-500);
+    --warning-solid-weak:           var(--function-warning-400);
+  
+    --warning-on-solid-strong:      var(--static-white);      
+    --warning-on-solid-weak:        var(--function-warning-1000);
+
+    --warning-border-strong:        var(--function-warning-800);
+    --warning-border-medium:        var(--function-warning-900);
+    --warning-border-weak:          var(--function-warning-1000);
+  
+    --warning-alpha-strong:         var(--function-warning-600-50);
+    --warning-alpha-medium:         var(--function-warning-600-30);
+    --warning-alpha-weak:           var(--function-warning-600-10);
+   
+    /* danger */   
+    --danger-background-strong:     var(--function-danger-800);
+    --danger-background-medium:     var(--function-danger-1000);
+    --danger-background-weak:       var(--static-white);
+
+    --danger-on-background-strong:  var(--function-danger-100);
+    --danger-on-background-medium:  var(--function-danger-400);
+    --danger-on-background-weak:    var(--function-danger-500);
+  
+    --danger-solid-strong:          var(--function-danger-600);
+    --danger-solid-medium:          var(--function-danger-500);
+    --danger-solid-weak:            var(--function-danger-400);
+  
+    --danger-on-solid-strong:       var(--static-white);      
+    --danger-on-solid-weak:         var(--function-danger-1000);
+
+    --danger-border-strong:         var(--function-danger-800);
+    --danger-border-medium:         var(--function-danger-900);
+    --danger-border-weak:           var(--function-danger-1000);
+  
+    --danger-alpha-strong:          var(--function-danger-600-50);
+    --danger-alpha-medium:          var(--function-danger-600-30);
+    --danger-alpha-weak:            var(--function-danger-600-10);
+   
+    /* success */   
+    --success-background-strong:    var(--function-success-800);
+    --success-background-medium:    var(--function-success-1000);
+    --success-background-weak:      var(--static-white);
+
+    --success-on-background-strong: var(--function-success-100);
+    --success-on-background-medium: var(--function-success-400);
+    --success-on-background-weak:   var(--function-success-500);
+  
+    --success-solid-strong:         var(--function-success-600);
+    --success-solid-medium:         var(--function-success-500);
+    --success-solid-weak:           var(--function-success-400);
+  
+    --success-on-solid-strong:      var(--static-white);      
+    --success-on-solid-weak:        var(--function-success-1000);
+
+    --success-border-strong:        var(--function-success-800);
+    --success-border-medium:        var(--function-success-900);
+    --success-border-weak:          var(--function-success-1000);
+  
+    --success-alpha-strong:         var(--function-success-600-50);
+    --success-alpha-medium:         var(--function-success-600-30);
+    --success-alpha-weak:           var(--function-success-600-10);
+    
+    .dark-flex {
+        display: none;
+    }
+
+    .dark-grid {
+        display: none;
+    }
+
+    .light-flex {
+        display: flex;
+    }
+
+    .light-grid {
+        display: grid;
+    }
+}
+
+[data-solid-style="plastic"] {
+    --solid-inset-distance: -1rem;
+    --solid-inset-size:      1rem;
+    --solid-border-width:    1px;
+}
+
+[data-transition="all"],[data-transition="micro"] {
+    --transition-eased:                  ease-in-out;
+    --transition-property-all:           all;
+    --transition-duration-micro-short:   0.1s;
+    --transition-duration-micro-medium:  0.2s;
+    --transition-duration-micro-long:    0.4s;
+    --transition-micro-short:            var(--transition-property-all) var(--transition-duration-micro-short) var(--transition-eased);
+    --transition-micro-medium:           var(--transition-property-all) var(--transition-duration-micro-medium) var(--transition-eased);
+    --transition-micro-long:             var(--transition-property-all) var(--transition-duration-micro-long) var(--transition-eased);
+}
+
+[data-transition="all"],[data-transition="macro"] {
+    --transition-eased:                  ease-in-out;
+    --transition-property-all:           all;
+    --transition-duration-macro-short:   0.15s;
+    --transition-duration-macro-medium:  0.3s;
+    --transition-duration-macro-long:    0.6s;
+    --transition-macro-short:            var(--transition-property-all) var(--transition-duration-macro-short) var(--transition-eased);
+    --transition-macro-medium:           var(--transition-property-all) var(--transition-duration-macro-medium) var(--transition-eased);
+    --transition-macro-long:             var(--transition-property-all) var(--transition-duration-macro-long) var(--transition-eased);
+}
+
+[data-surface="translucent"] {
+    --backdrop-filter: blur(1rem);
+}
+
+[data-surface="translucent"][data-theme="light"],
+[data-surface="translucent"] [data-theme="light"] {
+    --surface-background:    var(--static-white-medium);
+    --surface-border:        var(--neutral-alpha-medium);
+}
+
+[data-surface="translucent"][data-theme="dark"],
+[data-surface="translucent"] [data-theme="dark"] {
+    --surface-background:    var(--static-black-medium);
+    --surface-border:        var(--neutral-alpha-medium);
+}
+
+[data-surface="filled"][data-theme="light"],
+[data-surface="filled"] [data-theme="light"] {
+    --surface-background:    var(--neutral-background-weak);
+    --surface-border:        var(--neutral-border-medium);
+}
+
+[data-surface="filled"][data-theme="dark"],
+[data-surface="filled"] [data-theme="dark"] {
+    --surface-background:    var(--neutral-background-medium);
+    --surface-border:        var(--static-transparent);
+}
+
+[data-theme="dark"][data-solid="color"],
+[data-theme="dark"] [data-solid="color"] {
+    --brand-solid-strong:         var(--function-brand-500);
+    --brand-solid-medium:         var(--function-brand-400);
+    --brand-solid-weak:           var(--function-brand-300);
+
+    --brand-on-solid-strong:      var(--static-white);      
+    --brand-on-solid-weak:        var(--function-brand-900);
+}
+
+[data-theme="dark"][data-solid="contrast"],
+[data-theme="dark"] [data-solid="contrast"] {
+    --brand-solid-strong:         var(--function-neutral-1000);
+    --brand-solid-medium:         var(--static-white);
+    --brand-solid-weak:           var(--function-neutral-900);
+
+    --brand-on-solid-strong:      var(--static-black);
+    --brand-on-solid-weak:        var(--function-neutral-200);
+}
+
+[data-theme="dark"][data-solid="inverse"],
+[data-theme="dark"] [data-solid="inverse"] {
+    --brand-solid-strong:         var(--function-brand-800);
+    --brand-solid-medium:         var(--function-brand-700);
+    --brand-solid-weak:           var(--function-brand-600);
+
+    --brand-on-solid-strong:      var(--static-black);      
+    --brand-on-solid-weak:        var(--function-brand-200);
+}
+
+[data-theme="light"][data-solid="color"],
+[data-theme="light"] [data-solid="color"] {
+    --brand-solid-strong:         var(--function-brand-600);
+    --brand-solid-medium:         var(--function-brand-500);
+    --brand-solid-weak:           var(--function-brand-400);
+  
+    --brand-on-solid-strong:      var(--static-white);      
+    --brand-on-solid-weak:        var(--function-brand-1000);
+}
+
+[data-theme="light"][data-solid="contrast"],
+[data-theme="light"] [data-solid="contrast"] {
+    --brand-solid-strong:         var(--function-neutral-300);
+    --brand-solid-medium:         var(--static-black);
+    --brand-solid-weak:           var(--function-neutral-400);
+  
+    --brand-on-solid-strong:      var(--static-white);      
+    --brand-on-solid-weak:        var(--function-neutral-1000);
+}
+
+
+[data-solid="color"] {
+    --solid-inset-color-brand:    var(--brand-alpha-strong);
+    --solid-inset-color-neutral:  var(--static-transparent);
+    --solid-inset-color-danger:   var(--danger-alpha-strong);
+}
+
+[data-solid="contrast"] {
+    --solid-border-color-brand:   var(--neutral-alpha-strong);
+
+    --solid-inset-color-brand:    var(--static-transparent);
+    --solid-inset-color-neutral:  var(--static-transparent);
+    --solid-inset-color-danger:   var(--danger-alpha-strong);
+}
+
+[data-solid="inverse"] {
+    --solid-border-color-brand:   var(--brand-alpha-strong);
+
+    --solid-inset-color-brand:    var(--brand-alpha-strong);
+    --solid-inset-color-neutral:  var(--static-transparent);
+    --solid-inset-color-danger:   var(--danger-alpha-strong);
+}
+
+[data-theme="light"][data-solid="inverse"],
+[data-theme="light"] [data-solid="inverse"] {
+    --brand-solid-strong:         var(--function-brand-900);
+    --brand-solid-medium:         var(--function-brand-800);
+    --brand-solid-weak:           var(--function-brand-700);
+  
+    --brand-on-solid-strong:      var(--static-black);      
+    --brand-on-solid-weak:        var(--function-brand-200);
+}

package/dist/tokens/typography.scss

@@ -0,0 +1,110 @@
+:root {
+    /* FONT WEIGHT */
+    --font-weight-thin:            100;
+    --font-weight-extraLight:      200;
+    --font-weight-light:           300;
+    --font-weight-normal:          400;
+    --font-weight-medium:          500;
+    --font-weight-semiBold:        600;
+    --font-weight-bold:            700;
+    --font-weight-extraBold:       800;
+
+    --font-weight-body-default:    var(--font-weight-normal);
+    --font-weight-body-strong:     var(--font-weight-bold);
+    --font-weight-label-default:   var(--font-weight-normal);
+    --font-weight-label-strong:    var(--font-weight-semiBold);
+    --font-weight-code-default:    var(--font-weight-normal);
+    --font-weight-code-strong:     var(--font-weight-bold);
+    --font-weight-heading-default: var(--font-weight-normal);
+    --font-weight-heading-strong:  var(--font-weight-semiBold);
+    --font-weight-display-default: var(--font-weight-light);
+    --font-weight-display-strong:  var(--font-weight-semiBold);
+
+    /* FONT SIZE */
+    --font-size-display-xl:        5rem;
+    --font-size-display-l:         4rem;
+    --font-size-display-m:         3rem;
+    --font-size-display-s:         2.5rem;
+    --font-size-display-xs:        2rem;
+
+    --font-size-heading-xl:        1.5rem;
+    --font-size-heading-l:         1.33rem;
+    --font-size-heading-m:         1.25rem;
+    --font-size-heading-s:         1.125rem;
+    --font-size-heading-xs:        1rem;
+
+    --font-size-body-xl:           1.25rem;
+    --font-size-body-l:            1.125rem;
+    --font-size-body-m:            1rem;
+    --font-size-body-s:            0.875rem;
+    --font-size-body-xs:           0.75rem;
+
+    --font-size-label-l:           1rem;
+    --font-size-label-m:           0.925rem;
+    --font-size-label-s:           0.825rem;
+
+    /* LINE HEIGHT */
+    --line-height-display-xl:      5rem;
+    --line-height-display-l:       4.25rem;
+    --line-height-display-m:       3.25rem;
+    --line-height-display-s:       3rem;
+    --line-height-display-xs:      2.5rem;
+
+    --line-height-heading-xl:      2rem;
+    --line-height-heading-l:       1.75rem;
+    --line-height-heading-m:       1.5rem;
+    --line-height-heading-s:       1.5rem;
+    --line-height-heading-xs:      1.25rem;
+
+    --line-height-body-xl:         1.75rem;
+    --line-height-body-l:          1.5rem;
+    --line-height-body-m:          1.5rem;
+    --line-height-body-s:          1.125rem;
+    --line-height-body-xs:         1rem;
+
+    --line-height-label-l:         1.25rem;
+    --line-height-label-m:         1.25rem;
+    --line-height-label-s:         1rem;
+}
+
+@media (--m) {
+    :root {
+        /* FONT SIZE */
+        --font-size-display-xl:    3.5rem;
+        --font-size-display-l:     3.25rem;
+        --font-size-display-m:     2.75rem;
+        --font-size-display-s:     2.25rem;
+        --font-size-display-xs:    1.75rem;
+    
+        --font-size-heading-xl:    1.33rem;
+        --font-size-heading-l:     1.25rem;
+        --font-size-heading-m:     1.125rem;
+    
+        /* LINE HEIGHT */
+        --line-height-display-xl:  3.75rem;
+        --line-height-display-l:   3.5rem;
+        --line-height-display-m:   3rem;
+        --line-height-display-s:   2.5rem;
+        --line-height-display-xs:  2rem;
+    
+        --line-height-heading-xl:  1.75rem;
+        --line-height-heading-l:   1.5rem;
+        --line-height-heading-m:   1.25rem;
+    }
+}
+
+@media (--s) {
+    :root {
+        /* FONT SIZE */
+        --font-size-display-xl:    2.75rem;
+        --font-size-display-l:     2.5rem;
+        --font-size-display-m:     2.25rem;
+        --font-size-display-s:     2rem;
+    
+        /* LINE HEIGHT */
+        --line-height-display-xl:  3rem;
+        --line-height-display-l:   3rem;
+        --line-height-display-m:   2.5rem;
+        --line-height-display-s:   2.5rem;
+    }
+}