@3dsource/source-ui-native 1.0.18 → 1.0.20

package/styles/source.ui.native.scss

@@ -1,15 +1,13 @@
 // @use '@angular/material' as mat;
 @use './fonts';
-@use './variables/index';
+@use './variables/index' as variables;
+@use './variables-legacy/index' as variables-legacy;
 @use './base';
 @use './typography';
 @use './utils';
 // Elements: styles for blocks which aren't used as  components: src-list/src-list__item
 @use './elements/elements';
 
-// TODO: remove ALL connections to Angular Material
-// @include mat.elevation-classes();
-// @include mat.app-background();
 html,
 body {
   width: 100%;

package/styles/typography.scss

@@ -16,9 +16,9 @@
   .src-heading-h6 {
     margin: 0;
     font-style: normal;
-    font-family: var(--src-font-family-sans);
-    font-weight: var(--src-fw-semibold, 600);
-    // Works only in Chrome and Edge - 11 Jul 2023 - Progressively Enhanced
+    font-family: var(--src-font-family-header);
+    font-weight: var(--src-font-weight-semiBold, 600);
+
     text-wrap: balance;
   }
 
@@ -67,24 +67,29 @@
 
   h6,
   .src-heading-h6 {
-    font-size: var(--src-fs-medium);
-    line-height: var(--src-lh-medium);
+    font-size: var(--src-font-size-base);
+    line-height: var(--src-font-line-base);
   }
 
   body {
-    font-size: var(--src-fs-base);
-    font-weight: var(--src-fw-regular, 400);
-    line-height: var(--src-lh-base);
+    // font-size: var(--src-font-size-sm, 14px);
+    // font-weight: var(--src-font-weight-regular, 400);
+    // line-height: var(--src-font-line-sm, 20px);
+
+    font-size: var(--src-font-size-sm, 14px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--font-line-sm, 20px); /* 142.857% */
   }
 
   body p {
     color: var(--src-color-text-default);
-    font-size: var(--src-fs-base);
-    font-weight: var(--src-fw-regular, 400);
-    line-height: var(--src-lh-base);
+    font-size: var(--src-font-size-sm, 14px);
+    font-weight: var(--src-font-weight-regular, 400);
+    line-height: var(--src-font-line-sm, 20px);
   }
 
   strong {
-    font-weight: var(--src-fw-medium, 500);
+    font-weight: var(--src-font-weight-medium, 500);
   }
 }

package/styles/variables/_form-aliases.scss

@@ -1,16 +1,22 @@
 :root {
-  --srcFormElementFontSize: var(--src-fs-base);
-  --srcFormElementLineHeight: var(--src-lh-base);
-  --srcFormElementFontColor: var(--src-color-text-default);
+  // --srcFormElementFontColor: var(--src-text-ui-secondary-main, #111827);
+  // --srcFormElementDisabledFontColor: var(
+  //   --src-text-ui-secondary-secondary,
+  //   #4b5563
+  // );
+  // --srcFormElementBg: var(--src-surface-container-main, #fff);
+  // --srcFormElementDisabledBg: var(
+  //   --src-ui-input-disabled,
+  //   rgba(148, 163, 184, 0.16)
+  // );
+  // --srcFormElementBorderColor: var(--src-border-input-basic, #d1d5db);
+  // --srcFormElementDisabledBorderColor: transparent;
+  // --srcFormElementFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
+  //   var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
 
-  --srcFormElementBg: var(--src-color-bg-default);
-  --srcFormElementDisabledBg: var(--src-color-bg-default-disabled);
-  --srcFormElementBorderColor: var(--src-color-border-strong);
-  --srcFormElementDisabledBorderColor: var(--src-color-border-strong-disabled);
-  --srcFormElementHeight: 36px;
-  --srcFormElementBorderRadius: var(--src-br-small);
-  --srcFormElementBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  // Focus ring it's a multiple box-shadow
-  --srcFormElementFocusRing:
-    0 0 0 1px #fff, 0 0 0 3px var(--src-color-border-primary);
+  // // Sizing: sm, md, lg, xl
+  // --srcFormElementFontSize: var(--src-text-fontSize, 12px);
+  // --srcFormElementLineHeight: var(--src-text-lineHeight, 16px);
+  // --srcFormElementHeight: 36px;
+  // --srcFormElementBorderRadius: var(--src-border-rounded, 4px);
 }

