@seed-design/css 0.0.4 → 0.0.6

package/recipes/reaction-button.css

@@ -1,4 +1,4 @@
-.seed-reaction-button__root {
+.seed-reaction-button {
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -12,10 +12,10 @@
     flex-shrink: 0;
     font-family: inherit;
 }
-.seed-reaction-button__root:is(:focus, [data-focus]) {
+.seed-reaction-button:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-reaction-button__root {
+.seed-reaction-button {
     transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
     background: var(--seed-color-bg-neutral-weak);
     font-weight: var(--seed-font-weight-medium);
@@ -26,20 +26,20 @@
     --seed-count-font-weight: var(--seed-font-weight-bold);
     --seed-count-color: var(--seed-color-fg-neutral);
 }
-.seed-reaction-button__root:is(:active, [data-active]) {
+.seed-reaction-button:is(:active, [data-active]) {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-reaction-button__root:is([aria-pressed=true], [data-pressed]) {
+.seed-reaction-button:is([aria-pressed=true], [data-pressed]) {
     background: var(--seed-color-bg-layer-default);
     color: var(--seed-color-fg-brand);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
     --seed-prefix-icon-color: var(--seed-color-fg-brand);
     --seed-count-color: var(--seed-color-fg-brand);
 }
-.seed-reaction-button__root:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+.seed-reaction-button:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
     background: var(--seed-color-bg-layer-default-pressed);
 }
-.seed-reaction-button__root:is(:disabled, [disabled], [data-disabled]) {
+.seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
     background: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
@@ -47,40 +47,40 @@
     --seed-prefix-icon-color: var(--seed-color-fg-disabled);
     --seed-count-color: var(--seed-color-fg-disabled);
 }
-.seed-reaction-button__root[data-loading] {
+.seed-reaction-button[data-loading] {
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
-.seed-reaction-button__root:is([aria-pressed=true], [data-pressed])[data-loading] {
+.seed-reaction-button:is([aria-pressed=true], [data-pressed])[data-loading] {
     background: var(--seed-color-bg-layer-default-pressed);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-fg-brand);
 }
-.seed-reaction-button__root--size_xsmall {
+.seed-reaction-button--size_xsmall {
     height: var(--seed-dimension-x8);
-    border-radius: var(--seed-radius-full);
-    gap: var(--seed-dimension-x1);
     padding-inline: var(--seed-dimension-x3);
     padding-block: var(--seed-dimension-x1_5);
+    gap: var(--seed-dimension-x1);
+    border-radius: var(--seed-radius-full);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     --size: 14px;
     --thickness: 2px;
-    --seed-prefix-icon-size: 18px;
     --seed-count-font-size: var(--seed-font-size-t3);
     --seed-count-line-height: var(--seed-line-height-t3);
+    --seed-prefix-icon-size: 18px;
 }
-.seed-reaction-button__root--size_small {
+.seed-reaction-button--size_small {
     height: var(--seed-dimension-x9);
-    border-radius: var(--seed-radius-full);
-    gap: var(--seed-dimension-x1);
     padding-inline: var(--seed-dimension-x3_5);
     padding-block: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x1);
+    border-radius: var(--seed-radius-full);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     --size: 14px;
     --thickness: 2px;
-    --seed-prefix-icon-size: 18px;
     --seed-count-font-size: var(--seed-font-size-t3);
     --seed-count-line-height: var(--seed-line-height-t3);
+    --seed-prefix-icon-size: 18px;
 }

package/recipes/reaction-button.d.ts

@@ -11,13 +11,11 @@ declare type ReactionButtonVariantMap = {
 
 export declare type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
 
-export declare type ReactionButtonSlotName = "root";
-
 export declare const reactionButtonVariantMap: ReactionButtonVariantMap;
 
 export declare const reactionButton: ((
   props?: ReactionButtonVariantProps,
-) => Record<ReactionButtonSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends ReactionButtonVariantProps>(
     props: T,
   ) => [ReactionButtonVariantProps, Omit<T, keyof ReactionButtonVariantProps>];

package/recipes/reaction-button.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const reactionButtonSlotNames = [
-  [
-    "root",
-    "seed-reaction-button__root"
-  ]
-];
-
 const defaultVariant = {
   "size": "small"
 };
@@ -23,13 +16,10 @@ export const reactionButtonVariantMap = {
 export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
 
 export function reactionButton(props) {
-  return Object.fromEntries(
-    reactionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-reaction-button",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/select-box-group.css

@@ -1,4 +1,4 @@
-.seed-select-box-group__root {
+.seed-select-box-group {
     display: flex;
     flex-direction: column;
     width: 100%

package/recipes/select-box-group.d.ts

@@ -8,13 +8,11 @@ declare type SelectBoxGroupVariantMap = {
 
 export declare type SelectBoxGroupVariantProps = Partial<SelectBoxGroupVariant>;
 
-export declare type SelectBoxGroupSlotName = "root";
-
 export declare const selectBoxGroupVariantMap: SelectBoxGroupVariantMap;
 
 export declare const selectBoxGroup: ((
   props?: SelectBoxGroupVariantProps,
-) => Record<SelectBoxGroupSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends SelectBoxGroupVariantProps>(
     props: T,
   ) => [SelectBoxGroupVariantProps, Omit<T, keyof SelectBoxGroupVariantProps>];

package/recipes/select-box-group.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const selectBoxGroupSlotNames = [
-  [
-    "root",
-    "seed-select-box-group__root"
-  ]
-];
-
 const defaultVariant = {};
 
 const compoundVariants = [];
@@ -16,13 +9,10 @@ export const selectBoxGroupVariantMap = {};
 export const selectBoxGroupVariantKeys = Object.keys(selectBoxGroupVariantMap);
 
 export function selectBoxGroup(props) {
-  return Object.fromEntries(
-    selectBoxGroupSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-select-box-group",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/skeleton.css

@@ -1,14 +1,14 @@
-.seed-skeleton__root {
+.seed-skeleton {
     display: inline-block;
     box-sizing: border-box;
     overflow: hidden;
     background: var(--seed-color-palette-gray-200);
     --seed-box-width: initial;
     --seed-box-height: initial;
-    width: --seed-box-width;
-    height: --seed-box-height;
+    width: var(--seed-box-width);
+    height: var(--seed-box-height);
 }
-.seed-skeleton__root::after {
+.seed-skeleton::after {
     content: '';
     display: block;
     width: 100%;
@@ -21,15 +21,15 @@
     animation-timing-function: var(--seed-timing-function-easing);
     animation-iteration-count: infinite;
 }
-.seed-skeleton__root--radius_0 {
+.seed-skeleton--radius_0 {
     border-radius: 0px;
 }
-.seed-skeleton__root--radius_8 {
+.seed-skeleton--radius_8 {
     border-radius: 8px;
 }
-.seed-skeleton__root--radius_16 {
+.seed-skeleton--radius_16 {
     border-radius: 16px;
 }
-.seed-skeleton__root--radius_full {
+.seed-skeleton--radius_full {
     border-radius: var(--seed-radius-full);
 }

package/recipes/skeleton.d.ts

@@ -11,13 +11,11 @@ declare type SkeletonVariantMap = {
 
 export declare type SkeletonVariantProps = Partial<SkeletonVariant>;
 
-export declare type SkeletonSlotName = "root";
-
 export declare const skeletonVariantMap: SkeletonVariantMap;
 
 export declare const skeleton: ((
   props?: SkeletonVariantProps,
-) => Record<SkeletonSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends SkeletonVariantProps>(
     props: T,
   ) => [SkeletonVariantProps, Omit<T, keyof SkeletonVariantProps>];

package/recipes/skeleton.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const skeletonSlotNames = [
-  [
-    "root",
-    "seed-skeleton__root"
-  ]
-];
-
 const defaultVariant = {
   "radius": 8
 };
@@ -25,13 +18,10 @@ export const skeletonVariantMap = {
 export const skeletonVariantKeys = Object.keys(skeletonVariantMap);
 
 export function skeleton(props) {
-  return Object.fromEntries(
-    skeletonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-skeleton",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/snackbar-region.css

@@ -1,4 +1,4 @@
-.seed-snackbar-region__root {
+.seed-snackbar-region {
     z-index: 2147483647;
     display: flex;
     flex-direction: column;

package/recipes/snackbar-region.d.ts

@@ -8,13 +8,11 @@ declare type SnackbarRegionVariantMap = {
 
 export declare type SnackbarRegionVariantProps = Partial<SnackbarRegionVariant>;
 
-export declare type SnackbarRegionSlotName = "root";
-
 export declare const snackbarRegionVariantMap: SnackbarRegionVariantMap;
 
 export declare const snackbarRegion: ((
   props?: SnackbarRegionVariantProps,
-) => Record<SnackbarRegionSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends SnackbarRegionVariantProps>(
     props: T,
   ) => [SnackbarRegionVariantProps, Omit<T, keyof SnackbarRegionVariantProps>];

package/recipes/snackbar-region.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const snackbarRegionSlotNames = [
-  [
-    "root",
-    "seed-snackbar-region__root"
-  ]
-];
-
 const defaultVariant = {};
 
 const compoundVariants = [];
@@ -16,13 +9,10 @@ export const snackbarRegionVariantMap = {};
 export const snackbarRegionVariantKeys = Object.keys(snackbarRegionVariantMap);
 
 export function snackbarRegion(props) {
-  return Object.fromEntries(
-    snackbarRegionSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-snackbar-region",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }
 

package/recipes/text.css

@@ -1,4 +1,4 @@
-.seed-text__root {
+.seed-text {
     margin: 0;
     text-align: var(--seed-text-align);
     color: var(--seed-text-color);
@@ -12,117 +12,137 @@
     --seed-text-align: inherit;
     --seed-max-lines: initial
 }
-.seed-text__root--textStyle_screenTitle {
+.seed-text--textStyle_screenTitle {
     --seed-font-size: var(--seed-font-size-t10);
     --seed-line-height: var(--seed-line-height-t10);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_articleBody {
+.seed-text--textStyle_articleBody {
     --seed-font-size: var(--seed-font-size-t5);
     --seed-line-height: var(--seed-line-height-t6);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t1Regular {
+.seed-text--textStyle_t1Regular {
     --seed-font-size: var(--seed-font-size-t1);
     --seed-line-height: var(--seed-line-height-t1);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t1Medium {
+.seed-text--textStyle_t1Medium {
     --seed-font-size: var(--seed-font-size-t1);
     --seed-line-height: var(--seed-line-height-t1);
     --seed-font-weight: var(--seed-font-weight-medium)
 }
-.seed-text__root--textStyle_t1Bold {
+.seed-text--textStyle_t1Bold {
     --seed-font-size: var(--seed-font-size-t1);
     --seed-line-height: var(--seed-line-height-t1);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t2Regular {
+.seed-text--textStyle_t2Regular {
     --seed-font-size: var(--seed-font-size-t2);
     --seed-line-height: var(--seed-line-height-t2);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t2Medium {
+.seed-text--textStyle_t2Medium {
     --seed-font-size: var(--seed-font-size-t2);
     --seed-line-height: var(--seed-line-height-t2);
     --seed-font-weight: var(--seed-font-weight-medium)
 }
-.seed-text__root--textStyle_t2Bold {
+.seed-text--textStyle_t2Bold {
     --seed-font-size: var(--seed-font-size-t2);
     --seed-line-height: var(--seed-line-height-t2);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t3Regular {
+.seed-text--textStyle_t3Regular {
     --seed-font-size: var(--seed-font-size-t3);
     --seed-line-height: var(--seed-line-height-t3);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t3Medium {
+.seed-text--textStyle_t3Medium {
     --seed-font-size: var(--seed-font-size-t3);
     --seed-line-height: var(--seed-line-height-t3);
     --seed-font-weight: var(--seed-font-weight-medium)
 }
-.seed-text__root--textStyle_t3Bold {
+.seed-text--textStyle_t3Bold {
     --seed-font-size: var(--seed-font-size-t3);
     --seed-line-height: var(--seed-line-height-t3);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t4Regular {
+.seed-text--textStyle_t4Regular {
     --seed-font-size: var(--seed-font-size-t4);
     --seed-line-height: var(--seed-line-height-t4);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t4Medium {
+.seed-text--textStyle_t4Medium {
     --seed-font-size: var(--seed-font-size-t4);
     --seed-line-height: var(--seed-line-height-t4);
     --seed-font-weight: var(--seed-font-weight-medium)
 }
-.seed-text__root--textStyle_t4Bold {
+.seed-text--textStyle_t4Bold {
     --seed-font-size: var(--seed-font-size-t4);
     --seed-line-height: var(--seed-line-height-t4);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t5Regular {
+.seed-text--textStyle_t5Regular {
     --seed-font-size: var(--seed-font-size-t5);
     --seed-line-height: var(--seed-line-height-t5);
     --seed-font-weight: var(--seed-font-weight-regular)
 }
-.seed-text__root--textStyle_t5Medium {
+.seed-text--textStyle_t5Medium {
     --seed-font-size: var(--seed-font-size-t5);
     --seed-line-height: var(--seed-line-height-t5);
     --seed-font-weight: var(--seed-font-weight-medium)
 }
-.seed-text__root--textStyle_t5Bold {
+.seed-text--textStyle_t5Bold {
     --seed-font-size: var(--seed-font-size-t5);
     --seed-line-height: var(--seed-line-height-t5);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t6Bold {
+.seed-text--textStyle_t6Regular {
+    --seed-font-size: var(--seed-font-size-t6);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-regular)
+}
+.seed-text--textStyle_t6Medium {
+    --seed-font-size: var(--seed-font-size-t6);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-medium)
+}
+.seed-text--textStyle_t6Bold {
     --seed-font-size: var(--seed-font-size-t6);
     --seed-line-height: var(--seed-line-height-t6);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t7Bold {
+.seed-text--textStyle_t7Regular {
+    --seed-font-size: var(--seed-font-size-t7);
+    --seed-line-height: var(--seed-line-height-t7);
+    --seed-font-weight: var(--seed-font-weight-regular)
+}
+.seed-text--textStyle_t7Medium {
+    --seed-font-size: var(--seed-font-size-t7);
+    --seed-line-height: var(--seed-line-height-t7);
+    --seed-font-weight: var(--seed-font-weight-medium)
+}
+.seed-text--textStyle_t7Bold {
     --seed-font-size: var(--seed-font-size-t7);
     --seed-line-height: var(--seed-line-height-t7);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t8Bold {
+.seed-text--textStyle_t8Bold {
     --seed-font-size: var(--seed-font-size-t8);
     --seed-line-height: var(--seed-line-height-t8);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t9Bold {
+.seed-text--textStyle_t9Bold {
     --seed-font-size: var(--seed-font-size-t9);
     --seed-line-height: var(--seed-line-height-t9);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--textStyle_t10Bold {
+.seed-text--textStyle_t10Bold {
     --seed-font-size: var(--seed-font-size-t10);
     --seed-line-height: var(--seed-line-height-t10);
     --seed-font-weight: var(--seed-font-weight-bold)
 }
-.seed-text__root--maxLines_none {
+.seed-text--maxLines_none {
     display: unset;
     overflow: unset;
     min-width: unset;
@@ -130,7 +150,7 @@
     white-space: unset;
     -webkit-line-clamp: unset
 }
-.seed-text__root--maxLines_single {
+.seed-text--maxLines_single {
     display: block;
     overflow: hidden;
     min-width: 0;
@@ -138,7 +158,7 @@
     white-space: nowrap;
     -webkit-line-clamp: var(--seed-max-lines)
 }
-.seed-text__root--maxLines_multi {
+.seed-text--maxLines_multi {
     display: -webkit-box;
     overflow: hidden;
     min-width: 0;

package/recipes/text.d.ts

@@ -2,7 +2,7 @@ declare interface TextVariant {
   /**
   * @default t5Regular
   */
-  textStyle: "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Bold" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold";
+  textStyle: "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Regular" | "t6Medium" | "t6Bold" | "t7Regular" | "t7Medium" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold";
 /**
   * @default none
   */
@@ -15,13 +15,11 @@ declare type TextVariantMap = {
 
 export declare type TextVariantProps = Partial<TextVariant>;
 
-export declare type TextSlotName = "root";
-
 export declare const textVariantMap: TextVariantMap;
 
 export declare const text: ((
   props?: TextVariantProps,
-) => Record<TextSlotName, string>) & {
+) => string) & {
   splitVariantProps: <T extends TextVariantProps>(
     props: T,
   ) => [TextVariantProps, Omit<T, keyof TextVariantProps>];

package/recipes/text.mjs

@@ -1,12 +1,5 @@
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const textSlotNames = [
-  [
-    "root",
-    "seed-text__root"
-  ]
-];
-
 const defaultVariant = {
   "textStyle": "t5Regular",
   "maxLines": "none"
@@ -33,7 +26,11 @@ export const textVariantMap = {
     "t5Regular",
     "t5Medium",
     "t5Bold",
+    "t6Regular",
+    "t6Medium",
     "t6Bold",
+    "t7Regular",
+    "t7Medium",
     "t7Bold",
     "t8Bold",
     "t9Bold",
@@ -49,13 +46,10 @@ export const textVariantMap = {
 export const textVariantKeys = Object.keys(textVariantMap);
 
 export function text(props) {
-  return Object.fromEntries(
-    textSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
+  return createClassName(
+    "seed-text",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
   );
 }