diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index 860caeb23..086e3bc34 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -537,24 +537,24 @@ "$figmaCollectionId": "VariableCollectionId:5039:8491", "$figmaModeId": "5039:0", "$figmaVariableReferences": { - "Action.StepperButton.SM.Width": "0768fb650bb40bd0731b7b5a02a85b27d4b601a9", - "Action.StepperButton.MD.Width": "fe193cb42b71c440788f8797f7f7270dc900517d", - "Action.StepperButton.LG.Width": "9b31db935d476a63ac6141ae173a055a4f8217dc", - "Action.StepperButton.Container.BorderRadius.SM": "8d6fb9681b5493cb391dbee940bc34d6feaa5051", - "Action.StepperButton.Container.BorderRadius.MD": "9c3e1a8db76ee0650aa276d4fefbaaf5888235cf", - "Action.StepperButton.Container.BorderRadius.LG": "86a55e3ffd28f0f076ad38b7f34eed9101c6c0b1", - "Action.StepperCombo.SM.Vertical.Width": "1eff8a3f8ff985a0f98328fd231ff0bba33582dd", - "Action.StepperCombo.SM.Horizontal.Width": "f96fcb329c2b1840f9598868d280b1e504a0885c", - "Action.StepperCombo.MD.Vertical.Width": "a25b9460fc82b0501dc3b8b42f036477c5c03f58", - "Action.StepperCombo.MD.Horizontal.Width": "8606f84cf303c58d406f7fa46aff0189d455c840", - "Action.StepperCombo.LG.Vertical.Width": "b4d63ffae2eb2281e5d37ff54b5a10bd79e56394", - "Action.StepperCombo.LG.Horizontal.Width": "52d0c26df0f182e6137819ea16f1f4b700797de3", - "Action.Menu.MenuItem.Container.ItemSpacing": "4c15d35abad521d41e908b754dff07ce24c63860", - "Action.Menu.MenuItem.ContentStack.ItemSpacing": "333eea56c19cd22631f220ea5c56d59190823be7", - "Action.Menu.MenuItem.BorderRadius": "7850e05ef40efcd31fea570969e0286a4d389418", - "Action.Menu.SectionStack.ItemSpacing": "8384d5773aa4dcb65f8eddb381ca8d02e7da61fb", - "Action.Menu.SectionStack.Padding": "b6531e155c952c1b91cafb545cb54986064154e4", - "Action.Menu.BorderRadius": "a1e7e791ee2e93b8e2335c358accd51f3f3d6ae5", + "Actions.StepperButton.Container.Width.SM": "0768fb650bb40bd0731b7b5a02a85b27d4b601a9", + "Actions.StepperButton.Container.Width.MD": "fe193cb42b71c440788f8797f7f7270dc900517d", + "Actions.StepperButton.Container.Width.LG": "9b31db935d476a63ac6141ae173a055a4f8217dc", + "Actions.StepperButton.Container.BorderRadius.SM": "8d6fb9681b5493cb391dbee940bc34d6feaa5051", + "Actions.StepperButton.Container.BorderRadius.MD": "9c3e1a8db76ee0650aa276d4fefbaaf5888235cf", + "Actions.StepperButton.Container.BorderRadius.LG": "86a55e3ffd28f0f076ad38b7f34eed9101c6c0b1", + "Actions.StepperCombo.Container.Width.Vertical.SM": "1eff8a3f8ff985a0f98328fd231ff0bba33582dd", + "Actions.StepperCombo.Container.Width.Vertical.MD": "a25b9460fc82b0501dc3b8b42f036477c5c03f58", + "Actions.StepperCombo.Container.Width.Vertical.LG": "b4d63ffae2eb2281e5d37ff54b5a10bd79e56394", + "Actions.StepperCombo.Container.Width.Horizontal.SM": "f96fcb329c2b1840f9598868d280b1e504a0885c", + "Actions.StepperCombo.Container.Width.Horizontal.MD": "8606f84cf303c58d406f7fa46aff0189d455c840", + "Actions.StepperCombo.Container.Width.Horizontal.LG": "52d0c26df0f182e6137819ea16f1f4b700797de3", + "Actions.StepperCombo.DividerWrapper.Padding_V.SM": "1f46a1d8f955d835fa5f80683d0c1706cd47201d", + "Actions.StepperCombo.DividerWrapper.Padding_V.MD": "55af1e42e7f9f143bf993733f90b6a3e9ffdf9fd", + "Actions.StepperCombo.DividerWrapper.Padding_V.LG": "3837d690f9d2e41e3b4d3d942dff844047c701c8", + "Actions.StepperCombo.DividerWrapper.Padding_H.SM": "50ea8cfccbb20b1a8dea6c83394b2d208f7f625f", + "Actions.StepperCombo.DividerWrapper.Padding_H.MD": "4a9b14f0b1978078821993fcfbc0e9f7004137de", + "Actions.StepperCombo.DividerWrapper.Padding_H.LG": "514da0b26ff23c44f58ac733b14f75244af6e931", "Actions.TextButton.Container.PaddingTopBottom.XS": "7b49d86b8b60a319c8297b18be8820f4d272d43d", "Actions.TextButton.Container.PaddingTopBottom.SM": "bd581b07ca99f0c83d524e933c1a7c0e21ae0fdd", "Actions.TextButton.Container.PaddingTopBottom.MD": "3e5d7399cab81dc62f4c1a3be7c90b8aebae4bbb", @@ -650,6 +650,12 @@ "Actions.IconDropdown.Container.BorderRadius.MD": "bf8d742931da6202a7c8fef4e32a5a9b93fff40c", "Actions.IconDropdown.Container.BorderRadius.LG": "a23080c8142035e4aa41610013dceff2b787d1dd", "Actions.IconDropdown.Container.BorderRadius.XL": "a5aac058109e8e610a5c9c5f6b872ed0e5217286", + "Action.Menu.MenuItem.Container.ItemSpacing": "4c15d35abad521d41e908b754dff07ce24c63860", + "Action.Menu.MenuItem.ContentStack.ItemSpacing": "333eea56c19cd22631f220ea5c56d59190823be7", + "Action.Menu.MenuItem.BorderRadius": "7850e05ef40efcd31fea570969e0286a4d389418", + "Action.Menu.SectionStack.ItemSpacing": "8384d5773aa4dcb65f8eddb381ca8d02e7da61fb", + "Action.Menu.SectionStack.Padding": "b6531e155c952c1b91cafb545cb54986064154e4", + "Action.Menu.BorderRadius": "a1e7e791ee2e93b8e2335c358accd51f3f3d6ae5", "Feedback.Loader.Container.Size.SM": "c2b2e482c9243ab3c9390bb5690a7033650ee215", "Feedback.Loader.Container.Size.MD": "16ac0162332b87127fb76980315bec8e98a4907c", "Feedback.Loader.Container.Size.LG": "41d16e0dedd196093283d8eeaf0a85e4f1ab6cfa", @@ -1081,6 +1087,9 @@ "Navigation.TabBar.ButtonWrapper.InnerPadding.SM": "b48c00747c5756df28c3e4e90efae5568e023f5e", "Navigation.TabBar.ButtonWrapper.InnerPadding.MD": "2a847be484c780391e72bea86c070dccc30c1926", "Navigation.TabBar.ButtonWrapper.InnerPadding.LG": "f8b9aff60ec41648f6e837b71cca0d26f8f8b811", + "Actions.StepperButton.Icon.IconSize.SM": "b331f40166d219d7b5477dc340c585b8a25f1ae2", + "Actions.StepperButton.Icon.IconSize.MD": "942fe36b2336c31c887cacd14367c0f895e377e0", + "Actions.StepperButton.Icon.IconSize.LG": "d30b11ecc42b61b7ea1c5dc62e1a0ad0452ccaad", "Action.BorderRadius": "9644fb0b564a7bdd9b72d09b6d1efa4fd593c08b", "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d", "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700", @@ -1331,6 +1340,16 @@ "Navigation.TabBar.Tab.Icon.IconColor.Inactive.Disabled": "2255dfc7d338f82fcc3ecd1331b4c7ebf4f4dba3", "Action.Menu.Surface.Color": "915b1ddec5d8b8e8a32bf5afbd9186e16af5ec54", "Action.Menu.MenuSection.SectionTitle": "9f8a812cd4e37124e365682d18bd0dd37b5ea311", + "Actions.StepperButton.Container.BackgroundColor.Rest": "9bb1d1051e3cbc9ebdc67d0b9360e6f7792e1f57", + "Actions.StepperButton.Container.BackgroundColor.Hover": "2bd7bf012512dd075086a92b685487e3b5c979a4", + "Actions.StepperButton.Container.BackgroundColor.Pressed": "c780bc99e073523ced9259323cb76fc13be5694a", + "Actions.StepperButton.Container.BackgroundColor.Focus": "bc1bfa660e46d6185cdea7463d15ef8460b52821", + "Actions.StepperButton.Container.BackgroundColor.Disabled": "c970143a610dede969a5c2030c67860b3ea2359a", + "Actions.StepperButton.Icon.IconColor.Rest": "880e6a3bd4c57de9f9adb7b845321c18ba1e4ce2", + "Actions.StepperButton.Icon.IconColor.Hover": "f7ded568d3761f6f6211ad671ff96c0e162b1b3c", + "Actions.StepperButton.Icon.IconColor.Pressed": "822dc813e1bd298c9198123bcbb5f91cf219c760", + "Actions.StepperButton.Icon.IconColor.Focus": "0b6017e8dff35d3b91c7bfd36dc29fe99a10a4e2", + "Actions.StepperButton.Icon.IconColor.Disabled": "3099be403a5c426ace1d560feeaaf8934aa3133b", "Action.CTA.SurfaceFill.Rest": "e113217d84d5ed192f2c9401e6881a78bd729419", "Action.CTA.SurfaceFill.Hover": "558ccf9c09e95bb902075239a9bd050b442c5bad", "Action.CTA.SurfaceFill.Pressed": "84fd3776c431823e1eb1fe5ee216df727493dc77", @@ -2235,24 +2254,24 @@ "$figmaCollectionId": "VariableCollectionId:5039:8491", "$figmaModeId": "5039:1", "$figmaVariableReferences": { - "Action.StepperButton.SM.Width": "0768fb650bb40bd0731b7b5a02a85b27d4b601a9", - "Action.StepperButton.MD.Width": "fe193cb42b71c440788f8797f7f7270dc900517d", - "Action.StepperButton.LG.Width": "9b31db935d476a63ac6141ae173a055a4f8217dc", - "Action.StepperButton.Container.BorderRadius.SM": "8d6fb9681b5493cb391dbee940bc34d6feaa5051", - "Action.StepperButton.Container.BorderRadius.MD": "9c3e1a8db76ee0650aa276d4fefbaaf5888235cf", - "Action.StepperButton.Container.BorderRadius.LG": "86a55e3ffd28f0f076ad38b7f34eed9101c6c0b1", - "Action.StepperCombo.SM.Vertical.Width": "1eff8a3f8ff985a0f98328fd231ff0bba33582dd", - "Action.StepperCombo.SM.Horizontal.Width": "f96fcb329c2b1840f9598868d280b1e504a0885c", - "Action.StepperCombo.MD.Vertical.Width": "a25b9460fc82b0501dc3b8b42f036477c5c03f58", - "Action.StepperCombo.MD.Horizontal.Width": "8606f84cf303c58d406f7fa46aff0189d455c840", - "Action.StepperCombo.LG.Vertical.Width": "b4d63ffae2eb2281e5d37ff54b5a10bd79e56394", - "Action.StepperCombo.LG.Horizontal.Width": "52d0c26df0f182e6137819ea16f1f4b700797de3", - "Action.Menu.MenuItem.Container.ItemSpacing": "4c15d35abad521d41e908b754dff07ce24c63860", - "Action.Menu.MenuItem.ContentStack.ItemSpacing": "333eea56c19cd22631f220ea5c56d59190823be7", - "Action.Menu.MenuItem.BorderRadius": "7850e05ef40efcd31fea570969e0286a4d389418", - "Action.Menu.SectionStack.ItemSpacing": "8384d5773aa4dcb65f8eddb381ca8d02e7da61fb", - "Action.Menu.SectionStack.Padding": "b6531e155c952c1b91cafb545cb54986064154e4", - "Action.Menu.BorderRadius": "a1e7e791ee2e93b8e2335c358accd51f3f3d6ae5", + "Actions.StepperButton.Container.Width.SM": "0768fb650bb40bd0731b7b5a02a85b27d4b601a9", + "Actions.StepperButton.Container.Width.MD": "fe193cb42b71c440788f8797f7f7270dc900517d", + "Actions.StepperButton.Container.Width.LG": "9b31db935d476a63ac6141ae173a055a4f8217dc", + "Actions.StepperButton.Container.BorderRadius.SM": "8d6fb9681b5493cb391dbee940bc34d6feaa5051", + "Actions.StepperButton.Container.BorderRadius.MD": "9c3e1a8db76ee0650aa276d4fefbaaf5888235cf", + "Actions.StepperButton.Container.BorderRadius.LG": "86a55e3ffd28f0f076ad38b7f34eed9101c6c0b1", + "Actions.StepperCombo.Container.Width.Vertical.SM": "1eff8a3f8ff985a0f98328fd231ff0bba33582dd", + "Actions.StepperCombo.Container.Width.Vertical.MD": "a25b9460fc82b0501dc3b8b42f036477c5c03f58", + "Actions.StepperCombo.Container.Width.Vertical.LG": "b4d63ffae2eb2281e5d37ff54b5a10bd79e56394", + "Actions.StepperCombo.Container.Width.Horizontal.SM": "f96fcb329c2b1840f9598868d280b1e504a0885c", + "Actions.StepperCombo.Container.Width.Horizontal.MD": "8606f84cf303c58d406f7fa46aff0189d455c840", + "Actions.StepperCombo.Container.Width.Horizontal.LG": "52d0c26df0f182e6137819ea16f1f4b700797de3", + "Actions.StepperCombo.DividerWrapper.Padding_V.SM": "1f46a1d8f955d835fa5f80683d0c1706cd47201d", + "Actions.StepperCombo.DividerWrapper.Padding_V.MD": "55af1e42e7f9f143bf993733f90b6a3e9ffdf9fd", + "Actions.StepperCombo.DividerWrapper.Padding_V.LG": "3837d690f9d2e41e3b4d3d942dff844047c701c8", + "Actions.StepperCombo.DividerWrapper.Padding_H.SM": "50ea8cfccbb20b1a8dea6c83394b2d208f7f625f", + "Actions.StepperCombo.DividerWrapper.Padding_H.MD": "4a9b14f0b1978078821993fcfbc0e9f7004137de", + "Actions.StepperCombo.DividerWrapper.Padding_H.LG": "514da0b26ff23c44f58ac733b14f75244af6e931", "Actions.TextButton.Container.PaddingTopBottom.XS": "7b49d86b8b60a319c8297b18be8820f4d272d43d", "Actions.TextButton.Container.PaddingTopBottom.SM": "bd581b07ca99f0c83d524e933c1a7c0e21ae0fdd", "Actions.TextButton.Container.PaddingTopBottom.MD": "3e5d7399cab81dc62f4c1a3be7c90b8aebae4bbb", @@ -2348,6 +2367,12 @@ "Actions.IconDropdown.Container.BorderRadius.MD": "bf8d742931da6202a7c8fef4e32a5a9b93fff40c", "Actions.IconDropdown.Container.BorderRadius.LG": "a23080c8142035e4aa41610013dceff2b787d1dd", "Actions.IconDropdown.Container.BorderRadius.XL": "a5aac058109e8e610a5c9c5f6b872ed0e5217286", + "Action.Menu.MenuItem.Container.ItemSpacing": "4c15d35abad521d41e908b754dff07ce24c63860", + "Action.Menu.MenuItem.ContentStack.ItemSpacing": "333eea56c19cd22631f220ea5c56d59190823be7", + "Action.Menu.MenuItem.BorderRadius": "7850e05ef40efcd31fea570969e0286a4d389418", + "Action.Menu.SectionStack.ItemSpacing": "8384d5773aa4dcb65f8eddb381ca8d02e7da61fb", + "Action.Menu.SectionStack.Padding": "b6531e155c952c1b91cafb545cb54986064154e4", + "Action.Menu.BorderRadius": "a1e7e791ee2e93b8e2335c358accd51f3f3d6ae5", "Feedback.Loader.Container.Size.SM": "c2b2e482c9243ab3c9390bb5690a7033650ee215", "Feedback.Loader.Container.Size.MD": "16ac0162332b87127fb76980315bec8e98a4907c", "Feedback.Loader.Container.Size.LG": "41d16e0dedd196093283d8eeaf0a85e4f1ab6cfa", @@ -2367,7 +2392,7 @@ "Feedback.Counter.Container.PaddingLeftRight.MD": "d7baf44f248a8e792e454cca0eded0b7da6a751d", "Feedback.Counter.Container.PaddingLeftRight.LG": "599eb4964b21547696c83da1da0e100ac4a8d18e", "Feedback.Counter.Container.BorderRadius.SM": "b92726906c5e430f98a1cad2d3d82dfe0aca0dcc", - "Feedback.Counter.Container.BorderRadius.MD": "48e765817d76c8b7edebf4b7358f54917a5c6ed5", + "Feedback.Counter.Container.BorderRadius.MD": "a9d2d119686fc566e959b0477eb57faef937f926", "Feedback.Counter.Container.BorderRadius.LG": "762a14cf88d137f74c22256eec1c608454c0e883", "Feedback.Counter.Container.BorderWidth.SM": "bd162a688380d5634b3f1e1d74e9a2a37ffc656d", "Feedback.Counter.Container.BorderWidth.MD": "c536f378d7447a8f1fa6c25706dfeeb055378b00", @@ -2779,6 +2804,9 @@ "Navigation.TabBar.ButtonWrapper.InnerPadding.SM": "b48c00747c5756df28c3e4e90efae5568e023f5e", "Navigation.TabBar.ButtonWrapper.InnerPadding.MD": "2a847be484c780391e72bea86c070dccc30c1926", "Navigation.TabBar.ButtonWrapper.InnerPadding.LG": "f8b9aff60ec41648f6e837b71cca0d26f8f8b811", + "Actions.StepperButton.Icon.IconSize.SM": "b331f40166d219d7b5477dc340c585b8a25f1ae2", + "Actions.StepperButton.Icon.IconSize.MD": "942fe36b2336c31c887cacd14367c0f895e377e0", + "Actions.StepperButton.Icon.IconSize.LG": "d30b11ecc42b61b7ea1c5dc62e1a0ad0452ccaad", "Action.BorderRadius": "9644fb0b564a7bdd9b72d09b6d1efa4fd593c08b", "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d", "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700", @@ -2998,7 +3026,7 @@ "Forms.CaptionComponent.Text.TextColor.Error": "8aad8f6ace200ea1d5a5381eb3cbe9d4ae007f31", "Forms.CaptionComponent.Icon.IconColor.Hint": "744bc9a56e5ec91960063f0be5bf3bdd33d6d907", "Forms.CaptionComponent.Icon.IconColor.Error": "491aab6aebbe70c4bc77d8181f7775a955338dbe", - "UI.Divider.Container.BackgroundColor": "39bec8c5a9ba906af5f4c5daf5a348ae3618d4da", + "UI.Divider.Container.BackgroundColor": "9562bd237fe0661faef3e3544870a4bf7f4eb7c1", "UI.Blanket.Surface": "1758bac1223c81451082018286cba93e78c0cdda", "Navigation.TabBar.Tab.HighlightLine.BackgroundColor.Active.Rest": "a9f02fe908bb058bce5087f032dabbee7189ec0b", "Navigation.TabBar.Tab.HighlightLine.BackgroundColor.Active.Hover": "66a0d31e617e9857429ae1d3093034423ed68c7d", @@ -3029,6 +3057,16 @@ "Navigation.TabBar.Tab.Icon.IconColor.Inactive.Disabled": "2255dfc7d338f82fcc3ecd1331b4c7ebf4f4dba3", "Action.Menu.Surface.Color": "915b1ddec5d8b8e8a32bf5afbd9186e16af5ec54", "Action.Menu.MenuSection.SectionTitle": "9f8a812cd4e37124e365682d18bd0dd37b5ea311", + "Actions.StepperButton.Container.BackgroundColor.Rest": "9bb1d1051e3cbc9ebdc67d0b9360e6f7792e1f57", + "Actions.StepperButton.Container.BackgroundColor.Hover": "2bd7bf012512dd075086a92b685487e3b5c979a4", + "Actions.StepperButton.Container.BackgroundColor.Pressed": "c780bc99e073523ced9259323cb76fc13be5694a", + "Actions.StepperButton.Container.BackgroundColor.Focus": "bc1bfa660e46d6185cdea7463d15ef8460b52821", + "Actions.StepperButton.Container.BackgroundColor.Disabled": "c970143a610dede969a5c2030c67860b3ea2359a", + "Actions.StepperButton.Icon.IconColor.Rest": "880e6a3bd4c57de9f9adb7b845321c18ba1e4ce2", + "Actions.StepperButton.Icon.IconColor.Hover": "f7ded568d3761f6f6211ad671ff96c0e162b1b3c", + "Actions.StepperButton.Icon.IconColor.Pressed": "822dc813e1bd298c9198123bcbb5f91cf219c760", + "Actions.StepperButton.Icon.IconColor.Focus": "0b6017e8dff35d3b91c7bfd36dc29fe99a10a4e2", + "Actions.StepperButton.Icon.IconColor.Disabled": "3099be403a5c426ace1d560feeaaf8934aa3133b", "Action.CTA.SurfaceFill.Rest": "e113217d84d5ed192f2c9401e6881a78bd729419", "Action.CTA.SurfaceFill.Hover": "558ccf9c09e95bb902075239a9bd050b442c5bad", "Action.CTA.SurfaceFill.Pressed": "84fd3776c431823e1eb1fe5ee216df727493dc77", diff --git a/packages/figma-design-tokens/input/tokens/color/CMP.json b/packages/figma-design-tokens/input/tokens/color/CMP.json index aa83950f2..2098572c3 100644 --- a/packages/figma-design-tokens/input/tokens/color/CMP.json +++ b/packages/figma-design-tokens/input/tokens/color/CMP.json @@ -1187,7 +1187,7 @@ "Divider": { "Container": { "BackgroundColor": { - "value": "{core.color.coolgray.800.opa30}", + "value": "{q.stroke.default}", "type": "color", "description": "Color of the divider\n>>> UI.Divider.Stroke" } @@ -1416,5 +1416,79 @@ } } } + }, + "Actions": { + "StepperButton": { + "Container": { + "BackgroundColor": { + "Rest": { + "value": "{Action.Silent.SurfaceFill.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Action.Silent.SurfaceFill.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Action.Silent.SurfaceFill.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Action.Silent.SurfaceFill.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Action.Silent.SurfaceFill.Focus}", + "type": "color" + } + }, + "BorderColor": { + "Rest": { + "value": "{Action.Silent.SurfaceStroke.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Action.Silent.SurfaceStroke.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Action.Silent.SurfaceStroke.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Action.Silent.SurfaceStroke.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Action.Silent.SurfaceStroke.Focus}", + "type": "color" + } + } + }, + "Icon": { + "IconColor": { + "Rest": { + "value": "{Action.Silent.Icon.Rest}", + "type": "color" + }, + "Hover": { + "value": "{Action.Silent.Icon.Hover}", + "type": "color" + }, + "Pressed": { + "value": "{Action.Silent.Icon.Pressed}", + "type": "color" + }, + "Focus": { + "value": "{Action.Silent.Icon.Focus}", + "type": "color" + }, + "Disabled": { + "value": "{Action.Silent.Icon.Disabled}", + "type": "color" + } + } + } + } } } \ No newline at end of file diff --git a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json index 412970aec..b37106d4f 100644 --- a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json +++ b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json @@ -1,59 +1,58 @@ { - "Action": { + "Actions": { "StepperButton": { - "Border": { - "Rest": { - "value": { - "color": "{Action.Silent.SurfaceStroke.Rest}", - "width": "{core.borderWidth.None}" + "Container": { + "Border": { + "Rest": { + "value": { + "color": "{Actions.StepperButton.Container.BorderColor.Rest}", + "width": "{core.borderWidth.None}" + }, + "type": "border" }, - "type": "border" - }, - "Hover": { - "value": { - "color": "{Action.Silent.SurfaceStroke.Hover}", - "width": "{core.borderWidth.None}" + "Hover": { + "value": { + "color": "{Actions.StepperButton.Container.BorderColor.Hover}", + "width": "{core.borderWidth.None}" + }, + "type": "border" }, - "type": "border" - }, - "Pressed": { - "value": { - "color": "{Action.Silent.SurfaceStroke.Pressed}", - "width": "{core.borderWidth.None}" + "Pressed": { + "value": { + "color": "{Actions.StepperButton.Container.BorderColor.Pressed}", + "width": "{core.borderWidth.None}" + }, + "type": "border" }, - "type": "border" - }, - "Focus": { - "value": "{Global.FocusBorder}", - "type": "border" - }, - "Disabled": { - "value": { - "color": "{Action.Silent.SurfaceStroke.Disabled}", - "width": "{core.borderWidth.None}" + "Focus": { + "value": { + "color": "{Actions.StepperButton.Container.BorderColor.Focus}", + "width": "{core.borderWidth.None}" + }, + "type": "border" }, - "type": "border" - } - }, - "SM": { - "Width": { - "value": "{core.dimensionREM.32}", - "type": "sizing" - } - }, - "MD": { - "Width": { - "value": "{core.dimensionREM.40}", - "type": "sizing" - } - }, - "LG": { + "Disabled": { + "value": { + "color": "{Actions.StepperButton.Container.BorderColor.Disabled}", + "width": "{core.borderWidth.None}" + }, + "type": "border" + } + }, "Width": { - "value": "{core.dimensionREM.48}", - "type": "sizing" - } - }, - "Container": { + "SM": { + "value": "{core.dimensionREM.32}", + "type": "sizing" + }, + "MD": { + "value": "{core.dimensionREM.40}", + "type": "sizing" + }, + "LG": { + "value": "{core.dimensionREM.48}", + "type": "sizing" + } + }, "BorderRadius": { "SM": { "value": "{core.borderRadius.None}", @@ -68,148 +67,124 @@ "type": "borderRadius" } } - } - }, - "StepperCombo": { - "SM": { - "Vertical": { - "Width": { - "value": "{core.dimensionREM.32}", + }, + "Icon": { + "IconSize": { + "SM": { + "value": "{core.dimensionREM.16}", "type": "sizing" }, - "DividerWrapper": { - "Padding": { - "value": "0 {core.dimensionREM.8}", - "type": "spacing" - } - } - }, - "Horizontal": { - "Width": { - "value": "{core.dimensionREM.64}", + "MD": { + "value": "{core.dimensionREM.16}", "type": "sizing" }, - "DividerWrapper": { - "Padding": { - "value": "{core.dimensionREM.8} 0", - "type": "spacing" - } + "LG": { + "value": "{core.dimensionREM.24}", + "type": "sizing" } } - }, - "MD": { - "Vertical": { - "Width": { - "value": "{core.dimensionREM.40}", - "type": "sizing" - }, - "DividerWrapper": { - "Padding": { - "value": "0 {core.dimensionREM.8}", - "type": "spacing" + } + }, + "StepperCombo": { + "Container": { + "Width": { + "Vertical": { + "SM": { + "value": "{core.dimensionREM.32}", + "type": "sizing" + }, + "MD": { + "value": "{core.dimensionREM.40}", + "type": "sizing" + }, + "LG": { + "value": "{core.dimensionREM.48}", + "type": "sizing" } - } - }, - "Horizontal": { - "Width": { - "value": "{core.dimensionREM.80}", - "type": "sizing" }, - "DividerWrapper": { - "Padding": { - "value": "{core.dimensionREM.8} 0", - "type": "spacing" + "Horizontal": { + "SM": { + "value": "{core.dimensionREM.64}", + "type": "sizing" + }, + "MD": { + "value": "{core.dimensionREM.80}", + "type": "sizing" + }, + "LG": { + "value": "{core.dimensionREM.96}", + "type": "sizing" } } } }, - "LG": { - "Vertical": { - "Width": { - "value": "{core.dimensionREM.48}", - "type": "sizing" + "DividerWrapper": { + "Padding_V": { + "SM": { + "value": "{core.dimensionREM.8}", + "type": "spacing", + "description": "apply only on layoutVariant Horizontal" }, - "DividerWrapper": { - "Padding": { - "value": "0 {core.dimensionREM.8}", - "type": "spacing" - } - } - }, - "Horizontal": { - "Width": { - "value": "{core.dimensionREM.96}", - "type": "sizing" + "MD": { + "value": "{core.dimensionREM.8}", + "type": "spacing", + "description": "apply only on layoutVariant Horizontal" }, - "DividerWrapper": { - "Padding": { - "value": "{core.dimensionREM.8} 0", - "type": "spacing" - } - } - } - } - }, - "Menu": { - "MenuItem": { - "Padding": { - "value": "{core.dimensionPX.8} {core.dimensionPX.16}", - "type": "spacing", - "description": "Adds padding to the menu item" - }, - "Container": { - "ItemSpacing": { - "value": "{core.dimensionPX.4}", + "LG": { + "value": "{core.dimensionREM.8}", "type": "spacing", - "description": "Adds space between Icons and ContentStack (Label & Description)" + "description": "apply only on layoutVariant Horizontal" } }, - "ContentStack": { - "ItemSpacing": { - "value": "0", + "Padding_H": { + "SM": { + "value": "{core.dimensionREM.8}", "type": "spacing", - "description": "Adds space between Label & Description" - } - }, - "BorderRadius": { - "value": "{Action.BorderRadius}", - "type": "borderRadius", - "description": "Defines the border radius of a single menu item." - } - }, - "Section": { - "SectionTitleWrapper": { - "Padding": { - "value": "{core.dimensionPX.16} {core.dimensionPX.16} {core.dimensionPX.8} {core.dimensionPX.16}", + "description": "apply only on layoutVariant Vertical" + }, + "MD": { + "value": "{core.dimensionREM.8}", "type": "spacing", - "description": "Defines the padding around the section title text. Apply on SectionTitleWrapper" + "description": "apply only on layoutVariant Vertical" + }, + "LG": { + "value": "{core.dimensionREM.8}", + "type": "spacing", + "description": "apply only on layoutVariant Vertical" } }, - "SectionTitle": { - "value": "{core.typography.sourceSansPro.semibold.75}", - "type": "typography" - } - }, - "SectionStack": { - "ItemSpacing": { - "value": "{core.dimensionPX.12}", - "type": "spacing", - "description": "Defines the space between each menu section" - }, "Padding": { - "value": "{core.dimensionPX.12}", - "type": "spacing", - "description": "Defines the padding around all stacked menu sections." + "VerticalLayout": { + "SM": { + "value": "0 {Actions.StepperCombo.DividerWrapper.Padding_H.SM}", + "type": "spacing" + }, + "MD": { + "value": "0 {Actions.StepperCombo.DividerWrapper.Padding_H.MD}", + "type": "spacing" + }, + "LG": { + "value": "0 {Actions.StepperCombo.DividerWrapper.Padding_H.LG}", + "type": "spacing" + } + }, + "HorizontalLayout": { + "SM": { + "value": "{Actions.StepperCombo.DividerWrapper.Padding_V.SM} 0", + "type": "spacing" + }, + "MD": { + "value": "{Actions.StepperCombo.DividerWrapper.Padding_V.MD} 0", + "type": "spacing" + }, + "LG": { + "value": "{Actions.StepperCombo.DividerWrapper.Padding_V.LG} 0", + "type": "spacing" + } + } } - }, - "BorderRadius": { - "value": "{core.borderRadius.LG}", - "type": "borderRadius", - "description": "Defines the border radius of the whole menu component" } - } - }, - "Actions": { + }, "TextButton": { "Container": { "PaddingTopBottom": { @@ -776,6 +751,66 @@ } } }, + "Action": { + "Menu": { + "MenuItem": { + "Padding": { + "value": "{core.dimensionPX.8} {core.dimensionPX.16}", + "type": "spacing", + "description": "Adds padding to the menu item" + }, + "Container": { + "ItemSpacing": { + "value": "{core.dimensionPX.4}", + "type": "spacing", + "description": "Adds space between Icons and ContentStack (Label & Description)" + } + }, + "ContentStack": { + "ItemSpacing": { + "value": "0", + "type": "spacing", + "description": "Adds space between Label & Description" + } + }, + "BorderRadius": { + "value": "{Action.BorderRadius}", + "type": "borderRadius", + "description": "Defines the border radius of a single menu item." + } + }, + "Section": { + "SectionTitleWrapper": { + "Padding": { + "value": "{core.dimensionPX.16} {core.dimensionPX.16} {core.dimensionPX.8} {core.dimensionPX.16}", + "type": "spacing", + "description": "Defines the padding around the section title text. Apply on SectionTitleWrapper" + } + }, + "SectionTitle": { + "value": "{core.typography.sourceSansPro.semibold.75}", + "type": "typography" + } + }, + "SectionStack": { + "ItemSpacing": { + "value": "{core.dimensionPX.12}", + "type": "spacing", + "description": "Defines the space between each menu section" + }, + "Padding": { + "value": "{core.dimensionPX.12}", + "type": "spacing", + "description": "Defines the padding around all stacked menu sections." + } + }, + "BorderRadius": { + "value": "{core.borderRadius.LG}", + "type": "borderRadius", + "description": "Defines the border radius of the whole menu component" + } + } + }, "Feedback": { "Loader": { "Container": { diff --git a/packages/figma-design-tokens/input/tokens/sizeVariants/CMP.json b/packages/figma-design-tokens/input/tokens/sizeVariants/CMP.json index e97973c49..21b767fc9 100644 --- a/packages/figma-design-tokens/input/tokens/sizeVariants/CMP.json +++ b/packages/figma-design-tokens/input/tokens/sizeVariants/CMP.json @@ -233,6 +233,31 @@ } } } + }, + "Actions": { + "StepperButton": { + "SM": { + "Icon": { + "value": "XS", + "type": "componentConfig", + "description": "Defines which size-variant of the Icon Component should be used. (The default dimensions might be overrridden with a sizing token.)" + } + }, + "MD": { + "Icon": { + "value": "XS", + "type": "componentConfig", + "description": "Defines which size-variant of the Icon Component should be used. (The default dimensions might be overrridden with a sizing token.)" + } + }, + "LG": { + "Icon": { + "value": "SM", + "type": "componentConfig", + "description": "Defines which size-variant of the Icon Component should be used. (The default dimensions might be overrridden with a sizing token.)" + } + } + } } }, "Forms": { diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts index de3c03584..317c90046 100644 --- a/packages/ui-library/src/components/forms/number-input/index.css.ts +++ b/packages/ui-library/src/components/forms/number-input/index.css.ts @@ -3,7 +3,7 @@ import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/in export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = renderThemedCssStrings((componentTokens, semanticTokens) => { const { UserInput, SurfaceFill, Placeholder, Input, InputBorderRadius, SM, MD, LG, PrefixSuffix } = semanticTokens.Forms; - const { StepperCombo } = componentTokens.Action; + const { StepperButton } = componentTokens.Actions; const { NumberInput } = componentTokens.Forms; return typeSafeNestedCss` @@ -56,8 +56,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend } input { - border: none; - outline: none; + all: initial; } & > * { @@ -67,19 +66,19 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend .split { &.sm { & > .custom-stepper-button { - width: ${StepperCombo.SM.Vertical.Width}; + width: ${StepperButton.Container.Width.SM}; } } &.md { & > .custom-stepper-button { - width: ${StepperCombo.MD.Vertical.Width}; + width: ${StepperButton.Container.Width.MD}; } } &.lg { & > .custom-stepper-button { - width: ${StepperCombo.LG.Vertical.Width}; + width: ${StepperButton.Container.Width.LG}; } } } @@ -177,12 +176,10 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend `; }); -export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDark } = renderThemedCssStrings( - (componentTokens, semanticTokens) => { - const { StepperCombo } = componentTokens.Action; - const { Silent } = semanticTokens.Action; +export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDark } = renderThemedCssStrings((componentTokens) => { + const { StepperCombo, StepperButton } = componentTokens.Actions; - return typeSafeNestedCss` + return typeSafeNestedCss` .stepper-combo { &.horizontal { display: grid; @@ -190,26 +187,26 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar justify-content: center; &.sm { - width: ${StepperCombo.SM.Horizontal.Width}; + width: ${StepperCombo.Container.Width.Horizontal.SM}; & > blr-divider { - padding: ${StepperCombo.SM.Horizontal.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.HorizontalLayout.SM}; } } &.md { - width: ${StepperCombo.MD.Horizontal.Width}; + width: ${StepperCombo.Container.Width.Horizontal.MD}; & > blr-divider { - padding: ${StepperCombo.MD.Horizontal.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.HorizontalLayout.MD}; } } &.lg { - width: ${StepperCombo.LG.Horizontal.Width}; + width: ${StepperCombo.Container.Width.Horizontal.LG}; & > blr-divider { - padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.HorizontalLayout.LG}; } } } @@ -220,26 +217,26 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar justify-content: center; &.sm { - width: ${StepperCombo.SM.Vertical.Width}; + width: ${StepperCombo.Container.Width.Vertical.SM}; & > blr-divider { - padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.VerticalLayout.SM}; } } &.md { - width: ${StepperCombo.MD.Vertical.Width}; + width: ${StepperCombo.Container.Width.Vertical.MD}; & > blr-divider { - padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.VerticalLayout.MD}; } } &.lg { - width: ${StepperCombo.LG.Vertical.Width}; + width: ${StepperCombo.Container.Width.Vertical.LG}; & > blr-divider { - padding: ${StepperCombo.LG.Vertical.DividerWrapper.Padding}; + padding: ${StepperCombo.DividerWrapper.Padding.VerticalLayout.LG}; } } } @@ -250,22 +247,24 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar justify-content: center; align-items: center; border: none; - background-color: ${Silent.SurfaceFill.Rest}; - color: ${Silent.Icon.Rest}; padding: 0; + background-color: ${StepperButton.Container.BackgroundColor.Rest}; + color: ${StepperButton.Icon.IconColor.Rest} + &:hover:not(:disabled) { - background-color: ${Silent.SurfaceFill.Hover}; - color: ${Silent.Icon.Hover}; + background-color: ${StepperButton.Container.BackgroundColor.Hover}; + color: ${StepperButton.Icon.IconColor.Hover} } &:active:not(:disabled) { - background-color: ${Silent.SurfaceFill.Pressed}; - color: ${Silent.Icon.Pressed}; + background-color: ${StepperButton.Container.BackgroundColor.Pressed}; + color: ${StepperButton.Icon.IconColor.Pressed} } &:disabled { - color: ${Silent.Icon.Disabled}; + background-color: ${StepperButton.Container.BackgroundColor.Disabled}; + color: ${StepperButton.Icon.IconColor.Disabled} cursor: not-allowed; } @@ -278,8 +277,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar } } `; - } -); +}); export const baseStyle = typeSafeNestedCss` input[type="number"] { diff --git a/packages/ui-library/src/foundation/component-tokens/action.css.ts b/packages/ui-library/src/foundation/component-tokens/action.css.ts deleted file mode 100644 index f104538bf..000000000 --- a/packages/ui-library/src/foundation/component-tokens/action.css.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals"; - -import { renderThemedCssStrings } from "../_tokens-generated/index.pseudo.generated"; - -export const { tokenizedLight: stepperButtonLight, tokenizedDark: stepperButtonDark } = renderThemedCssStrings((componentTokens) => { - const { StepperButton } = componentTokens.Action; - - // this line broke the stepper button - // color: ${StepperButton.Icon.Rest}; - return typeSafeNestedCss` - .blr-stepper-button { - all: initial; - border-color: ${StepperButton.Border.Rest.color}; - border-width: ${StepperButton.Border.Rest.width}; - line-height: 0 !important; - text-align: center; - } - `; -}); - -export const { tokenizedLight: stepperComboLight, tokenizedDark: stepperComboDark } = renderThemedCssStrings((componentTokens) => { - const { StepperCombo } = componentTokens.Action; - - return typeSafeNestedCss` - .blr-stepper-combo.vertical { - height: 100%; - } - - .blr-stepper-combo.horizontal.sm { - padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.SM.Horizontal.Width}; - } - - .blr-stepper-combo.horizontal-s.sm { - padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.SM.Horizontal.Width}; - } - - .blr-stepper-combo.vertical.sm { - padding: ${StepperCombo.SM.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.SM.Vertical.Width}; - } - - .blr-stepper-combo.horizontal.md { - padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.MD.Horizontal.Width}; - } - - .blr-stepper-combo.horizontal-s.md { - padding: ${StepperCombo.MD.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.MD.Horizontal.Width}; - } - - .blr-stepper-combo.vertical.md { - padding: ${StepperCombo.MD.Horizontal.DividerWrapper.Padding}; - _width: ${StepperCombo.MD.Vertical.Width}; - } - - .blr-stepper-combo.horizontal.lg { - padding: ${StepperCombo.LG.Vertical.DividerWrapper.Padding}; - _width: ${StepperCombo.LG.Horizontal.Width}; - } - - .blr-stepper-combo.horizontal-s.lg { - padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding}; - _width: ${StepperCombo.LG.Horizontal.Width}; - } - - .blr-stepper-combo.vertical.lg { - padding: ${StepperCombo.LG.Horizontal.DividerWrapper.Padding}; - _width: ${StepperCombo.LG.Vertical.Width}; - } - `; -});