package/styles/variables/color/dark.scss

@@ -0,0 +1,143 @@
+/* color - dark */
+:root {
+  --src-surface-background: var(--src-color-grey-900);
+  --src-ui-accent-default: var(--src-color-accent-400);
+  --src-ui-accent-default-hover: var(--src-color-accent-500);
+  --src-ui-accent-disabled: var(--src-color-alpha-white-50);
+  --src-ui-accent-success: var(--src-color-green-600);
+  --src-ui-accent-success-hover: var(--src-color-green-500);
+  --src-ui-accent-error: var(--src-color-red-600);
+  --src-ui-accent-error-hover: var(--src-color-red-500);
+  --src-ui-accent-active: var(--src-color-grey-200);
+  --src-ui-accent-active-hover: var(--src-color-grey-50);
+  --src-ui-secondary-default: var(--src-color-alpha-white-50);
+  --src-ui-secondary-default-hover: var(--src-color-alpha-default-100);
+  --src-ui-secondary-disabled: var(--src-color-alpha-default-100);
+  --src-ui-secondary-active: var(--src-color-alpha-accent-100);
+  --src-ui-secondary-info: var(--src-color-alpha-accent-200);
+  --src-ui-secondary-info-hover: var(--src-color-alpha-accent-100);
+  --src-ui-secondary-success: var(--src-color-alpha-success-200);
+  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
+  --src-ui-secondary-error: var(--src-color-alpha-destruct-200);
+  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
+  --src-ui-secondary-progress: var(--color-alpha-progress-10);
+  --src-ui-input-default: var(--src-color-alpha-white-10);
+  --src-ui-input-secondary: var(--src-color-alpha-default-200);
+  --src-ui-input-hover: var(--src-color-alpha-default-200);
+  --src-ui-input-disabled: var(--src-color-alpha-default-200);
+  --src-ui-input-success: var(--src-color-alpha-white-10);
+  --src-ui-input-success-hover: var(--src-color-alpha-success-50);
+  --src-ui-input-error: var(--src-color-alpha-white-10);
+  --src-ui-input-error-hover: var(--src-color-alpha-destruct-50);
+  --src-surface-curtain: var(--src-color-alpha-default-600);
+  --src-surface-bg: var(--src-color-alpha-white-50);
+  --src-border-button-basic: var(--src-color-grey-600);
+  --src-border-button-basic-hover: var(--src-color-grey-500);
+  --src-border-button-info: var(--src-color-accent-500);
+  --src-border-button-info-hover: var(--src-color-accent-400);
+  --src-border-button-success: var(--src-color-green-700);
+  --src-border-button-success-hover: var(--src-color-green-600);
+  --src-border-button-error: var(--src-color-red-500);
+  --src-border-button-error-hover: var(--src-color-red-600);
+  --src-border-button-disabled: var(--src-color-grey-800);
+  --src-border-input-basic: var(--src-color-grey-700);
+  --src-border-input-hover: var(--src-color-grey-500);
+  --src-border-input-filled: var(--src-color-grey-700);
+  --src-border-input-active: var(--src-color-accent-500);
+  --src-border-input-success: var(--src-color-green-600);
+  --src-border-input-success-hover: var(--src-color-green-400);
+  --src-border-input-error: var(--src-color-red-700);
+  --src-border-input-error-hover: var(--src-color-red-700);
+  --src-border-container-basic: var(--src-color-grey-800);
+  --src-border-container-hover: var(--src-color-grey-600);
+  --src-border-container-light: var(--src-color-alpha-white-50);
+  --src-border-container-active: var(--src-color-accent-500);
+  --src-border-container-success: var(--src-color-green-800);
+  --src-border-container-error: var(--src-color-red-800);
+  --src-text-body-main: var(--src-color-grey-50);
+  --src-text-body-secondary: var(--src-color-grey-300);
+  --src-text-body-grey: var(--src-color-grey-400);
+  --src-text-body-lable: var(--src-color-grey-300);
+  --src-text-body-disabled: var(--src-color-grey-500);
+  --src-text-body-main-invert: var(--src-color-grey-900);
+  --src-text-body-secondary-invert: var(--src-color-grey-600);
+  --src-icon-default: var(--src-color-grey-200);
+  --src-icon-label: var(--src-color-grey-400);
+  --src-icon-hover: var(--src-color-grey-50);
+  --src-icon-grey: var(--src-color-grey-400);
+  --src-icon-disabled: var(--src-color-grey-600);
+  --src-icon-main-invert: var(--src-light);
+  --src-icon-secondary-invert: var(--src-color-grey-200);
+  --src-icon-info: var(--src-color-accent-500);
+  --src-icon-info-hover: var(--src-color-accent-400);
+  --src-icon-success: var(--src-color-green-500);
+  --src-icon-success-hover: var(--src-color-green-400);
+  --src-icon-error: var(--src-color-red-400);
+  --src-icon-error-hover: var(--src-color-red-300);
+  --src-icon-progress: var(--src-color-orange-400);
+  --src-graphics-positive: var(--color-green-400);
+  --src-graphics-negative: var(--src-color-red-400);
+  --src-graphics-accent: var(--src-color-accent-500);
+  --src-graphics-dark-grey: var(--src-color-grey-400);
+  --src-graphics-orange: rgba(255, 185, 45, 1);
+  --src-graphics-yellow: rgba(240, 228, 66, 1);
+  --src-graphics-turquoise: rgba(0, 206, 209, 1);
+  --src-graphics-brown: rgba(139, 69, 19, 1);
+  --src-graphics-black: var(--src-color-grey-200);
+  --src-text-body-accent: var(--src-color-accent-400);
+  --src-text-body-success: var(--src-color-green-400);
+  --src-text-body-destruct: var(--src-color-red-400);
+  --src-text-body-progress: var(--src-color-orange-400);
+  --src-text-ui-primary-main: var(--src-light);
+  --src-text-ui-primary-secondary: var(--src-color-grey-200);
+  --src-text-ui-primary-disabled: var(--src-color-grey-400);
+  --src-text-ui-primary-main-invert: var(--src-color-grey-900);
+  --src-text-ui-primary-secondary-invert: var(--src-color-grey-700);
+  --src-text-ui-secondary-main: var(--src-color-grey-50);
+  --src-text-ui-secondary-secondary: var(--src-color-grey-200);
+  --src-text-ui-secondary-grey: var(--src-color-grey-400);
+  --src-text-ui-secondary-disabled: var(--src-color-grey-500);
+  --src-text-ui-secondary-main-invert: var(--src-color-grey-900);
+  --src-text-ui-secondary-secondary-invert: var(--src-color-grey-600);
+  --src-shadow-hard: var(--src-color-alpha-dark-100);
+  --src-shadow-light: var(--src-color-alpha-dark-50);
+  --src-shadow-accent-light: var(--src-color-alpha-accent-300);
+  --src-shadow-accent-hard: var(--src-color-alpha-accent-400);
+  --src-shadow-success: var(--src-color-alpha-success-200);
+  --src-shadow-success-hover: var(--src-color-alpha-success-50);
+  --src-shadow-error: var(--src-color-alpha-destruct-200);
+  --src-shadow-error-hover: var(--src-color-alpha-destruct-100);
+  --src-text-ui-accent-main: var(--src-color-accent-400);
+  --src-text-ui-accent-hover: var(--src-color-accent-300);
+  --src-text-ui-success-main: var(--src-color-green-400);
+  --src-text-ui-success-hover: var(--src-color-green-300);
+  --src-text-ui-distruct-main: var(--src-color-red-400);
+  --src-text-ui-distruct-hover: var(--src-color-red-300);
+  --src-surface-container-main: var(--src-color-grey-800);
+  --src-surface-container-on-top: var(--src-color-alpha-white-10);
+  --src-surface-container-secondary: var(--color-basic-black);
+  --src-surface-container-info: var(--color-blue-950);
+  --src-surface-container-success: var(--src-color-green-950);
+  --src-surface-container-error: var(--src-color-red-950);
+  --src-surface-toast-basic: var(--src-color-alpha-default-200);
+  --src-surface-toast-info: var(--src-color-accent-400);
+  --src-surface-toast-success: var(--src-color-green-400);
+  --src-surface-toast-error: var(--src-color-red-400);
+  --src-border-infoPrompt-basic: var(--src-color-grey-800);
+  --src-border-infoPrompt-light: var(--src-color-alpha-white-50);
+  --src-border-infoPrompt-info: var(--src-color-accent-800);
+  --src-border-infoPrompt-success: var(--src-color-green-800);
+  --src-border-infoPrompt-error: var(--src-color-red-800);
+  --src-gradient-light-start: var(--src-color-alpha-dark-200);
+  --src-gradient-light-end: var(--src-color-alpha-dark-100);
+  --src-gradient-accent-light: var(--src-color-alpha-accent-300);
+  --src-gradient-accent-hard: var(--src-color-alpha-accent-400);
+  --src-gradient-success: var(--color-alpha-success-200);
+  --src-gradient-success-hover: var(--color-alpha-success-50);
+  --src-gradient-error: var(--color-alpha-destruct-200);
+  --src-gradient-error-hover: var(--color-alpha-destruct-100);
+  --src-tech-sticker: var(--src-color-orange-800);
+  --src-tech-description: var(--src-color-orange-50);
+  --src-light: rgba(255, 255, 255, 1);
+  --src-dark: rgba(255, 255, 255, 1);
+}

