@studio-helga/once-ui-core 1.7.8

package/dist/tokens/theme.scss

@@ -0,0 +1,639 @@
+:root {
+    --font-heading: var(--font-heading);
+    --font-body:    var(--font-body);
+    --font-label:   var(--font-label);
+    --font-code:    var(--font-code);
+
+    --font-size-display-multiplier:   1;
+    --font-size-heading-multiplier:   1;
+    --font-size-body-multiplier:      1;
+    --font-size-label-multiplier:     1;
+
+    --line-height-display-multiplier: 1;
+    --line-height-heading-multiplier: 1;
+    --line-height-body-multiplier:    1;
+    --line-height-label-multiplier:   1;
+
+    --font-scaling-desktop:  16px;
+    --font-scaling-tablet:   16px;
+    --font-scaling-mobile:   15px;
+
+    --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);
+    --default-border:        var(--neutral-border-medium);
+}
+
+[data-cursor-interactive="pointer"] {
+    --cursor-interactive: pointer;
+}
+
+[data-cursor-interactive="default"] {
+    --cursor-interactive: default;
+}
+
+[data-desktop-size="18"] {
+    --font-scaling-desktop: 18px;
+}
+
+[data-desktop-size="17"] {
+    --font-scaling-desktop: 17px;
+}
+
+[data-desktop-size="16"] {
+    --font-scaling-desktop: 16px;
+}
+
+[data-desktop-size="15"] {
+    --font-scaling-desktop: 15px;
+}
+
+[data-desktop-size="14"] {
+    --font-scaling-desktop: 14px;
+}
+
+[data-desktop-size="13"] {
+    --font-scaling-desktop: 13px;
+}
+
+[data-tablet-size="18"] {
+    --font-scaling-tablet: 18px;
+}
+
+[data-tablet-size="17"] {
+    --font-scaling-tablet: 17px;
+}
+
+[data-tablet-size="16"] {
+    --font-scaling-tablet: 16px;
+}
+
+[data-tablet-size="15"] {
+    --font-scaling-tablet: 15px;
+}
+
+[data-tablet-size="14"] {
+    --font-scaling-tablet: 14px;
+}
+
+[data-tablet-size="13"] {
+    --font-scaling-tablet: 13px;
+}
+
+[data-mobile-size="18"] {
+    --font-scaling-mobile: 18px;
+}
+
+[data-mobile-size="17"] {
+    --font-scaling-mobile: 17px;
+}
+
+[data-mobile-size="16"] {
+    --font-scaling-mobile: 16px;
+}
+
+[data-mobile-size="15"] {
+    --font-scaling-mobile: 15px;
+}
+
+[data-mobile-size="14"] {
+    --font-scaling-mobile: 14px;
+}
+
+[data-mobile-size="13"] {
+    --font-scaling-mobile: 13px;
+}
+
+[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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    .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-15);
+    
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+
+    /* 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-15);
+   
+    /* 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-15);
+   
+    /* 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-15);
+    
+    .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);
+}