@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/surface/card/index.d.ts

@@ -0,0 +1,195 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const card: {
+    classnames: {
+        card: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            backgroundColor: {
+                values: {
+                    overlay: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    background: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    brand: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    disabled: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    error: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "error-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    hover: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    info: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "info-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    invert: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-disabled": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-secondary": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    press: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    primary: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    secondary: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    success: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "success-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    warning: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-hover": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-press": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-subdued": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    transparent: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    transparent: string;
+                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "backgroundColor";
+            };
+        };
+    }]>;
+};
+
+export { card };

package/dist/packages/surface/card/index.js

@@ -0,0 +1 @@
+import{cardSprinkle as r,cardStyles as s}from"./rarui-card.css.js";var a={classnames:s,sprinkle:r};export{a as card};

package/dist/packages/surface/card/rarui-card.css

@@ -0,0 +1,422 @@
+.rarui-card__2r8l1h0 {
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  border-width: var(--rarui-shape-border-width-1);
+  border-radius: var(--rarui-shape-border-radius-xs);
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-border-subdued);
+  gap: var(--rarui-spacing-3xs);
+  color: var(--rarui-colors-content-primary);
+  font-family: var(--rarui-fontFamily-body);
+}
+.rarui-card_padding_base__2r8l1h1 {
+  padding: var(--rarui-spacing-s);
+}
+.rarui-card_padding_none__2r8l1h2 {
+  padding: 0;
+}
+@media screen and (min-width: 0px) {
+  .rarui-card_backgroundColor-transparent-xs__2r8l1h3 {
+    background-color: transparent;
+  }
+  .rarui-card_backgroundColor-background-xs__2r8l1h7 {
+    background-color: var(--rarui-colors-surface-background);
+  }
+  .rarui-card_backgroundColor-brand-xs__2r8l1hb {
+    background-color: var(--rarui-colors-surface-brand);
+  }
+  .rarui-card_backgroundColor-brand-hover-xs__2r8l1hf {
+    background-color: var(--rarui-colors-surface-brand-hover);
+  }
+  .rarui-card_backgroundColor-brand-press-xs__2r8l1hj {
+    background-color: var(--rarui-colors-surface-brand-press);
+  }
+  .rarui-card_backgroundColor-brand-subdued-xs__2r8l1hn {
+    background-color: var(--rarui-colors-surface-brand-subdued);
+  }
+  .rarui-card_backgroundColor-disabled-xs__2r8l1hr {
+    background-color: var(--rarui-colors-surface-disabled);
+  }
+  .rarui-card_backgroundColor-error-xs__2r8l1hv {
+    background-color: var(--rarui-colors-surface-error);
+  }
+  .rarui-card_backgroundColor-error-hover-xs__2r8l1hz {
+    background-color: var(--rarui-colors-surface-error-hover);
+  }
+  .rarui-card_backgroundColor-error-press-xs__2r8l1h13 {
+    background-color: var(--rarui-colors-surface-error-press);
+  }
+  .rarui-card_backgroundColor-error-subdued-xs__2r8l1h17 {
+    background-color: var(--rarui-colors-surface-error-subdued);
+  }
+  .rarui-card_backgroundColor-hover-xs__2r8l1h1b {
+    background-color: var(--rarui-colors-surface-hover);
+  }
+  .rarui-card_backgroundColor-info-xs__2r8l1h1f {
+    background-color: var(--rarui-colors-surface-info);
+  }
+  .rarui-card_backgroundColor-info-hover-xs__2r8l1h1j {
+    background-color: var(--rarui-colors-surface-info-hover);
+  }
+  .rarui-card_backgroundColor-info-press-xs__2r8l1h1n {
+    background-color: var(--rarui-colors-surface-info-press);
+  }
+  .rarui-card_backgroundColor-info-subdued-xs__2r8l1h1r {
+    background-color: var(--rarui-colors-surface-info-subdued);
+  }
+  .rarui-card_backgroundColor-invert-xs__2r8l1h1v {
+    background-color: var(--rarui-colors-surface-invert);
+  }
+  .rarui-card_backgroundColor-invert-disabled-xs__2r8l1h1z {
+    background-color: var(--rarui-colors-surface-invert-disabled);
+  }
+  .rarui-card_backgroundColor-invert-hover-xs__2r8l1h23 {
+    background-color: var(--rarui-colors-surface-invert-hover);
+  }
+  .rarui-card_backgroundColor-invert-press-xs__2r8l1h27 {
+    background-color: var(--rarui-colors-surface-invert-press);
+  }
+  .rarui-card_backgroundColor-invert-secondary-xs__2r8l1h2b {
+    background-color: var(--rarui-colors-surface-invert-secondary);
+  }
+  .rarui-card_backgroundColor-overlay-xs__2r8l1h2f {
+    background-color: var(--rarui-colors-surface-overlay);
+  }
+  .rarui-card_backgroundColor-press-xs__2r8l1h2j {
+    background-color: var(--rarui-colors-surface-press);
+  }
+  .rarui-card_backgroundColor-primary-xs__2r8l1h2n {
+    background-color: var(--rarui-colors-surface-primary);
+  }
+  .rarui-card_backgroundColor-secondary-xs__2r8l1h2r {
+    background-color: var(--rarui-colors-surface-secondary);
+  }
+  .rarui-card_backgroundColor-success-xs__2r8l1h2v {
+    background-color: var(--rarui-colors-surface-success);
+  }
+  .rarui-card_backgroundColor-success-hover-xs__2r8l1h2z {
+    background-color: var(--rarui-colors-surface-success-hover);
+  }
+  .rarui-card_backgroundColor-success-press-xs__2r8l1h33 {
+    background-color: var(--rarui-colors-surface-success-press);
+  }
+  .rarui-card_backgroundColor-success-subdued-xs__2r8l1h37 {
+    background-color: var(--rarui-colors-surface-success-subdued);
+  }
+  .rarui-card_backgroundColor-warning-xs__2r8l1h3b {
+    background-color: var(--rarui-colors-surface-warning);
+  }
+  .rarui-card_backgroundColor-warning-hover-xs__2r8l1h3f {
+    background-color: var(--rarui-colors-surface-warning-hover);
+  }
+  .rarui-card_backgroundColor-warning-press-xs__2r8l1h3j {
+    background-color: var(--rarui-colors-surface-warning-press);
+  }
+  .rarui-card_backgroundColor-warning-subdued-xs__2r8l1h3n {
+    background-color: var(--rarui-colors-surface-warning-subdued);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-card_backgroundColor-transparent-md__2r8l1h4 {
+    background-color: transparent;
+  }
+  .rarui-card_backgroundColor-background-md__2r8l1h8 {
+    background-color: var(--rarui-colors-surface-background);
+  }
+  .rarui-card_backgroundColor-brand-md__2r8l1hc {
+    background-color: var(--rarui-colors-surface-brand);
+  }
+  .rarui-card_backgroundColor-brand-hover-md__2r8l1hg {
+    background-color: var(--rarui-colors-surface-brand-hover);
+  }
+  .rarui-card_backgroundColor-brand-press-md__2r8l1hk {
+    background-color: var(--rarui-colors-surface-brand-press);
+  }
+  .rarui-card_backgroundColor-brand-subdued-md__2r8l1ho {
+    background-color: var(--rarui-colors-surface-brand-subdued);
+  }
+  .rarui-card_backgroundColor-disabled-md__2r8l1hs {
+    background-color: var(--rarui-colors-surface-disabled);
+  }
+  .rarui-card_backgroundColor-error-md__2r8l1hw {
+    background-color: var(--rarui-colors-surface-error);
+  }
+  .rarui-card_backgroundColor-error-hover-md__2r8l1h10 {
+    background-color: var(--rarui-colors-surface-error-hover);
+  }
+  .rarui-card_backgroundColor-error-press-md__2r8l1h14 {
+    background-color: var(--rarui-colors-surface-error-press);
+  }
+  .rarui-card_backgroundColor-error-subdued-md__2r8l1h18 {
+    background-color: var(--rarui-colors-surface-error-subdued);
+  }
+  .rarui-card_backgroundColor-hover-md__2r8l1h1c {
+    background-color: var(--rarui-colors-surface-hover);
+  }
+  .rarui-card_backgroundColor-info-md__2r8l1h1g {
+    background-color: var(--rarui-colors-surface-info);
+  }
+  .rarui-card_backgroundColor-info-hover-md__2r8l1h1k {
+    background-color: var(--rarui-colors-surface-info-hover);
+  }
+  .rarui-card_backgroundColor-info-press-md__2r8l1h1o {
+    background-color: var(--rarui-colors-surface-info-press);
+  }
+  .rarui-card_backgroundColor-info-subdued-md__2r8l1h1s {
+    background-color: var(--rarui-colors-surface-info-subdued);
+  }
+  .rarui-card_backgroundColor-invert-md__2r8l1h1w {
+    background-color: var(--rarui-colors-surface-invert);
+  }
+  .rarui-card_backgroundColor-invert-disabled-md__2r8l1h20 {
+    background-color: var(--rarui-colors-surface-invert-disabled);
+  }
+  .rarui-card_backgroundColor-invert-hover-md__2r8l1h24 {
+    background-color: var(--rarui-colors-surface-invert-hover);
+  }
+  .rarui-card_backgroundColor-invert-press-md__2r8l1h28 {
+    background-color: var(--rarui-colors-surface-invert-press);
+  }
+  .rarui-card_backgroundColor-invert-secondary-md__2r8l1h2c {
+    background-color: var(--rarui-colors-surface-invert-secondary);
+  }
+  .rarui-card_backgroundColor-overlay-md__2r8l1h2g {
+    background-color: var(--rarui-colors-surface-overlay);
+  }
+  .rarui-card_backgroundColor-press-md__2r8l1h2k {
+    background-color: var(--rarui-colors-surface-press);
+  }
+  .rarui-card_backgroundColor-primary-md__2r8l1h2o {
+    background-color: var(--rarui-colors-surface-primary);
+  }
+  .rarui-card_backgroundColor-secondary-md__2r8l1h2s {
+    background-color: var(--rarui-colors-surface-secondary);
+  }
+  .rarui-card_backgroundColor-success-md__2r8l1h2w {
+    background-color: var(--rarui-colors-surface-success);
+  }
+  .rarui-card_backgroundColor-success-hover-md__2r8l1h30 {
+    background-color: var(--rarui-colors-surface-success-hover);
+  }
+  .rarui-card_backgroundColor-success-press-md__2r8l1h34 {
+    background-color: var(--rarui-colors-surface-success-press);
+  }
+  .rarui-card_backgroundColor-success-subdued-md__2r8l1h38 {
+    background-color: var(--rarui-colors-surface-success-subdued);
+  }
+  .rarui-card_backgroundColor-warning-md__2r8l1h3c {
+    background-color: var(--rarui-colors-surface-warning);
+  }
+  .rarui-card_backgroundColor-warning-hover-md__2r8l1h3g {
+    background-color: var(--rarui-colors-surface-warning-hover);
+  }
+  .rarui-card_backgroundColor-warning-press-md__2r8l1h3k {
+    background-color: var(--rarui-colors-surface-warning-press);
+  }
+  .rarui-card_backgroundColor-warning-subdued-md__2r8l1h3o {
+    background-color: var(--rarui-colors-surface-warning-subdued);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-card_backgroundColor-transparent-lg__2r8l1h5 {
+    background-color: transparent;
+  }
+  .rarui-card_backgroundColor-background-lg__2r8l1h9 {
+    background-color: var(--rarui-colors-surface-background);
+  }
+  .rarui-card_backgroundColor-brand-lg__2r8l1hd {
+    background-color: var(--rarui-colors-surface-brand);
+  }
+  .rarui-card_backgroundColor-brand-hover-lg__2r8l1hh {
+    background-color: var(--rarui-colors-surface-brand-hover);
+  }
+  .rarui-card_backgroundColor-brand-press-lg__2r8l1hl {
+    background-color: var(--rarui-colors-surface-brand-press);
+  }
+  .rarui-card_backgroundColor-brand-subdued-lg__2r8l1hp {
+    background-color: var(--rarui-colors-surface-brand-subdued);
+  }
+  .rarui-card_backgroundColor-disabled-lg__2r8l1ht {
+    background-color: var(--rarui-colors-surface-disabled);
+  }
+  .rarui-card_backgroundColor-error-lg__2r8l1hx {
+    background-color: var(--rarui-colors-surface-error);
+  }
+  .rarui-card_backgroundColor-error-hover-lg__2r8l1h11 {
+    background-color: var(--rarui-colors-surface-error-hover);
+  }
+  .rarui-card_backgroundColor-error-press-lg__2r8l1h15 {
+    background-color: var(--rarui-colors-surface-error-press);
+  }
+  .rarui-card_backgroundColor-error-subdued-lg__2r8l1h19 {
+    background-color: var(--rarui-colors-surface-error-subdued);
+  }
+  .rarui-card_backgroundColor-hover-lg__2r8l1h1d {
+    background-color: var(--rarui-colors-surface-hover);
+  }
+  .rarui-card_backgroundColor-info-lg__2r8l1h1h {
+    background-color: var(--rarui-colors-surface-info);
+  }
+  .rarui-card_backgroundColor-info-hover-lg__2r8l1h1l {
+    background-color: var(--rarui-colors-surface-info-hover);
+  }
+  .rarui-card_backgroundColor-info-press-lg__2r8l1h1p {
+    background-color: var(--rarui-colors-surface-info-press);
+  }
+  .rarui-card_backgroundColor-info-subdued-lg__2r8l1h1t {
+    background-color: var(--rarui-colors-surface-info-subdued);
+  }
+  .rarui-card_backgroundColor-invert-lg__2r8l1h1x {
+    background-color: var(--rarui-colors-surface-invert);
+  }
+  .rarui-card_backgroundColor-invert-disabled-lg__2r8l1h21 {
+    background-color: var(--rarui-colors-surface-invert-disabled);
+  }
+  .rarui-card_backgroundColor-invert-hover-lg__2r8l1h25 {
+    background-color: var(--rarui-colors-surface-invert-hover);
+  }
+  .rarui-card_backgroundColor-invert-press-lg__2r8l1h29 {
+    background-color: var(--rarui-colors-surface-invert-press);
+  }
+  .rarui-card_backgroundColor-invert-secondary-lg__2r8l1h2d {
+    background-color: var(--rarui-colors-surface-invert-secondary);
+  }
+  .rarui-card_backgroundColor-overlay-lg__2r8l1h2h {
+    background-color: var(--rarui-colors-surface-overlay);
+  }
+  .rarui-card_backgroundColor-press-lg__2r8l1h2l {
+    background-color: var(--rarui-colors-surface-press);
+  }
+  .rarui-card_backgroundColor-primary-lg__2r8l1h2p {
+    background-color: var(--rarui-colors-surface-primary);
+  }
+  .rarui-card_backgroundColor-secondary-lg__2r8l1h2t {
+    background-color: var(--rarui-colors-surface-secondary);
+  }
+  .rarui-card_backgroundColor-success-lg__2r8l1h2x {
+    background-color: var(--rarui-colors-surface-success);
+  }
+  .rarui-card_backgroundColor-success-hover-lg__2r8l1h31 {
+    background-color: var(--rarui-colors-surface-success-hover);
+  }
+  .rarui-card_backgroundColor-success-press-lg__2r8l1h35 {
+    background-color: var(--rarui-colors-surface-success-press);
+  }
+  .rarui-card_backgroundColor-success-subdued-lg__2r8l1h39 {
+    background-color: var(--rarui-colors-surface-success-subdued);
+  }
+  .rarui-card_backgroundColor-warning-lg__2r8l1h3d {
+    background-color: var(--rarui-colors-surface-warning);
+  }
+  .rarui-card_backgroundColor-warning-hover-lg__2r8l1h3h {
+    background-color: var(--rarui-colors-surface-warning-hover);
+  }
+  .rarui-card_backgroundColor-warning-press-lg__2r8l1h3l {
+    background-color: var(--rarui-colors-surface-warning-press);
+  }
+  .rarui-card_backgroundColor-warning-subdued-lg__2r8l1h3p {
+    background-color: var(--rarui-colors-surface-warning-subdued);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-card_backgroundColor-transparent-xl__2r8l1h6 {
+    background-color: transparent;
+  }
+  .rarui-card_backgroundColor-background-xl__2r8l1ha {
+    background-color: var(--rarui-colors-surface-background);
+  }
+  .rarui-card_backgroundColor-brand-xl__2r8l1he {
+    background-color: var(--rarui-colors-surface-brand);
+  }
+  .rarui-card_backgroundColor-brand-hover-xl__2r8l1hi {
+    background-color: var(--rarui-colors-surface-brand-hover);
+  }
+  .rarui-card_backgroundColor-brand-press-xl__2r8l1hm {
+    background-color: var(--rarui-colors-surface-brand-press);
+  }
+  .rarui-card_backgroundColor-brand-subdued-xl__2r8l1hq {
+    background-color: var(--rarui-colors-surface-brand-subdued);
+  }
+  .rarui-card_backgroundColor-disabled-xl__2r8l1hu {
+    background-color: var(--rarui-colors-surface-disabled);
+  }
+  .rarui-card_backgroundColor-error-xl__2r8l1hy {
+    background-color: var(--rarui-colors-surface-error);
+  }
+  .rarui-card_backgroundColor-error-hover-xl__2r8l1h12 {
+    background-color: var(--rarui-colors-surface-error-hover);
+  }
+  .rarui-card_backgroundColor-error-press-xl__2r8l1h16 {
+    background-color: var(--rarui-colors-surface-error-press);
+  }
+  .rarui-card_backgroundColor-error-subdued-xl__2r8l1h1a {
+    background-color: var(--rarui-colors-surface-error-subdued);
+  }
+  .rarui-card_backgroundColor-hover-xl__2r8l1h1e {
+    background-color: var(--rarui-colors-surface-hover);
+  }
+  .rarui-card_backgroundColor-info-xl__2r8l1h1i {
+    background-color: var(--rarui-colors-surface-info);
+  }
+  .rarui-card_backgroundColor-info-hover-xl__2r8l1h1m {
+    background-color: var(--rarui-colors-surface-info-hover);
+  }
+  .rarui-card_backgroundColor-info-press-xl__2r8l1h1q {
+    background-color: var(--rarui-colors-surface-info-press);
+  }
+  .rarui-card_backgroundColor-info-subdued-xl__2r8l1h1u {
+    background-color: var(--rarui-colors-surface-info-subdued);
+  }
+  .rarui-card_backgroundColor-invert-xl__2r8l1h1y {
+    background-color: var(--rarui-colors-surface-invert);
+  }
+  .rarui-card_backgroundColor-invert-disabled-xl__2r8l1h22 {
+    background-color: var(--rarui-colors-surface-invert-disabled);
+  }
+  .rarui-card_backgroundColor-invert-hover-xl__2r8l1h26 {
+    background-color: var(--rarui-colors-surface-invert-hover);
+  }
+  .rarui-card_backgroundColor-invert-press-xl__2r8l1h2a {
+    background-color: var(--rarui-colors-surface-invert-press);
+  }
+  .rarui-card_backgroundColor-invert-secondary-xl__2r8l1h2e {
+    background-color: var(--rarui-colors-surface-invert-secondary);
+  }
+  .rarui-card_backgroundColor-overlay-xl__2r8l1h2i {
+    background-color: var(--rarui-colors-surface-overlay);
+  }
+  .rarui-card_backgroundColor-press-xl__2r8l1h2m {
+    background-color: var(--rarui-colors-surface-press);
+  }
+  .rarui-card_backgroundColor-primary-xl__2r8l1h2q {
+    background-color: var(--rarui-colors-surface-primary);
+  }
+  .rarui-card_backgroundColor-secondary-xl__2r8l1h2u {
+    background-color: var(--rarui-colors-surface-secondary);
+  }
+  .rarui-card_backgroundColor-success-xl__2r8l1h2y {
+    background-color: var(--rarui-colors-surface-success);
+  }
+  .rarui-card_backgroundColor-success-hover-xl__2r8l1h32 {
+    background-color: var(--rarui-colors-surface-success-hover);
+  }
+  .rarui-card_backgroundColor-success-press-xl__2r8l1h36 {
+    background-color: var(--rarui-colors-surface-success-press);
+  }
+  .rarui-card_backgroundColor-success-subdued-xl__2r8l1h3a {
+    background-color: var(--rarui-colors-surface-success-subdued);
+  }
+  .rarui-card_backgroundColor-warning-xl__2r8l1h3e {
+    background-color: var(--rarui-colors-surface-warning);
+  }
+  .rarui-card_backgroundColor-warning-hover-xl__2r8l1h3i {
+    background-color: var(--rarui-colors-surface-warning-hover);
+  }
+  .rarui-card_backgroundColor-warning-press-xl__2r8l1h3m {
+    background-color: var(--rarui-colors-surface-warning-press);
+  }
+  .rarui-card_backgroundColor-warning-subdued-xl__2r8l1h3q {
+    background-color: var(--rarui-colors-surface-warning-subdued);
+  }
+}

package/dist/packages/surface/card/rarui-card.css.d.ts

@@ -0,0 +1,27 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const cardStyles: {
+    card: RuntimeFn<{
+        /**
+         * Specifies the padding inside the card.
+         * This prop accepts one of the following values: "none" or "base".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+};
+declare const cardBackgroundColorProperties: {
+    transparent: string;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { cardBackgroundColorProperties, cardStyles };