tide-design-system 2.4.2 → 2.4.3

package/dist/css/utilities.css

@@ -0,0 +1,16 @@
+@import './utilities-base.css';
+@import './utilities-responsive.css';
+
+/* Non-responsive utility classes */
+
+.tide-screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/css/variables.css

@@ -0,0 +1,205 @@
+/*.CSS Variables */
+:root {
+  /* Font Size */
+  --tide-font-10: 0.625rem;
+  --tide-font-12: 0.75rem;
+  --tide-font-14: 0.875rem;
+  --tide-font-16: 1rem;
+  --tide-font-18: 1.125rem;
+  --tide-font-20: 1.25rem;
+  --tide-font-24: 1.5rem;
+  --tide-font-28: 1.75rem;
+  --tide-font-32: 2rem;
+
+  /* Animation */
+  --tide-animate: 300ms ease-in-out;
+
+  /* Spacing */
+  --tide-spacing-0: 0rem;
+  --tide-spacing-1\/4: 0.25rem;
+  --tide-spacing-1\/2: 0.5rem;
+  --tide-spacing-1: 1rem;
+  --tide-spacing-2: 2rem;
+  --tide-spacing-4: 4rem;
+
+  /* Border */
+  --tide-border-width-1: 1px;
+  --tide-border-width-2: 2px;
+
+  --tide-border-1: var(--tide-border-width-1) solid var(--tide-black);
+  --tide-border-2: var(--tide-border-width-2) solid var(--tide-black);
+
+  /* Border Radius */
+  --tide-radius-1\/4: 4px;
+  --tide-radius-1\/2: 8px;
+  --tide-radius-1: 16px;
+  --tide-radius-full: 99999px;
+
+  --tide-black: var(--tide-gray-900);
+  --tide-white: var(--tide-gray-100);
+
+  /* Opacity */
+  --tide-disabled: 0.333;
+
+  /* Shadow */
+  --tide-shadow-bottom: 0px  2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-top:    0px -2px 8px 2px rgba(0, 0, 0, 0.07);
+  --tide-shadow-text:   0px  0px 5px rgba(0, 0, 0, 0.6);
+
+  /* Transparency */
+  --tide-transparent-100: color-mix(in srgb, white 90%, transparent);
+  --tide-transparent-200: color-mix(in srgb, white 75%, transparent);
+  --tide-transparent-300: color-mix(in srgb, black 10%, transparent);
+  --tide-transparent-400: color-mix(in srgb, black 50%, transparent);
+
+  /* Blur */
+  --tide-bg-blur: blur(8px);
+
+  /* Global tonal palette */
+  --tide-gray-100:  #FFFFFF;
+  --tide-gray-200:  #F5F5F5;
+  --tide-gray-300:  #E4E4E4;
+  --tide-gray-400:  #C9CACB;
+  --tide-gray-500:  #AEAFB2;
+  --tide-gray-600:  #939598;
+  --tide-gray-700:  #6E7072;
+  --tide-gray-800:  #494A4C;
+  --tide-gray-900:  #252526;
+  --tide-gray-1000: #000000;
+
+  --tide-blue-100:  #EBF1FD;
+  --tide-blue-200:  #3870E9;
+  --tide-blue-300:  #22438C;
+
+  --tide-green-100:  #E7F6ED;
+  --tide-green-200:  #11A94E;
+  --tide-green-300:  #0A652F;
+
+  --tide-lime-100:  #F7FAE9;
+  --tide-lime-200:  #ACC821;
+  --tide-lime-300:  #677814;
+
+  --tide-orange-100:  #FFF2EA;
+  --tide-orange-200:  #FA8131;
+  --tide-orange-300:  #964D1D;
+
+  --tide-purple-100:  #F1F0F8;
+  --tide-purple-200:  #756CB7;
+  --tide-purple-300:  #46416E;
+
+  --tide-red-100:  #FBE9EA;
+  --tide-red-200:  #D8202E;
+  --tide-red-300:  #82131C;
+
+  --tide-salmon-100:  #FDF1F0;
+  --tide-salmon-200:  #EE706B;
+  --tide-salmon-300:  #8F4340;
+
+  --tide-teal-100:  #E6F7F8;
+  --tide-teal-200:  #21B1B2;
+  --tide-teal-300:  #036C6C;
+
+  --tide-yellow-100:  #FEF2CC;
+  --tide-yellow-200:  #FACA33;
+  --tide-yellow-300:  #90731D;
+
+  /* Global color roles */
+  --tide-blue-primary: var(--tide-blue-200);
+  --tide-blue-surface: var(--tide-blue-100);
+  --tide-blue-border:  var(--tide-blue-200);
+  --tide-blue-on-surface: var(--tide-blue-300);
+
+  --tide-green-primary: var(--tide-green-200);
+  --tide-green-surface: var(--tide-green-100);
+  --tide-green-border:  var(--tide-green-200);
+  --tide-green-on-surface: var(--tide-green-300);
+
+  --tide-lime-primary: var(--tide-lime-200);
+  --tide-lime-surface: var(--tide-lime-100);
+  --tide-lime-border:  var(--tide-lime-200);
+  --tide-lime-on-surface: var(--tide-lime-300);
+
+  --tide-orange-primary: var(--tide-orange-200);
+  --tide-orange-surface: var(--tide-orange-100);
+  --tide-orange-border:  var(--tide-orange-200);
+  --tide-orange-on-surface: var(--tide-orange-300);
+
+  --tide-purple-primary: var(--tide-purple-200);
+  --tide-purple-surface: var(--tide-purple-100);
+  --tide-purple-border:  var(--tide-purple-200);
+  --tide-purple-on-surface: var(--tide-purple-300);
+
+  --tide-red-primary: var(--tide-red-200);
+  --tide-red-surface: var(--tide-red-100);
+  --tide-red-border:  var(--tide-red-200);
+  --tide-red-on-surface: var(--tide-red-300);
+
+  --tide-salmon-primary: var(--tide-salmon-200);
+  --tide-salmon-surface: var(--tide-salmon-100);
+  --tide-salmon-border:  var(--tide-salmon-200);
+  --tide-salmon-on-surface: var(--tide-salmon-300);
+
+  --tide-teal-primary: var(--tide-teal-200);
+  --tide-teal-surface: var(--tide-teal-100);
+  --tide-teal-border:  var(--tide-teal-200);
+  --tide-teal-on-surface: var(--tide-teal-300);
+
+  --tide-yellow-primary: var(--tide-yellow-200);
+  --tide-yellow-surface: var(--tide-yellow-100);
+  --tide-yellow-border:  var(--tide-yellow-200);
+  --tide-yellow-on-surface: var(--tide-yellow-300);
+
+  /* Status color roles */
+  --tide-error-primary: var(--tide-red-200);
+  --tide-error-surface: var(--tide-red-100);
+  --tide-error-border:  var(--tide-red-200);
+
+  --tide-info-primary: var(--tide-blue-200);
+  --tide-info-surface: var(--tide-blue-100);
+  --tide-info-border:  var(--tide-blue-200);
+
+  --tide-success-primary: var(--tide-green-200);
+  --tide-success-surface: var(--tide-green-100);
+  --tide-success-border:  var(--tide-green-200);
+
+  --tide-warning-primary: var(--tide-yellow-200);
+  --tide-warning-surface: var(--tide-yellow-100);
+  --tide-warning-border:  var(--tide-yellow-200);
+
+  /* Global color roles (defined in realm tonal palettes in Figma) */
+  --tide-secondary:    var(--tide-gray-900);
+  --tide-on-secondary: var(--tide-gray-100);
+
+  --tide-surface:          var(--tide-gray-100);
+  --tide-surface-variant:  var(--tide-gray-200);
+  --tide-surface-floating: var(--tide-transparent-100);
+
+  --tide-on-surface:                 var(--tide-gray-900);
+  --tide-on-surface-variant:         var(--tide-gray-700);
+  --tide-on-surface-inverse:         var(--tide-gray-100);
+  --tide-on-surface-inverse-variant: var(--tide-transparent-200);
+
+  --tide-border-low:      var(--tide-gray-300);
+  --tide-border:          var(--tide-gray-600);
+  --tide-border-high:     var(--tide-gray-900);
+  --tide-border-floating: var(--tide-transparent-300);
+
+  --tide-surface-gradient:
+    radial-gradient(
+      57.27% 60.26% at 100% 103.53%,
+      color-mix(in srgb, var(--tide-gradient-bottom-right-color) var(--tide-gradient-bottom-right-opacity), transparent) 0%,
+      color-mix(in srgb, var(--tide-gradient-bottom-right-color) 0%, transparent) 100%
+    ),
+    radial-gradient(
+      157.36% 151.94% at 19.69% -3.53%,
+      color-mix(in srgb, var(--tide-gradient-top-color) var(--tide-gradient-top-opacity), transparent) 28.37%,
+      color-mix(in srgb, var(--tide-gradient-top-color) 0%, transparent) 100%
+    ),
+    radial-gradient(
+      41.93% 63.48% at -2.12% 103.9%,
+      color-mix(in srgb, var(--tide-gradient-bottom-left-color) var(--tide-gradient-bottom-left-opacity), transparent) 0%,
+      color-mix(in srgb, var(--tide-gradient-bottom-left-color) 0%, transparent) 100%
+    );
+}
+
+