package/styles/variables/color/light.scss

@@ -0,0 +1,143 @@
+/* color - light */
+:root {
+  --src-surface-background: var(--src-color-grey-50);
+  --src-ui-accent-default: var(--src-color-accent-500);
+  --src-ui-accent-default-hover: var(--src-color-accent-600);
+  --src-ui-accent-disabled: var(--src-color-alpha-test-100);
+  --src-ui-accent-success: var(--src-color-green-500);
+  --src-ui-accent-success-hover: var(--src-color-green-600);
+  --src-ui-accent-error: var(--src-color-red-500);
+  --src-ui-accent-error-hover: var(--src-color-red-600);
+  --src-ui-accent-active: var(--src-color-grey-700);
+  --src-ui-accent-active-hover: var(--src-color-grey-900);
+  --src-ui-secondary-default: var(--src-color-alpha-default-50);
+  --src-ui-secondary-default-hover: var(--src-color-alpha-default-10);
+  --src-ui-secondary-disabled: var(--src-color-alpha-white-10);
+  --src-ui-secondary-active: var(--src-color-alpha-accent-50);
+  --src-ui-secondary-info: var(--src-color-alpha-accent-10);
+  --src-ui-secondary-info-hover: var(--src-color-alpha-accent-50);
+  --src-ui-secondary-success: var(--src-color-alpha-success-10);
+  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
+  --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
+  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
+  --src-ui-secondary-progress: var(--color-alpha-progress-10);
+  --src-ui-input-default: var(--src-color-alpha-white-10);
+  --src-ui-input-secondary: var(--src-color-alpha-default-10);
+  --src-ui-input-hover: var(--src-color-alpha-accent-10);
+  --src-ui-input-disabled: var(--src-color-alpha-default-50);
+  --src-ui-input-success: var(--src-color-alpha-white-10);
+  --src-ui-input-success-hover: var(--src-color-alpha-success-10);
+  --src-ui-input-error: var(--src-color-alpha-white-10);
+  --src-ui-input-error-hover: var(--src-color-alpha-destruct-10);
+  --src-surface-curtain: var(--src-color-alpha-default-600);
+  --src-surface-bg: var(--src-color-alpha-default-200);
+  --src-border-button-basic: var(--src-color-grey-200);
+  --src-border-button-basic-hover: var(--src-color-grey-400);
+  --src-border-button-info: var(--src-color-accent-300);
+  --src-border-button-info-hover: var(--src-color-accent-500);
+  --src-border-button-success: var(--src-color-green-400);
+  --src-border-button-success-hover: var(--src-color-green-500);
+  --src-border-button-error: var(--src-color-red-300);
+  --src-border-button-error-hover: var(--src-color-red-500);
+  --src-border-button-disabled: var(--src-color-grey-200);
+  --src-border-input-basic: var(--src-color-grey-300);
+  --src-border-input-hover: var(--src-color-grey-400);
+  --src-border-input-filled: var(--src-color-grey-300);
+  --src-border-input-active: var(--src-color-accent-500);
+  --src-border-input-success: var(--src-color-green-500);
+  --src-border-input-success-hover: var(--src-color-green-600);
+  --src-border-input-error: var(--src-color-red-500);
+  --src-border-input-error-hover: var(--src-color-red-500);
+  --src-border-container-basic: var(--src-color-grey-300);
+  --src-border-container-hover: var(--src-color-grey-400);
+  --src-border-container-light: var(--src-color-alpha-default-50);
+  --src-border-container-active: var(--src-color-accent-400);
+  --src-border-container-success: var(--src-color-green-200);
+  --src-border-container-error: var(--src-color-red-200);
+  --src-text-body-main: var(--src-color-grey-900);
+  --src-text-body-secondary: var(--src-color-grey-600);
+  --src-text-body-grey: var(--src-color-grey-400);
+  --src-text-body-lable: var(--src-color-grey-500);
+  --src-text-body-disabled: var(--src-color-grey-400);
+  --src-text-body-main-invert: var(--src-color-grey-50);
+  --src-text-body-secondary-invert: var(--src-color-grey-300);
+  --src-icon-default: var(--src-color-grey-700);
+  --src-icon-label: var(--src-color-grey-500);
+  --src-icon-hover: var(--src-color-grey-900);
+  --src-icon-grey: var(--src-color-grey-400);
+  --src-icon-disabled: var(--src-color-grey-400);
+  --src-icon-main-invert: var(--src-light);
+  --src-icon-secondary-invert: var(--src-color-grey-200);
+  --src-icon-info: var(--src-color-accent-500);
+  --src-icon-info-hover: var(--src-color-accent-600);
+  --src-icon-success: var(--src-color-green-600);
+  --src-icon-success-hover: var(--src-color-green-700);
+  --src-icon-error: var(--src-color-red-500);
+  --src-icon-error-hover: var(--src-color-red-600);
+  --src-icon-progress: var(--src-color-orange-700);
+  --src-graphics-positive: var(--src-color-green-500);
+  --src-graphics-negative: var(--src-color-red-500);
+  --src-graphics-accent: var(--src-color-accent-500);
+  --src-graphics-dark-grey: var(--src-color-grey-500);
+  --src-graphics-orange: rgba(245, 168, 15, 1);
+  --src-graphics-yellow: rgba(240, 228, 66, 1);
+  --src-graphics-turquoise: rgba(0, 206, 209, 1);
+  --src-graphics-brown: rgba(139, 69, 19, 1);
+  --src-graphics-black: var(--src-color-grey-700);
+  --src-text-body-accent: var(--src-color-accent-600);
+  --src-text-body-success: var(--src-color-green-600);
+  --src-text-body-destruct: var(--src-color-red-600);
+  --src-text-body-progress: var(--src-color-orange-700);
+  --src-text-ui-primary-main: var(--src-light);
+  --src-text-ui-primary-secondary: var(--src-color-grey-200);
+  --src-text-ui-primary-disabled: var(--src-color-grey-400);
+  --src-text-ui-primary-main-invert: var(--src-color-grey-50);
+  --src-text-ui-primary-secondary-invert: var(--src-color-grey-200);
+  --src-text-ui-secondary-main: var(--src-color-grey-900);
+  --src-text-ui-secondary-secondary: var(--src-color-grey-600);
+  --src-text-ui-secondary-grey: var(--src-color-grey-400);
+  --src-text-ui-secondary-disabled: var(--src-color-grey-400);
+  --src-text-ui-secondary-main-invert: var(--src-color-grey-50);
+  --src-text-ui-secondary-secondary-invert: var(--src-color-grey-300);
+  --src-shadow-hard: var(--src-color-alpha-test-200);
+  --src-shadow-light: var(--src-color-alpha-default-50);
+  --src-shadow-accent-light: var(--src-color-alpha-accent-100);
+  --src-shadow-accent-hard: var(--src-color-alpha-accent-200);
+  --src-shadow-success: var(--src-color-alpha-success-50);
+  --src-shadow-success-hover: var(--src-color-alpha-success-200);
+  --src-shadow-error: var(--src-color-alpha-destruct-100);
+  --src-shadow-error-hover: var(--src-color-alpha-destruct-200);
+  --src-text-ui-accent-main: var(--src-color-accent-600);
+  --src-text-ui-accent-hover: var(--src-color-accent-700);
+  --src-text-ui-success-main: var(--src-color-green-600);
+  --src-text-ui-success-hover: var(--src-color-green-700);
+  --src-text-ui-distruct-main: var(--src-color-red-600);
+  --src-text-ui-distruct-hover: var(--src-color-red-700);
+  --src-surface-container-main: var(--src-light);
+  --src-surface-container-on-top: var(--src-color-alpha-default-10);
+  --src-surface-container-secondary: var(--src-color-grey-50);
+  --src-surface-container-info: var(--src-color-accent-50);
+  --src-surface-container-success: var(--src-color-green-50);
+  --src-surface-container-error: var(--src-color-red-50);
+  --src-surface-toast-basic: var(--src-color-alpha-default-50);
+  --src-surface-toast-info: var(--src-color-accent-600);
+  --src-surface-toast-success: var(--src-color-green-600);
+  --src-surface-toast-error: var(--src-color-red-500);
+  --src-border-infoPrompt-basic: var(--src-color-grey-300);
+  --src-border-infoPrompt-light: var(--src-color-alpha-default-50);
+  --src-border-infoPrompt-info: var(--src-color-accent-200);
+  --src-border-infoPrompt-success: var(--src-color-green-200);
+  --src-border-infoPrompt-error: var(--src-color-red-200);
+  --src-gradient-light-start: var(--src-color-alpha-test-100);
+  --src-gradient-light-end: var(--src-color-alpha-default-10);
+  --src-gradient-accent-light: var(--src-color-alpha-accent-10);
+  --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
+  --src-gradient-success: var(--color-alpha-success-50);
+  --src-gradient-success-hover: var(--color-alpha-success-200);
+  --src-gradient-error: var(--color-alpha-destruct-100);
+  --src-gradient-error-hover: var(--color-alpha-destruct-200);
+  --src-tech-sticker: var(--src-color-orange-100);
+  --src-tech-description: var(--src-color-orange-900);
+  --src-light: rgba(255, 255, 255, 1);
+  --src-dark: rgba(0, 0, 0, 1);
+}

