gbs-add-block 2.1.0 → 2.3.0

package/source/beta-components/checkbox/styles.css

@@ -1,213 +1,211 @@
-/*
- * Checkbox and CheckboxGroup styles.
- *
- * The box is the native <input> with `appearance: none`, so it keeps native
- * behavior. Tokens read the shared --gbs-* variables when they are set on an
- * ancestor (set them on :root to theme every component at once). Rules live
- * in the `gbs` layer. Declare where that sits in your global CSS — e.g.
- * `@layer reset, gbs, app, utilities;` — and anything in a later layer,
- * Tailwind utilities included, overrides them.
- */
-
-@layer gbs {
-  .ck-root,
-  .ck-group {
-    --ck-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --ck-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --ck-border: var(--gbs-border-control, light-dark(#a1a1aa, #52525b));
-    --ck-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
-    --ck-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --ck-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
-    --ck-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --ck-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --ck-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --ck-size: 16px;
-    --ck-radius: 4px;
-
-    color-scheme: inherit;
-    font-size: var(--ck-font-size);
-    line-height: 1.4;
-    color: var(--ck-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) :is(.ck-root, .ck-group) {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) :is(.ck-root, .ck-group) {
-    color-scheme: light;
-  }
-
-  :where(.ck-root, .ck-group) *,
-  :where(.ck-root, .ck-group) *::before,
-  :where(.ck-root, .ck-group) *::after {
-    box-sizing: border-box;
-  }
-
-  .ck-root {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    min-width: 0;
-  }
-  .ck-root[data-size="sm"] {
-    --ck-size: 14px;
-    --ck-font-size: 12px;
-  }
-  .ck-root[data-size="lg"] {
-    --ck-size: 20px;
-    --ck-font-size: 14px;
-    --ck-radius: 5px;
-  }
-
-  /* ---------------------------------------------------------------- box */
-
-  .ck-control {
-    position: relative;
-    display: grid;
-    flex: none;
-    width: var(--ck-size);
-    height: var(--ck-size);
-    /* Center the box on the first line of the label. */
-    margin-top: calc((1.4em - var(--ck-size)) / 2);
-  }
-
-  .ck-input {
-    grid-area: 1 / 1;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    appearance: none;
-    border: 1.5px solid var(--ck-border);
-    border-radius: var(--ck-radius);
-    background: var(--ck-input-bg);
-    cursor: pointer;
-    transition:
-      background-color 120ms ease,
-      border-color 120ms ease;
-  }
-  .ck-input:hover:not(:disabled) {
-    border-color: color-mix(in oklab, var(--ck-border), var(--ck-fg) 35%);
-  }
-  .ck-input:focus-visible {
-    outline: 2px solid var(--ck-focus);
-    outline-offset: 2px;
-  }
-  .ck-input:is(:checked, :indeterminate) {
-    border-color: var(--ck-accent);
-    background: var(--ck-accent);
-  }
-  .ck-root[data-invalid] .ck-input:not(:checked, :indeterminate) {
-    border-color: var(--ck-danger);
-  }
-  .ck-input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .ck-icon {
-    grid-area: 1 / 1;
-    width: 100%;
-    height: 100%;
-    fill: none;
-    stroke: var(--ck-accent-fg);
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    pointer-events: none;
-  }
-  .ck-check {
-    stroke-dasharray: 1;
-    stroke-dashoffset: 1;
-    transition: stroke-dashoffset 160ms ease;
-  }
-  .ck-dash {
-    opacity: 0;
-  }
-  .ck-input:checked:not(:indeterminate) + .ck-icon .ck-check {
-    stroke-dashoffset: 0;
-  }
-  .ck-input:indeterminate + .ck-icon .ck-dash {
-    opacity: 1;
-  }
-
-  /* --------------------------------------------------------------- text */
-
-  .ck-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    min-width: 0;
-  }
-  .ck-label {
-    cursor: pointer;
-  }
-  .ck-root[data-disabled] .ck-label {
-    color: var(--ck-muted);
-    cursor: not-allowed;
-  }
-  .ck-label[data-required]::after,
-  .ck-legend[data-required]::after {
-    content: " *";
-    color: var(--ck-danger);
-  }
-  .ck-description {
-    color: var(--ck-muted);
-    font-size: 0.92em;
-  }
-  .ck-error {
-    color: var(--ck-danger);
-    font-size: 0.92em;
-  }
-
-  /* -------------------------------------------------------------- group */
-
-  .ck-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-  .ck-legend {
-    /* A floated legend joins the flex gap like any other child. */
-    float: left;
-    width: 100%;
-    margin-bottom: 2px;
-    padding: 0;
-    font-weight: 500;
-  }
-  .ck-legend + * {
-    clear: both;
-  }
-  .ck-items {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .ck-group[data-orientation="horizontal"] .ck-items {
-    flex-flow: row wrap;
-    gap: 8px 20px;
-  }
-  .ck-group[data-select-all] .ck-items {
-    padding-inline-start: calc(var(--ck-size) + 8px);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .ck-input,
-    .ck-check {
-      transition: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .ck-input:is(:checked, :indeterminate) {
-      background: Highlight;
-      border-color: Highlight;
-    }
-    .ck-icon {
-      stroke: HighlightText;
-    }
-  }
-}
+/*
+ * Checkbox and CheckboxGroup styles.
+ *
+ * The box is the native <input> with `appearance: none`, so it keeps native
+ * behavior. Tokens read the shared --gbs-* variables when they are set on an
+ * ancestor (set them on :root to theme every component at once). Rules are
+ * unlayered: they beat a framework reset on specificity, and lose to anything
+ * you pass through `className`. With Tailwind v4, import this file after the
+ * framework and inside its components layer - see the README.
+ */
+
+.ck-root,
+.ck-group {
+  --ck-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --ck-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --ck-border: var(--gbs-border-control, light-dark(#a1a1aa, #52525b));
+  --ck-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --ck-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --ck-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+  --ck-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --ck-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --ck-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --ck-size: 16px;
+  --ck-radius: 4px;
+
+  color-scheme: inherit;
+  font-size: var(--ck-font-size);
+  line-height: 1.4;
+  color: var(--ck-fg);
+}
+
+:where(.dark, [data-theme="dark"]) :is(.ck-root, .ck-group) {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) :is(.ck-root, .ck-group) {
+  color-scheme: light;
+}
+
+:where(.ck-root, .ck-group) *,
+:where(.ck-root, .ck-group) *::before,
+:where(.ck-root, .ck-group) *::after {
+  box-sizing: border-box;
+}
+
+.ck-root {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+.ck-root[data-size="sm"] {
+  --ck-size: 14px;
+  --ck-font-size: 12px;
+}
+.ck-root[data-size="lg"] {
+  --ck-size: 20px;
+  --ck-font-size: 14px;
+  --ck-radius: 5px;
+}
+
+/* ---------------------------------------------------------------- box */
+
+.ck-control {
+  position: relative;
+  display: grid;
+  flex: none;
+  width: var(--ck-size);
+  height: var(--ck-size);
+  /* Center the box on the first line of the label. */
+  margin-top: calc((1.4em - var(--ck-size)) / 2);
+}
+
+.ck-input {
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  appearance: none;
+  border: 1.5px solid var(--ck-border);
+  border-radius: var(--ck-radius);
+  background: var(--ck-input-bg);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+.ck-input:hover:not(:disabled) {
+  border-color: color-mix(in oklab, var(--ck-border), var(--ck-fg) 35%);
+}
+.ck-input:focus-visible {
+  outline: 2px solid var(--ck-focus);
+  outline-offset: 2px;
+}
+.ck-input:is(:checked, :indeterminate) {
+  border-color: var(--ck-accent);
+  background: var(--ck-accent);
+}
+.ck-root[data-invalid] .ck-input:not(:checked, :indeterminate) {
+  border-color: var(--ck-danger);
+}
+.ck-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ck-icon {
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: var(--ck-accent-fg);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+.ck-check {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transition: stroke-dashoffset 160ms ease;
+}
+.ck-dash {
+  opacity: 0;
+}
+.ck-input:checked:not(:indeterminate) + .ck-icon .ck-check {
+  stroke-dashoffset: 0;
+}
+.ck-input:indeterminate + .ck-icon .ck-dash {
+  opacity: 1;
+}
+
+/* --------------------------------------------------------------- text */
+
+.ck-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.ck-label {
+  cursor: pointer;
+}
+.ck-root[data-disabled] .ck-label {
+  color: var(--ck-muted);
+  cursor: not-allowed;
+}
+.ck-label[data-required]::after,
+.ck-legend[data-required]::after {
+  content: " *";
+  color: var(--ck-danger);
+}
+.ck-description {
+  color: var(--ck-muted);
+  font-size: 0.92em;
+}
+.ck-error {
+  color: var(--ck-danger);
+  font-size: 0.92em;
+}
+
+/* -------------------------------------------------------------- group */
+
+.ck-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.ck-legend {
+  /* A floated legend joins the flex gap like any other child. */
+  float: left;
+  width: 100%;
+  margin-bottom: 2px;
+  padding: 0;
+  font-weight: 500;
+}
+.ck-legend + * {
+  clear: both;
+}
+.ck-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ck-group[data-orientation="horizontal"] .ck-items {
+  flex-flow: row wrap;
+  gap: 8px 20px;
+}
+.ck-group[data-select-all] .ck-items {
+  padding-inline-start: calc(var(--ck-size) + 8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck-input,
+  .ck-check {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ck-input:is(:checked, :indeterminate) {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .ck-icon {
+    stroke: HighlightText;
+  }
+}