@salutejs/plasma-new-hope 0.80.0-canary.1194.9085423232.0 → 0.81.0-canary.1203.9092095304.0

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx

@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
 const StoryDefault = (props: CheckboxProps) => {
     return (
         <>
+            <Checkbox {...props} />
             <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
             <Checkbox
                 name="item.name"

package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { radioboxTokens } from '../../../../components/Radiobox';
 export var config = {
   defaults: {
     view: 'accent',
@@ -9,27 +10,27 @@ export var config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.5rem;--plasma-radiobox-content-top-offset:0.1rem;--plasma-radiobox-content-left-offset 0.5rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1.375rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.625rem;--plasma-radiobox-content-top-offset:0.25rem;--plasma-radiobox-content-left-offset 0.625rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-accent);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-positive);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-warning);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-negative);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], radioboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Calendar/Calendar.stories.tsx

@@ -79,7 +79,7 @@ const baseEvents = [
 ];
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
         max: new Date(2023, 11, 24),
         isDouble: false,
         isRange: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
 
     const handleOnChange = useCallback((newValue: Date) => {
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryDouble = (args: CalendarDoubleProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const handleOnChange = useCallback((newValue: Date) => {
         setValue(newValue);
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDouble {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryRange {...args} />,
 };
 
 const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryRangeDouble {...args} />,
 };
 
 const StoryWithPopover = (args: CalendarProps) => {
-    const { isDouble, min, max } = args;
+    const { isDouble, min, max, includeEdgeDates } = args;
     const [isOpen, setIsOpen] = useState(false);
     const [textValue, setTextValue] = useState('2023-10-16');
     const [value, setValue] = useState(new Date(textValue));
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
                 disabledList={disabledDays}
                 min={min}
                 max={max}
+                includeEdgeDates={includeEdgeDates}
                 isDouble={isDouble}
                 isRange={false}
                 onChangeValue={handleOnChange}
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
         min: new Date(2023, 9, 1),
         max: new Date(2023, 11, 24),
         isDouble: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryWithPopover {...args} />,
 };

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx

@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
 const StoryDefault = (props: CheckboxProps) => {
     return (
         <>
+            <Checkbox {...props} />
             <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
             <Checkbox
                 name="item.name"

package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { radioboxTokens } from '../../../../components/Radiobox';
 export var config = {
   defaults: {
     view: 'accent',
@@ -9,27 +10,27 @@ export var config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.5rem;--plasma-radiobox-content-top-offset:0.1rem;--plasma-radiobox-content-left-offset 0.5rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1.375rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.625rem;--plasma-radiobox-content-top-offset:0.25rem;--plasma-radiobox-content-left-offset 0.625rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-accent);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-positive);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-warning);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-negative);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], radioboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx

@@ -79,7 +79,7 @@ const baseEvents = [
 ];
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -110,6 +110,7 @@ const StoryDefault = (args: CalendarProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -121,12 +122,13 @@ export const Default: StoryObj<CalendarProps> = {
         max: new Date(2023, 11, 24),
         isDouble: false,
         isRange: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
 
 const StoryBase = (args: CalendarBaseProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
 
     const handleOnChange = useCallback((newValue: Date) => {
@@ -150,6 +152,7 @@ const StoryBase = (args: CalendarBaseProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -168,13 +171,14 @@ export const Base: StoryObj<CalendarBaseProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryBase {...args} />,
 };
 
 const StoryDouble = (args: CalendarDoubleProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const handleOnChange = useCallback((newValue: Date) => {
         setValue(newValue);
@@ -197,6 +201,7 @@ const StoryDouble = (args: CalendarDoubleProps) => {
             disabledList={disabledDays}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -206,12 +211,13 @@ export const Double: StoryObj<CalendarDoubleProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryDouble {...args} />,
 };
 
 const StoryRange = (args: CalendarBaseRangeProps) => {
-    const { min, max, type } = args;
+    const { min, max, type, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -237,6 +243,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             type={type}
             onChangeValue={handleOnChange}
         />
@@ -255,13 +262,14 @@ export const Range: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
         type: 'Days',
     },
     render: (args) => <StoryRange {...args} />,
 };
 
 const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
-    const { min, max } = args;
+    const { min, max, includeEdgeDates } = args;
     const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]);
     const handleOnChange = useCallback((newValue: [Date, Date?]) => {
         onChangeValue(newValue);
@@ -287,6 +295,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => {
             disabledList={disabledList}
             min={min}
             max={max}
+            includeEdgeDates={includeEdgeDates}
             onChangeValue={handleOnChange}
         />
     );
@@ -296,12 +305,13 @@ export const RangeDouble: StoryObj<CalendarBaseRangeProps> = {
     args: {
         min: new Date(2023, 10, 1),
         max: new Date(2023, 11, 24),
+        includeEdgeDates: false,
     },
     render: (args) => <StoryRangeDouble {...args} />,
 };
 
 const StoryWithPopover = (args: CalendarProps) => {
-    const { isDouble, min, max } = args;
+    const { isDouble, min, max, includeEdgeDates } = args;
     const [isOpen, setIsOpen] = useState(false);
     const [textValue, setTextValue] = useState('2023-10-16');
     const [value, setValue] = useState(new Date(textValue));
@@ -340,6 +350,7 @@ const StoryWithPopover = (args: CalendarProps) => {
                 disabledList={disabledDays}
                 min={min}
                 max={max}
+                includeEdgeDates={includeEdgeDates}
                 isDouble={isDouble}
                 isRange={false}
                 onChangeValue={handleOnChange}
@@ -353,6 +364,7 @@ export const WithPopover: StoryObj<CalendarProps> = {
         min: new Date(2023, 9, 1),
         max: new Date(2023, 11, 24),
         isDouble: false,
+        includeEdgeDates: false,
     },
     render: (args) => <StoryWithPopover {...args} />,
 };