package/styles/variables/index.scss

@@ -1,6 +1,29 @@
-@use 'colors';
-@use 'colors-aliases';
-@use 'typography';
-@use 'borders';
-@use 'shadows';
-@use 'form-aliases';
+@use 'primitives/primitives';
+@use 'color/light.scss';
+
+//@use 'color/dark.scss'; - TODO - figure out
+@use 'typeface/web.scss';
+@use 'ui/sm.scss' as ui-sm;
+@use 'ui/md.scss' as ui-md;
+@use 'ui/lg.scss' as ui-lg;
+@use 'ui/xl.scss' as ui-xl;
+@use 'layout/sm.scss' as layout-sm;
+@use 'layout/md.scss' as layout-md;
+@use 'layout/lg.scss' as layout-lg;
+@use 'layout/xl.scss' as layout-xl;
+@use 'form-aliases.scss' as form-aliases;
+:root {
+  --src-icon-size: var(--src-space-5);
+}
+// "primitives/primitives",
+// "color/light",
+// "color/dark",
+// "typeface/web",
+// "ui/sm",
+// "ui/md",
+// "ui/lg",
+// "ui/xl",
+// "layout/sm",
+// "layout/md",
+// "layout/lg",
+// "layout/xl"

package/styles/variables/layout/_lg.scss

