@rcarls/rc-webcomponents 0.0.0-next-20260921045401

package/themes/base.css

@@ -0,0 +1,77 @@
+/**
+ * Defines the rc-webcomponents semantic token set. All tokens fall back to
+ * CSS System Colors, so this file is optional. Import it or override these
+ * tokens at the application theme boundary.
+ */
+:root {
+  --rc-surface: Canvas;
+  --rc-field: Field;
+  --rc-button-bg: ButtonFace;
+
+  --rc-field-text: FieldText;
+  --rc-button-text: ButtonText;
+  --rc-highlight-text: HighlightText;
+  --rc-text-disabled: GrayText;
+
+  --rc-highlight: Highlight;
+  --rc-accent: Highlight;
+
+  --rc-border-color: ButtonBorder;
+  --rc-border-width: 1px;
+  --rc-border-style: solid;
+  --rc-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  --rc-font-family: inherit;
+  --rc-font-size: 1em;
+  --rc-font-weight: 400;
+  --rc-line-height: normal;
+
+  --rc-control-block-size: 2.25em;
+  --rc-control-padding-block: 0.25em;
+  --rc-control-padding-inline: 0.5em;
+  --rc-control-gap: 0.25em;
+
+  --rc-item-padding-block: 0.3em;
+  --rc-item-padding-inline: 0.75em;
+  --rc-item-gap: 0.4em;
+
+  --rc-radius-sm: 0.125em;
+  --rc-radius-md: 0.25em;
+  --rc-control-radius: var(--rc-radius-sm);
+
+  --rc-focus-ring: auto;
+  --rc-focus-ring-offset: 0;
+  --rc-disabled-opacity: 0.5;
+  --rc-motion-effects-duration-fast: 80ms;
+  --rc-motion-effects-easing-fast: ease-out;
+  --rc-motion-effects-duration-default: 120ms;
+  --rc-motion-effects-easing-default: ease-out;
+  --rc-motion-effects-duration-slow: 200ms;
+  --rc-motion-effects-easing-slow: ease-out;
+  --rc-motion-spatial-duration-fast: 180ms;
+  --rc-motion-spatial-easing-fast: cubic-bezier(0.2, 0, 0, 1);
+  --rc-motion-spatial-duration-default: 300ms;
+  --rc-motion-spatial-easing-default: cubic-bezier(0.2, 0, 0, 1);
+  --rc-motion-spatial-duration-slow: 450ms;
+  --rc-motion-spatial-easing-slow: cubic-bezier(0.2, 0, 0, 1);
+  /*
+   * Enter/exit easing, not duration: an opening element should decelerate
+   * into place and a closing one should accelerate out, on whichever
+   * duration band the component already uses. Pair -easing-exit with
+   * -duration-fast rather than adding matching exit-duration tokens, so
+   * closing reads as quicker without doubling the token surface.
+   */
+  --rc-motion-spatial-easing-enter: cubic-bezier(0, 0, 0, 1);
+  --rc-motion-spatial-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+  --rc-motion-effects-easing-enter: ease-out;
+  --rc-motion-effects-easing-exit: ease-in;
+  --rc-motion-duration: var(--rc-motion-effects-duration-default);
+
+  --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}