css-zero 0.0.74 → 0.0.76

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de7c21cfac4e01a62d9bfbb23d31fb551253677a8aa549926126a5223c19812f
-  data.tar.gz: de83547f97557af1f64efc3d9928e676bbc2daec716724a3f0db67bdbe43312d
+  metadata.gz: 234d5de983ec281e715678f3483437789e75ecea5e308573fe971183108fd626
+  data.tar.gz: 130b07bd685ccd1341391fa5dec3819b54110b047dd0ee9b6a2a2cee488f1d88
 SHA512:
-  metadata.gz: 0e060c489748df663eaa5e400d035d4c072db20ab037bcbfb6b9f787906799118afde3ad2fbaa002a0850073187e697684ab93b78cb9d95205d5565c6a89a9aa
-  data.tar.gz: a1a9b36bb8e6ecf1dea28ff88a077624c2432c5d6b38c8f59029b80764c829af8e2551d3ed4ed92c0be8e568f18ba5c9f7adddea125e2f4c8c380b1fe6784f93
+  metadata.gz: d9b480262830be63ccd242c242f366304b8994f637f513349d1ae6c7494870991f430b05fd124ad4a6391373ff829f4010f39c8fd04f8e28167f745dee436ff5
+  data.tar.gz: df596e379b5a9ef20605f9f2d05b2fd6f914e64adc8584692b91d0060b044f486b075359e2dfd24891f4451e4822b6443a8664bffdbf655a398e8151a69a88bf

data/app/assets/stylesheets/_reset.css

@@ -36,14 +36,6 @@ html,
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
-/*
-  Prevent page scroll when modal dialog is open.
-*/
-
-html:has(dialog:modal[open]) {
-  overflow: hidden;
-}
-
 /*
   Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */
@@ -164,14 +156,78 @@ table {
 }
 
 /*
-  1. Inherit the font styles in all browsers.
-  2. Remove the default background color.
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
 */
 
 button,
 input,
-optgroup,
 select,
