feat(*): add disabled opacity token in calendar

salute-developers · Nov 22, 2024 · f8faf24 · f8faf24
1 parent 291ea03
commit f8faf24
Show file tree

Hide file tree

Showing 21 changed files with 21 additions and 5 deletions.
diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts
@@ -26,6 +26,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts
@@ -143,4 +143,5 @@ export const tokens = {
     calendarOutlineFocusColor: '--plasma-calendar-outline-focus-color',
     calendarContentPrimaryColor: '--plasma-calendar-content-primary-color',
     calendarContentSecondaryColor: '--plasma-calendar-content-secondary-color',
+    calendarDisabledOpacity: '--plasma-calendar-disabled-opacity',
 };
diff --git a/.../plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts b/.../plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts
@@ -56,7 +56,7 @@ export const StyledItem = styled.div<{ offset: number }>`
 
 const disabledItem = () => `
     cursor: not-allowed;
-    opacity: 0.4;
+    opacity: var(${tokens.calendarDisabledOpacity});
 `;
 
 const disabledCurrentItem = () => `

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts
@@ -27,6 +27,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/...ages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts b/...ages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts
@@ -28,6 +28,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts
@@ -27,6 +27,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/...ages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts b/...ages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts
@@ -28,6 +28,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts
@@ -26,6 +26,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-cs/src/components/Calendar/Calendar.stories.tsx b/packages/sdds-cs/src/components/Calendar/Calendar.stories.tsx
@@ -56,7 +56,6 @@ export default meta;
 type CalendarProps = ComponentProps<typeof Calendar>;
 type CalendarBaseProps = ComponentProps<typeof CalendarBase>;
 type CalendarBaseRangeProps = ComponentProps<typeof CalendarBaseRange>;
-const eventColors = ['red', 'green', 'blue', 'purple'];
 const defaultMinDate = new Date(2016, 6, 1);
 const defaultMaxDate = new Date(2030, 11, 24);
 
@@ -67,8 +66,6 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
         year: 2023,
     };
 
-    const colorIndex = Math.floor(Math.random() * eventColors.length);
-
     const events = [...new Array(datesNumber)].map((_, index) => {
         const eventNumber = Math.floor(Math.random() * 3 + 1);
         const day = type === 'days' ? baseDate.day + index : 1;
@@ -82,7 +79,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
         const year = type === 'years' ? baseDate.year + index : baseDate.year;
 
         return [...new Array(eventNumber)].map(() => {
-            return { date: new Date(year, month, day), color: eventColors[colorIndex] };
+            return { date: new Date(year, month, day), color: 'var(--text-warning)' };
         });
     });
 

diff --git a/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: var(--text-accent);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 1;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-accent);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarDoubleTokens.calendarDayOfWeekColor}: var(--text-secondary);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: var(--text-accent);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 1;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts
@@ -26,6 +26,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts
@@ -26,6 +26,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-insol/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-insol/src/components/Calendar/CalendarBase.config.ts
@@ -24,6 +24,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent);
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts
@@ -25,6 +25,7 @@ export const config = {
                 ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
                 ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor};
                 ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
+                ${calendarBaseTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarBaseTokens.iconButtonColor}: var(--text-primary);
                 ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);

diff --git a/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts
@@ -26,6 +26,7 @@ export const config = {
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor};
                 ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
+                ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4;
 
                 ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
                 ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);