@@ -0,0 +1,85 @@
+/* layout - lg */
+:root {
+  @media (min-width: 1024px) {
+    --src-layout-padding-const-xs: var(--src-space-1);
+    --src-layout-padding-const-sm: var(--src-space-2);
+    --src-layout-padding-const-md: var(--src-space-3);
+    --src-layout-padding-const-lg: var(--src-space-4);
+    --src-layout-padding-const-xl: var(--src-space-6);
+    --src-layout-padding-const-2xl: var(--src-space-8);
+    --src-layout-padding-var-xs: var(--src-space-3);
+    --src-layout-padding-table-sm: var(--src-space-3-5);
+    --src-layout-padding-var-sm: var(--src-space-4);
+    --src-layout-padding-var-md: var(--src-space-5);
+    --src-layout-padding-var-lg: var(--src-space-6);
+    --src-layout-padding-var-xl: var(--src-space-10);
+    --src-layout-padding-var-2xl: var(--src-space-12);
+    --src-layout-gap-const-none: 0px;
+    --src-layout-gap-const-xs: var(--src-space-1);
+    --src-layout-gap-const-sm: var(--src-space-2);
+    --src-layout-gap-const-md: var(--src-space-3);
+    --src-layout-gap-const-lg: var(--src-space-4);
+    --src-layout-gap-const-xl: var(--src-space-6);
+    --src-layout-gap-const-2xl: var(--src-space-8);
+    --src-layout-gap-var-none: 0px;
+    --src-layout-gap-var-sm: var(--src-space-3);
+    --src-layout-gap-var-md: var(--src-space-4);
+    --src-layout-gap-var-lg: var(--src-space-5);
+    --src-layout-gap-var-xl: var(--src-space-11);
+    --src-layout-height-const-sm: var(--src-space-7);
+    --src-layout-height-const-md: var(--src-space-8);
+    --src-layout-height-const-lg: var(--src-space-9);
+    --src-layout-height-const-h-xl: var(--src-space-10);
+    --src-layout-height-const-h-2xl: var(--src-space-16);
+    --src-layout-height-var-xs: var(--src-space-10);
+    --src-layout-height-var-sm: var(--src-space-12);
+    --src-layout-height-var-base: var(--src-space-24);
+    --src-layout-height-var-md: var(--src-space-36);
+    --src-layout-height-var-lg: var(--src-space-28);
+    --src-layout-height-var-xl: var(--src-space-44);
+    --src-layout-radius-var-rounded-kid: var(--src-space-3);
+    --src-layout-radius-var-rounded-parent: var(--src-space-5);
+    --src-layout-radius-rounded-none: 0px;
+    --src-layout-border-border: 2px;
+    --src-layout-table-height: var(--src-space-20);
+    --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
+    --src-layout-radius-const-rounded: var(--src-space-2);
+    --src-layout-radius-const-rounded-md: var(--src-space-3);
+    --src-layout-radius-const-rounded-lg: var(--src-space-4);
+    --src-layout-radius-const-rounded-xl: var(--src-space-6);
+    --src-layout-radius-const-rounded-2xl: var(--src-space-8);
+    --src-layout-radius-rounded-ui-full: 9999px;
+    --src-shadow-basic: var(--src-space-2);
+    --src-graphs-label: var(--src-space-2);
+    --src-graphs-label-var: var(--src-space-3);
+    --src-graphs-height-label-var: var(--src-space-8);
+    --src-graphs-height-label-const: var(--src-space-5);
+    --src-graphs-height-s: var(--src-space-9);
+    --screen-width: 1024px;
+    --card-width: 420px;
+    --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
+    --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
+    --src-typography-var-p-sm-weight: var(--src-font-weight-medium);
+    --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
+    --src-typography-var-p-md-weight: var(--src-font-weight-medium);
+    --src-typography-var-p-md-lineHeight: var(--src-font-line-lg);
+    --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
+    --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-sm-lineHeight: var(--src-font-line-xl);
+    --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
+    --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-md-lineHeight: var(--src-font-line-2xl);
+    --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
+    --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
+    --src-typography-var-h-xl-fontSize: 56px;
+    --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-xl-lineHeight: 56px;
+    --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
+    --src-typography-var-p-lg-weight: var(--src-font-weight-medium);
+    --src-typography-var-p-lg-lineHeight: var(--src-font-line-2xl);
+    // --price: String value;
+    // --price-data: String value;
+    --src-layout-table-height-2: var(--src-space-20);
+  }
+}