+optgroup,
 textarea,
 ::file-selector-button {
   font: inherit; /* 1 */
@@ -179,139 +235,140 @@ textarea,
   font-variation-settings: inherit; /* 1 */
   letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
-  background: transparent; /* 2 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
 }
 
 /*
-  Reset the default inset border style for form controls to solid.
+  Restore default font weight.
 */
 
-input:where(:not([type='button'], [type='reset'], [type='submit'])),
-select,
-textarea {
-  border: 1px solid;
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
 }
 
 /*
-  Correct the inability to style the border radius in iOS Safari.
+  Restore indentation.
 */
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-::file-selector-button {
-  appearance: button;
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
 }
 
 /*
-  Use the modern Firefox focus style for all focusable elements.
+  Restore space after button.
 */
 
-:-moz-focusring {
-  outline: auto;
+::file-selector-button {
+  margin-inline-end: 4px;
 }
 
 /*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  2. Set the default placeholder color to a semi-transparent version of the current text color.
 */
 
-:-moz-ui-invalid {
-  box-shadow: none;
+::placeholder {
+  opacity: 1; /* 1 */
+  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
 }
 
 /*
-  Add the correct vertical alignment in Chrome and Firefox.
+  Prevent resizing textareas horizontally by default.
 */
 
-progress {
-  vertical-align: baseline;
+textarea {
+  resize: vertical;
 }
 
 /*
-  Correct the cursor style of increment and decrement buttons in Safari.
+  Remove the inner padding in Chrome and Safari on macOS.
 */
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  block-size: auto;
+::-webkit-search-decoration {
+  -webkit-appearance: none;
 }
 
 /*
-  Correct the arrow style of datalist in Chrome.
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
 */
 
-::-webkit-calendar-picker-indicator {
-  line-height: 1em;
+::-webkit-date-and-time-value {
+  min-block-size: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
 }
 
 /*
-  Remove the inner padding in Chrome and Safari on macOS.
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
 */
 
-::-webkit-search-decoration {
-  -webkit-appearance: none;
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 /*
-  Add the correct display in Chrome and Safari.
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
 */
 
-summary {
-  display: list-item;
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
 }
 
 /*
-  Make lists unstyled by default.
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
 
-ol,
-ul,
-menu {
-  list-style: none;
+:-moz-ui-invalid {
+  box-shadow: none;
 }
 
 /*
-  Prevent resizing textareas horizontally by default.
+  Correct the inability to style the border radius in iOS Safari.
 */
 
-textarea {
-  resize: vertical;
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
 }
 
 /*
-  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  2. Set the default placeholder color to a semi-transparent version of the current text color.
+  Correct the cursor style of increment and decrement buttons in Safari.
 */
 
-::placeholder {
-  opacity: 1; /* 1 */
-  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  block-size: auto;
 }
 
 /*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-     This can trigger a poorly considered lint error in some tools but is included by design.
+  Enables size interpolation to allow animation.
 */
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+:root {
+  interpolate-size: allow-keywords;
 }
 
 /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  Prevent page scroll when modal dialog is open.
 */
 
-img,
-video {
-  max-inline-size: 100%;
-  block-size: auto;
+html:has(dialog:modal[open]) {
+  overflow: hidden;
 }
 
 /*

data/app/assets/stylesheets/colors.css

@@ -1,265 +1,265 @@
 :root {
-  --slate-50:  #f8fafc;
-  --slate-100: #f1f5f9;
-  --slate-200: #e2e8f0;
-  --slate-300: #cbd5e1;
-  --slate-400: #94a3b8;
-  --slate-500: #64748b;
-  --slate-600: #475569;
-  --slate-700: #334155;
-  --slate-800: #1e293b;
-  --slate-900: #0f172a;
-  --slate-950: #020617;
+  --slate-50: oklch(0.984 0.003 247.858);
+  --slate-100: oklch(0.968 0.007 247.896);
+  --slate-200: oklch(0.929 0.013 255.508);
+  --slate-300: oklch(0.869 0.022 252.894);
+  --slate-400: oklch(0.704 0.04 256.788);
+  --slate-500: oklch(0.554 0.046 257.417);
+  --slate-600: oklch(0.446 0.043 257.281);
+  --slate-700: oklch(0.372 0.044 257.287);
+  --slate-800: oklch(0.279 0.041 260.031);
+  --slate-900: oklch(0.208 0.042 265.755);
+  --slate-950: oklch(0.129 0.042 264.695);
 
-  --gray-50:  #f9fafb;
-  --gray-100: #f3f4f6;
-  --gray-200: #e5e7eb;
-  --gray-300: #d1d5db;
-  --gray-400: #9ca3af;
-  --gray-500: #6b7280;
-  --gray-600: #4b5563;
-  --gray-700: #374151;
-  --gray-800: #1f2937;
-  --gray-900: #111827;
-  --gray-950: #030712;
+  --gray-50: oklch(0.985 0.002 247.839);
+  --gray-100: oklch(0.967 0.003 264.542);
+  --gray-200: oklch(0.928 0.006 264.531);
+  --gray-300: oklch(0.872 0.01 258.338);
+  --gray-400: oklch(0.707 0.022 261.325);
+  --gray-500: oklch(0.551 0.027 264.364);
+  --gray-600: oklch(0.446 0.03 256.802);
+  --gray-700: oklch(0.373 0.034 259.733);
+  --gray-800: oklch(0.278 0.033 256.848);
+  --gray-900: oklch(0.21 0.034 264.665);
+  --gray-950: oklch(0.13 0.028 261.692);
 
-  --zinc-50:  #fafafa;
-  --zinc-100: #f4f4f5;
-  --zinc-200: #e4e4e7;
-  --zinc-300: #d4d4d8;
-  --zinc-400: #a1a1aa;
-  --zinc-500: #71717a;
-  --zinc-600: #52525b;
-  --zinc-700: #3f3f46;
-  --zinc-800: #27272a;
-  --zinc-900: #18181b;
-  --zinc-950: #09090b;
+  --zinc-50: oklch(0.985 0 0);
+  --zinc-100: oklch(0.967 0.001 286.375);
+  --zinc-200: oklch(0.92 0.004 286.32);
+  --zinc-300: oklch(0.871 0.006 286.286);
+  --zinc-400: oklch(0.705 0.015 286.067);
+  --zinc-500: oklch(0.552 0.016 285.938);
+  --zinc-600: oklch(0.442 0.017 285.786);
+  --zinc-700: oklch(0.37 0.013 285.805);
+  --zinc-800: oklch(0.274 0.006 286.033);
+  --zinc-900: oklch(0.21 0.006 285.885);
+  --zinc-950: oklch(0.141 0.005 285.823);
 
-  --neutral-50:  #fafafa;
-  --neutral-100: #f5f5f5;
-  --neutral-200: #e5e5e5;
-  --neutral-300: #d4d4d4;
-  --neutral-400: #a3a3a3;
-  --neutral-500: #737373;
-  --neutral-600: #525252;
-  --neutral-700: #404040;
-  --neutral-800: #262626;
-  --neutral-900: #171717;
-  --neutral-950: #0a0a0a;
+  --neutral-50: oklch(0.985 0 0);
+  --neutral-100: oklch(0.97 0 0);
+  --neutral-200: oklch(0.922 0 0);
+  --neutral-300: oklch(0.87 0 0);
+  --neutral-400: oklch(0.708 0 0);
+  --neutral-500: oklch(0.556 0 0);
+  --neutral-600: oklch(0.439 0 0);
+  --neutral-700: oklch(0.371 0 0);
+  --neutral-800: oklch(0.269 0 0);
+  --neutral-900: oklch(0.205 0 0);
+  --neutral-950: oklch(0.145 0 0);
 
-  --stone-50:  #fafaf9;
-  --stone-100: #f5f5f4;
-  --stone-200: #e7e5e4;
-  --stone-300: #d6d3d1;
-  --stone-400: #a8a29e;
-  --stone-500: #78716c;
-  --stone-600: #57534e;
-  --stone-700: #44403c;
-  --stone-800: #292524;
-  --stone-900: #1c1917;
-  --stone-950: #0c0a09;
+  --stone-50: oklch(0.985 0.001 106.423);
+  --stone-100: oklch(0.97 0.001 106.424);
+  --stone-200: oklch(0.923 0.003 48.717);
+  --stone-300: oklch(0.869 0.005 56.366);
+  --stone-400: oklch(0.709 0.01 56.259);
+  --stone-500: oklch(0.553 0.013 58.071);
+  --stone-600: oklch(0.444 0.011 73.639);
+  --stone-700: oklch(0.374 0.01 67.558);
+  --stone-800: oklch(0.268 0.007 34.298);
+  --stone-900: oklch(0.216 0.006 56.043);
+  --stone-950: oklch(0.147 0.004 49.25);
 
-  --red-50:  #fef2f2;
-  --red-100: #fee2e2;
-  --red-200: #fecaca;
-  --red-300: #fca5a5;
-  --red-400: #f87171;
-  --red-500: #ef4444;
-  --red-600: #dc2626;
-  --red-700: #b91c1c;
-  --red-800: #991b1b;
-  --red-900: #7f1d1d;
-  --red-950: #450a0a;
+  --red-50: oklch(0.971 0.013 17.38);
+  --red-100: oklch(0.936 0.032 17.717);
+  --red-200: oklch(0.885 0.062 18.334);
+  --red-300: oklch(0.808 0.114 19.571);
+  --red-400: oklch(0.704 0.191 22.216);
+  --red-500: oklch(0.637 0.237 25.331);
+  --red-600: oklch(0.577 0.245 27.325);
+  --red-700: oklch(0.505 0.213 27.518);
+  --red-800: oklch(0.444 0.177 26.899);
+  --red-900: oklch(0.396 0.141 25.723);
+  --red-950: oklch(0.258 0.092 26.042);
 
-  --orange-50:  #fff7ed;
-  --orange-100: #ffedd5;
-  --orange-200: #fed7aa;
-  --orange-300: #fdba74;
-  --orange-400: #fb923c;
-  --orange-500: #f97316;
-  --orange-600: #ea580c;
-  --orange-700: #c2410c;
-  --orange-800: #9a3412;
-  --orange-900: #7c2d12;
-  --orange-950: #431407;
+  --orange-50: oklch(0.98 0.016 73.684);
+  --orange-100: oklch(0.954 0.038 75.164);
+  --orange-200: oklch(0.901 0.076 70.697);
+  --orange-300: oklch(0.837 0.128 66.29);
+  --orange-400: oklch(0.75 0.183 55.934);
+  --orange-500: oklch(0.705 0.213 47.604);
+  --orange-600: oklch(0.646 0.222 41.116);
+  --orange-700: oklch(0.553 0.195 38.402);
+  --orange-800: oklch(0.47 0.157 37.304);
+  --orange-900: oklch(0.408 0.123 38.172);
+  --orange-950: oklch(0.266 0.079 36.259);
 
-  --amber-50:  #fffbeb;
-  --amber-100: #fef3c7;
-  --amber-200: #fde68a;
-  --amber-300: #fcd34d;
-  --amber-400: #fbbf24;
-  --amber-500: #f59e0b;
-  --amber-600: #d97706;
-  --amber-700: #b45309;
-  --amber-800: #92400e;
-  --amber-900: #78350f;
-  --amber-950: #451a03;
+  --amber-50: oklch(0.987 0.022 95.277);
+  --amber-100: oklch(0.962 0.059 95.617);
+  --amber-200: oklch(0.924 0.12 95.746);
+  --amber-300: oklch(0.879 0.169 91.605);
+  --amber-400: oklch(0.828 0.189 84.429);
+  --amber-500: oklch(0.769 0.188 70.08);
+  --amber-600: oklch(0.666 0.179 58.318);
+  --amber-700: oklch(0.555 0.163 48.998);
+  --amber-800: oklch(0.473 0.137 46.201);
+  --amber-900: oklch(0.414 0.112 45.904);
+  --amber-950: oklch(0.279 0.077 45.635);
 
-  --yellow-50:  #fefce8;
-  --yellow-100: #fef9c3;
-  --yellow-200: #fef08a;
-  --yellow-300: #fde047;
-  --yellow-400: #facc15;
-  --yellow-500: #eab308;
-  --yellow-600: #ca8a04;
-  --yellow-700: #a16207;
-  --yellow-800: #854d0e;
-  --yellow-900: #713f12;
-  --yellow-950: #422006;
+  --yellow-50: oklch(0.987 0.026 102.212);
+  --yellow-100: oklch(0.973 0.071 103.193);
+  --yellow-200: oklch(0.945 0.129 101.54);
+  --yellow-300: oklch(0.905 0.182 98.111);
+  --yellow-400: oklch(0.852 0.199 91.936);
+  --yellow-500: oklch(0.795 0.184 86.047);
+  --yellow-600: oklch(0.681 0.162 75.834);
+  --yellow-700: oklch(0.554 0.135 66.442);
+  --yellow-800: oklch(0.476 0.114 61.907);
+  --yellow-900: oklch(0.421 0.095 57.708);
+  --yellow-950: oklch(0.286 0.066 53.813);
 
-  --lime-50:  #f7fee7;
-  --lime-100: #ecfccb;
-  --lime-200: #d9f99d;
-  --lime-300: #bef264;
-  --lime-400: #a3e635;
-  --lime-500: #84cc16;
-  --lime-600: #65a30d;
-  --lime-700: #4d7c0f;
-  --lime-800: #3f6212;
-  --lime-900: #365314;
-  --lime-950: #1a2e05;
+  --lime-50: oklch(0.986 0.031 120.757);
+  --lime-100: oklch(0.967 0.067 122.328);
+  --lime-200: oklch(0.938 0.127 124.321);
+  --lime-300: oklch(0.897 0.196 126.665);
+  --lime-400: oklch(0.841 0.238 128.85);
+  --lime-500: oklch(0.768 0.233 130.85);
+  --lime-600: oklch(0.648 0.2 131.684);
+  --lime-700: oklch(0.532 0.157 131.589);
+  --lime-800: oklch(0.453 0.124 130.933);
+  --lime-900: oklch(0.405 0.101 131.063);
+  --lime-950: oklch(0.274 0.072 132.109);
 
-  --green-50:  #f0fdf4;
-  --green-100: #dcfce7;
-  --green-200: #bbf7d0;
-  --green-300: #86efac;
-  --green-400: #4ade80;
-  --green-500: #22c55e;
-  --green-600: #16a34a;
-  --green-700: #15803d;
-  --green-800: #166534;
-  --green-900: #14532d;
-  --green-950: #052e16;
+  --green-50: oklch(0.982 0.018 155.826);
+  --green-100: oklch(0.962 0.044 156.743);
+  --green-200: oklch(0.925 0.084 155.995);
+  --green-300: oklch(0.871 0.15 154.449);
+  --green-400: oklch(0.792 0.209 151.711);
+  --green-500: oklch(0.723 0.219 149.579);
+  --green-600: oklch(0.627 0.194 149.214);
+  --green-700: oklch(0.527 0.154 150.069);
+  --green-800: oklch(0.448 0.119 151.328);
+  --green-900: oklch(0.393 0.095 152.535);
+  --green-950: oklch(0.266 0.065 152.934);
 
-  --emerald-50:  #ecfdf5;
-  --emerald-100: #d1fae5;
-  --emerald-200: #a7f3d0;
-  --emerald-300: #6ee7b7;
-  --emerald-400: #34d399;
-  --emerald-500: #10b981;
-  --emerald-600: #059669;
-  --emerald-700: #047857;
-  --emerald-800: #065f46;
-  --emerald-900: #064e3b;
-  --emerald-950: #022c22;
+  --emerald-50: oklch(0.979 0.021 166.113);
+  --emerald-100: oklch(0.95 0.052 163.051);
+  --emerald-200: oklch(0.905 0.093 164.15);
+  --emerald-300: oklch(0.845 0.143 164.978);
+  --emerald-400: oklch(0.765 0.177 163.223);
+  --emerald-500: oklch(0.696 0.17 162.48);
+  --emerald-600: oklch(0.596 0.145 163.225);
+  --emerald-700: oklch(0.508 0.118 165.612);
+  --emerald-800: oklch(0.432 0.095 166.913);
+  --emerald-900: oklch(0.378 0.077 168.94);
+  --emerald-950: oklch(0.262 0.051 172.552);
 
-  --teal-50:  #f0fdfa;
-  --teal-100: #ccfbf1;
-  --teal-200: #99f6e4;
-  --teal-300: #5eead4;
-  --teal-400: #2dd4bf;
-  --teal-500: #14b8a6;
-  --teal-600: #0d9488;
-  --teal-700: #0f766e;
-  --teal-800: #115e59;
-  --teal-900: #134e4a;
-  --teal-950: #042f2e;
+  --teal-50: oklch(0.984 0.014 180.72);
+  --teal-100: oklch(0.953 0.051 180.801);
+  --teal-200: oklch(0.91 0.096 180.426);
+  --teal-300: oklch(0.855 0.138 181.071);
+  --teal-400: oklch(0.777 0.152 181.912);
+  --teal-500: oklch(0.704 0.14 182.503);
+  --teal-600: oklch(0.6 0.118 184.704);
+  --teal-700: oklch(0.511 0.096 186.391);
+  --teal-800: oklch(0.437 0.078 188.216);
+  --teal-900: oklch(0.386 0.063 188.416);
+  --teal-950: oklch(0.277 0.046 192.524);
 
-  --cyan-50:  #ecfeff;
-  --cyan-100: #cffafe;
-  --cyan-200: #a5f3fc;
-  --cyan-300: #67e8f9;
-  --cyan-400: #22d3ee;
-  --cyan-500: #06b6d4;
-  --cyan-600: #0891b2;
-  --cyan-700: #0e7490;
-  --cyan-800: #155e75;
-  --cyan-900: #164e63;
-  --cyan-950: #083344;
+  --cyan-50: oklch(0.984 0.019 200.873);
+  --cyan-100: oklch(0.956 0.045 203.388);
+  --cyan-200: oklch(0.917 0.08 205.041);
+  --cyan-300: oklch(0.865 0.127 207.078);
+  --cyan-400: oklch(0.789 0.154 211.53);
+  --cyan-500: oklch(0.715 0.143 215.221);
+  --cyan-600: oklch(0.609 0.126 221.723);
+  --cyan-700: oklch(0.52 0.105 223.128);
+  --cyan-800: oklch(0.45 0.085 224.283);
+  --cyan-900: oklch(0.398 0.07 227.392);
+  --cyan-950: oklch(0.302 0.056 229.695);
 
-  --sky-50:  #f0f9ff;
-  --sky-100: #e0f2fe;
-  --sky-200: #bae6fd;
-  --sky-300: #7dd3fc;
-  --sky-400: #38bdf8;
-  --sky-500: #0ea5e9;
-  --sky-600: #0284c7;
-  --sky-700: #0369a1;
-  --sky-800: #075985;
-  --sky-900: #0c4a6e;
-  --sky-950: #082f49;
+  --sky-50: oklch(0.977 0.013 236.62);
+  --sky-100: oklch(0.951 0.026 236.824);
+  --sky-200: oklch(0.901 0.058 230.902);
+  --sky-300: oklch(0.828 0.111 230.318);
+  --sky-400: oklch(0.746 0.16 232.661);
+  --sky-500: oklch(0.685 0.169 237.323);
+  --sky-600: oklch(0.588 0.158 241.966);
+  --sky-700: oklch(0.5 0.134 242.749);
+  --sky-800: oklch(0.443 0.11 240.79);
+  --sky-900: oklch(0.391 0.09 240.876);
+  --sky-950: oklch(0.293 0.066 243.157);
 
-  --blue-50:  #eff6ff;
-  --blue-100: #dbeafe;
-  --blue-200: #bfdbfe;
-  --blue-300: #93c5fd;
-  --blue-400: #60a5fa;
-  --blue-500: #3b82f6;
-  --blue-600: #2563eb;
-  --blue-700: #1d4ed8;
-  --blue-800: #1e40af;
-  --blue-900: #1e3a8a;
-  --blue-950: #172554;
+  --blue-50: oklch(0.97 0.014 254.604);
+  --blue-100: oklch(0.932 0.032 255.585);
+  --blue-200: oklch(0.882 0.059 254.128);
+  --blue-300: oklch(0.809 0.105 251.813);
+  --blue-400: oklch(0.707 0.165 254.624);
+  --blue-500: oklch(0.623 0.214 259.815);
+  --blue-600: oklch(0.546 0.245 262.881);
+  --blue-700: oklch(0.488 0.243 264.376);
+  --blue-800: oklch(0.424 0.199 265.638);
+  --blue-900: oklch(0.379 0.146 265.522);
+  --blue-950: oklch(0.282 0.091 267.935);
 
-  --indigo-50:  #eef2ff;
-  --indigo-100: #e0e7ff;
-  --indigo-200: #c7d2fe;
-  --indigo-300: #a5b4fc;
-  --indigo-400: #818cf8;
-  --indigo-500: #6366f1;
-  --indigo-600: #4f46e5;
-  --indigo-700: #4338ca;
-  --indigo-800: #3730a3;
-  --indigo-900: #312e81;
-  --indigo-950: #1e1b4b;
+  --indigo-50: oklch(0.962 0.018 272.314);
+  --indigo-100: oklch(0.93 0.034 272.788);
+  --indigo-200: oklch(0.87 0.065 274.039);
+  --indigo-300: oklch(0.785 0.115 274.713);
+  --indigo-400: oklch(0.673 0.182 276.935);
+  --indigo-500: oklch(0.585 0.233 277.117);
+  --indigo-600: oklch(0.511 0.262 276.966);
+  --indigo-700: oklch(0.457 0.24 277.023);
+  --indigo-800: oklch(0.398 0.195 277.366);
+  --indigo-900: oklch(0.359 0.144 278.697);
+  --indigo-950: oklch(0.257 0.09 281.288);
 
-  --violet-50:  #f5f3ff;
-  --violet-100: #ede9fe;
-  --violet-200: #ddd6fe;
-  --violet-300: #c4b5fd;
-  --violet-400: #a78bfa;
-  --violet-500: #8b5cf6;
-  --violet-600: #7c3aed;
-  --violet-700: #6d28d9;
-  --violet-800: #5b21b6;
-  --violet-900: #4c1d95;
-  --violet-950: #2e1065;
+  --violet-50: oklch(0.969 0.016 293.756);
+  --violet-100: oklch(0.943 0.029 294.588);
+  --violet-200: oklch(0.894 0.057 293.283);
+  --violet-300: oklch(0.811 0.111 293.571);
+  --violet-400: oklch(0.702 0.183 293.541);
+  --violet-500: oklch(0.606 0.25 292.717);
+  --violet-600: oklch(0.541 0.281 293.009);
+  --violet-700: oklch(0.491 0.27 292.581);
+  --violet-800: oklch(0.432 0.232 292.759);
+  --violet-900: oklch(0.38 0.189 293.745);
+  --violet-950: oklch(0.283 0.141 291.089);
 
-  --purple-50:  #faf5ff;
-  --purple-100: #f3e8ff;
-  --purple-200: #e9d5ff;
-  --purple-300: #d8b4fe;
-  --purple-400: #c084fc;
-  --purple-500: #a855f7;
-  --purple-600: #9333ea;
-  --purple-700: #7e22ce;
-  --purple-800: #6b21a8;
-  --purple-900: #581c87;
-  --purple-950: #3b0764;
+  --purple-50: oklch(0.977 0.014 308.299);
+  --purple-100: oklch(0.946 0.033 307.174);
+  --purple-200: oklch(0.902 0.063 306.703);
+  --purple-300: oklch(0.827 0.119 306.383);
+  --purple-400: oklch(0.714 0.203 305.504);
+  --purple-500: oklch(0.627 0.265 303.9);
+  --purple-600: oklch(0.558 0.288 302.321);
+  --purple-700: oklch(0.496 0.265 301.924);
+  --purple-800: oklch(0.438 0.218 303.724);
+  --purple-900: oklch(0.381 0.176 304.987);
+  --purple-950: oklch(0.291 0.149 302.717);
 
-  --fuchsia-50:  #fdf4ff;
-  --fuchsia-100: #fae8ff;
-  --fuchsia-200: #f5d0fe;
-  --fuchsia-300: #f0abfc;
-  --fuchsia-400: #e879f9;
-  --fuchsia-500: #d946ef;
-  --fuchsia-600: #c026d3;
-  --fuchsia-700: #a21caf;
-  --fuchsia-800: #86198f;
-  --fuchsia-900: #701a75;
-  --fuchsia-950: #4a044e;
+  --fuchsia-50: oklch(0.977 0.017 320.058);
+  --fuchsia-100: oklch(0.952 0.037 318.852);
+  --fuchsia-200: oklch(0.903 0.076 319.62);
+  --fuchsia-300: oklch(0.833 0.145 321.434);
+  --fuchsia-400: oklch(0.74 0.238 322.16);
+  --fuchsia-500: oklch(0.667 0.295 322.15);
+  --fuchsia-600: oklch(0.591 0.293 322.896);
+  --fuchsia-700: oklch(0.518 0.253 323.949);
+  --fuchsia-800: oklch(0.452 0.211 324.591);
+  --fuchsia-900: oklch(0.401 0.17 325.612);
+  --fuchsia-950: oklch(0.293 0.136 325.661);
 
-  --pink-50:  #fdf2f8;
-  --pink-100: #fce7f3;
-  --pink-200: #fbcfe8;
-  --pink-300: #f9a8d4;
-  --pink-400: #f472b6;
-  --pink-500: #ec4899;
-  --pink-600: #db2777;
-  --pink-700: #be185d;
-  --pink-800: #9d174d;
-  --pink-900: #831843;
-  --pink-950: #500724;
+  --pink-50: oklch(0.971 0.014 343.198);
+  --pink-100: oklch(0.948 0.028 342.258);
+  --pink-200: oklch(0.899 0.061 343.231);
+  --pink-300: oklch(0.823 0.12 346.018);
+  --pink-400: oklch(0.718 0.202 349.761);
+  --pink-500: oklch(0.656 0.241 354.308);
+  --pink-600: oklch(0.592 0.249 0.584);
+  --pink-700: oklch(0.525 0.223 3.958);
+  --pink-800: oklch(0.459 0.187 3.815);
+  --pink-900: oklch(0.408 0.153 2.432);
+  --pink-950: oklch(0.284 0.109 3.907);
 
-  --rose-50:  #fff1f2;
-  --rose-100: #ffe4e6;
-  --rose-200: #fecdd3;
-  --rose-300: #fda4af;
-  --rose-400: #fb7185;
-  --rose-500: #f43f5e;
-  --rose-600: #e11d48;
-  --rose-700: #be123c;
-  --rose-800: #9f1239;
-  --rose-900: #881337;
-  --rose-950: #4c0519;
+  --rose-50: oklch(0.969 0.015 12.422);
+  --rose-100: oklch(0.941 0.03 12.58);
+  --rose-200: oklch(0.892 0.058 10.001);
+  --rose-300: oklch(0.81 0.117 11.638);
+  --rose-400: oklch(0.712 0.194 13.428);
+  --rose-500: oklch(0.645 0.246 16.439);
+  --rose-600: oklch(0.586 0.253 17.585);
+  --rose-700: oklch(0.514 0.222 16.935);
+  --rose-800: oklch(0.455 0.188 13.697);
+  --rose-900: oklch(0.41 0.159 10.272);
+  --rose-950: oklch(0.271 0.105 12.094);
 }

data/app/assets/stylesheets/typography.css

@@ -18,10 +18,17 @@
   --text-8xl:  6rem;     /* 96px */
   --text-9xl:  8rem;     /* 128px */
 
-  --text-sm-responsive:   clamp(0.875rem, 2cqi, 1rem);
-  --text-base-responsive: clamp(1rem, 2.5cqi, 1.5rem);
-  --text-lg-responsive:   clamp(1.25rem, 4cqi, 1.875rem);
-  --text-xl-responsive:   clamp(1.875rem, 5cqi, 3rem);
+  --text-xs-responsive:   clamp(0.75rem, 0.64rem + 0.57vw, 1rem);        /* 12px..16px */
+  --text-sm-responsive:   clamp(0.875rem, 0.761rem + 0.568vw, 1.125rem); /* 14px..18px */
+  --text-base-responsive: clamp(1rem, 0.89rem + 0.57vw, 1.25rem);        /* 16px..20px */
+  --text-lg-responsive:   clamp(1.125rem, 0.955rem + 0.852vw, 1.5rem);   /* 18px..24px */
+  --text-xl-responsive:   clamp(1.25rem, 0.966rem + 1.42vw, 1.875rem);   /* 20px..30px */
+  --text-2xl-responsive:  clamp(1.5rem, 1.16rem + 1.7vw, 2.25rem);       /* 24px..36px */
+  --text-3xl-responsive:  clamp(1.875rem, 1.364rem + 2.557vw, 3rem);     /* 30px..48px */
+  --text-4xl-responsive:  clamp(2.25rem, 1.57rem + 3.41vw, 3.75rem);     /* 36px..60px */
+  --text-5xl-responsive:  clamp(3rem, 2.32rem + 3.41vw, 4.5rem);         /* 48px..72px */
+  --text-6xl-responsive:  clamp(3.75rem, 2.73rem + 5.11vw, 6rem);        /* 60px..96px */
+  --text-7xl-responsive:  clamp(4.5rem, 2.91rem + 7.95vw, 8rem);         /* 72px..128px */
 
   /****************************************************************
   * Font Weight

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.74"
+  VERSION = "0.0.76"
 end

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css

@@ -1,7 +1,6 @@
 :where(.accordion) {
   details {
     border-block-end-width: var(--border);
-    interpolate-size: allow-keywords;
     overflow: hidden;
 
     &::details-content {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/autoanimate.css

@@ -4,12 +4,12 @@
 
 ::view-transition-old(.auto-animation):only-child {
   animation: var(--animate-fade-out) forwards;
-  animation-duration: var(--time-300);
+  animation-duration: var(--time-200);
   opacity: 1;
 }
 
 ::view-transition-new(.auto-animation):only-child {
   animation: var(--animate-fade-in) forwards;
-  animation-duration: var(--time-300);
+  animation-duration: var(--time-200);
   opacity: 0;
 }

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css

@@ -1,8 +1,6 @@
-:root {
+.btn {
   --btn-background: var(--color-bg);
-}
 
-.btn {
   align-items: center;
   background-color: var(--btn-background);
   border-radius: var(--btn-radius, var(--rounded-md));

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/flash.css

@@ -6,6 +6,7 @@
   border-radius: var(--rounded-full);
   color: var(--color-text-reversed);
   display: flex;
+  font-size: var(--text-base-responsive);
   gap: var(--size-2);
   justify-content: center;
   line-height: var(--leading-none);
@@ -18,14 +19,6 @@
   [data-turbo-preview] & {
     display: none;
   }
-
-  @media (width >= 40rem) {
-    font-size: var(--text-lg);
-  }
-
-  @media (width >= 64rem) {
-    font-size: var(--text-xl);
-  }
 }
 
 .flash--extended {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -27,7 +27,6 @@
 
   &::file-selector-button {
     font-weight: var(--font-medium);
-    margin-inline-end: var(--size-2);
   }
 
   &:user-invalid {

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css

@@ -66,7 +66,7 @@ trix-editor {
   padding-block: var(--size-6) var(--size-2);
 
   &:empty:not(:focus)::before {
-    color: color-mix(in oklch, currentColor 50%, transparent);
+    color: color-mix(in oklab, currentColor 50%, transparent);
   }
 
   [data-trix-mutable].attachment img,

data/lib/generators/css_zero/add/templates/app/javascript/controllers/check_all_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
   }
 
   get #indeterminate() {
-    return this.#atLeastOneChecked && !this.#allChecked;
+    return this.#atLeastOneChecked && !this.#allChecked
   }
 
   get #atLeastOneChecked() {

data/lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js

@@ -15,12 +15,12 @@ export default class extends Controller {
   reset() {
     this.zoomedImageTarget.src = ""
     this.downloadTarget.href = ""
-    this.shareTarget.dataset.webShareFileValue = "";
+    this.shareTarget.dataset.webShareFileValue = ""
   }
 
   #set(target) {
     this.zoomedImageTarget.src = target.href
-    this.downloadTarget.href = target.dataset.lightboxUrlValue;
-    this.shareTarget.dataset.webShareFileValue = target.dataset.lightboxUrlValue;
+    this.downloadTarget.href = target.dataset.lightboxUrlValue
+    this.shareTarget.dataset.webShareFileValue = target.dataset.lightboxUrlValue
   }
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/otp_input_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   initialize() {

data/lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
     const selectedFile = this.inputTarget.files[0]
 
     if (selectedFile) {
-      this.imageTarget.src = URL.createObjectURL(selectedFile);
+      this.imageTarget.src = URL.createObjectURL(selectedFile)
       this.imageTarget.onload = () => { URL.revokeObjectURL(this.imageTarget.src) }
       this.removeInputTarget.value = false
     }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js

@@ -13,7 +13,7 @@ export default class extends Controller {
     try {
       await navigator.share(await this.#getShareData())
     } catch(error) {
-      console.warn(error.message);
+      console.warn(error.message)
     }
   }
 
@@ -28,7 +28,7 @@ export default class extends Controller {
       data.files = [ await this.#getFileObject()]
     }
 
-    return data;
+    return data
   }
 
   async #getFileObject() {

data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css

@@ -30,13 +30,13 @@
     --color-text: white;
     --color-text-reversed: black;
     --color-text-subtle: var(--zinc-400);
-    --color-link: var(--sky-400);
-    --color-border-light: var(--zinc-800);
+    --color-link: var(--blue-400);
+    --color-border-light: var(--zinc-900);
     --color-border: var(--zinc-800);
     --color-border-dark: var(--zinc-600);
     --color-selected: var(--blue-950);
     --color-selected-dark: var(--blue-800);
-    --color-highlight: var(--yellow-800);
+    --color-highlight: var(--yellow-900);
 
     /* Accent colors */
     --color-primary: var(--zinc-50);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.74
+  version: 0.0.76
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-14 00:00:00.000000000 Z
+date: 2024-12-21 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com