package/styles/variables/layout/_md.scss

@@ -0,0 +1,85 @@
+/* layout - md */
+:root {
+  @media (min-width: 768px) {
+    --src-layout-padding-const-xs: var(--src-space-1);
+    --src-layout-padding-const-sm: var(--src-space-2);
+    --src-layout-padding-const-md: var(--src-space-3);
+    --src-layout-padding-const-lg: var(--src-space-4);
+    --src-layout-padding-const-xl: var(--src-space-6);
+    --src-layout-padding-const-2xl: var(--src-space-8);
+    --src-layout-padding-var-xs: var(--src-space-2);
+    --src-layout-padding-table-sm: var(--src-space-3);
+    --src-layout-padding-var-sm: var(--src-space-3);
+    --src-layout-padding-var-md: var(--src-space-4);
+    --src-layout-padding-var-lg: var(--src-space-5);
+    --src-layout-padding-var-xl: var(--src-space-8);
+    --src-layout-padding-var-2xl: var(--src-space-11);
+    --src-layout-gap-const-none: 0px;
+    --src-layout-gap-const-xs: var(--src-space-1);
+    --src-layout-gap-const-sm: var(--src-space-2);
+    --src-layout-gap-const-md: var(--src-space-3);
+    --src-layout-gap-const-lg: var(--src-space-4);
+    --src-layout-gap-const-xl: var(--src-space-6);
+    --src-layout-gap-const-2xl: var(--src-space-8);
+    --src-layout-gap-var-none: 0px;
+    --src-layout-gap-var-sm: var(--src-space-2);
+    --src-layout-gap-var-md: var(--src-space-3);
+    --src-layout-gap-var-lg: var(--src-space-4);
+    --src-layout-gap-var-xl: var(--src-space-8);
+    --src-layout-height-const-sm: var(--src-space-7);
+    --src-layout-height-const-md: var(--src-space-8);
+    --src-layout-height-const-lg: var(--src-space-9);
+    --src-layout-height-const-h-xl: var(--src-space-10);
+    --src-layout-height-const-h-2xl: var(--src-space-16);
+    --src-layout-height-var-xs: var(--src-space-8);
+    --src-layout-height-var-sm: var(--src-space-10);
+    --src-layout-height-var-base: var(--src-space-20);
+    --src-layout-height-var-md: var(--src-space-28);
+    --src-layout-height-var-lg: var(--src-space-24);
+    --src-layout-height-var-xl: var(--src-space-36);
+    --src-layout-radius-var-rounded-kid: var(--src-space-2);
+    --src-layout-radius-var-rounded-parent: var(--src-space-3);
+    --src-layout-radius-rounded-none: 0px;
+    --src-layout-border-border: 1px;
+    --src-layout-table-height: var(--src-space-14);
+    --src-layout-radius-const-rounded-sm: var(--src-space-1-5);
+    --src-layout-radius-const-rounded: var(--src-space-2);
+    --src-layout-radius-const-rounded-md: var(--src-space-3);
+    --src-layout-radius-const-rounded-lg: var(--src-space-4);
+    --src-layout-radius-const-rounded-xl: var(--src-space-6);
+    --src-layout-radius-const-rounded-2xl: var(--src-space-8);
+    --src-layout-radius-rounded-ui-full: 9999px;
+    --src-shadow-basic: var(--src-space-1-5);
+    --src-graphs-label: var(--src-space-2);
+    --src-graphs-label-var: var(--src-space-2-5);
+    --src-graphs-height-label-var: var(--src-space-7);
+    --src-graphs-height-label-const: var(--src-space-5);
+    --src-graphs-height-s: var(--src-space-8);
+    --screen-width: 768px;
+    --card-width: 320px;
+    --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
+    --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
+    --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-md-fontSize: var(--src-font-size-base);
+    --src-typography-var-p-md-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-md-lineHeight: var(--src-font-line-base);
+    --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
+    --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-sm-lineHeight: var(--src-font-line-md);
+    --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
+    --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-md-lineHeight: var(--src-font-line-lg);
+    --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
+    --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-lg-lineHeight: var(--src-font-line-xl);
+    --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
+    --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
+    --src-typography-var-h-xl-lineHeight: 48px;
+    --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
+    --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
+    --src-typography-var-p-lg-lineHeight: var(--src-font-line-lg);
+    // --price: String value;
+    // --price-data: String value;
+    --src-layout-table-height-2: var(--src-space-14);
+  }
+}