diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 9aef387..0034da8 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 22 Aug 2024 18:22:46 GMT + * Generated on Tue, 17 Sep 2024 18:51:48 GMT */ :root { diff --git a/src/tokens/$metadata.json b/src/tokens/$metadata.json new file mode 100644 index 0000000..855ac0e --- /dev/null +++ b/src/tokens/$metadata.json @@ -0,0 +1,11 @@ +{ + "tokenSetOrder": [ + "global", + "1. Global/Default", + "1. Global/Mobile", + "3. Components/Mode 1", + "2. Semantic - Colorways/Default", + "2. Semantic - Colorways/Option 2", + "2. Semantic - Colorways/Option 3" + ] +} \ No newline at end of file diff --git a/src/tokens/$themes.json b/src/tokens/$themes.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/src/tokens/$themes.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/src/tokens/1. Global/Default.json b/src/tokens/1. Global/Default.json new file mode 100644 index 0000000..b927d99 --- /dev/null +++ b/src/tokens/1. Global/Default.json @@ -0,0 +1,246 @@ +{ + "color": { + "NDSU-Green": { + "100": { + "value": "#d4ece6", + "type": "color" + }, + "200": { + "value": "#a9d9ce", + "type": "color" + }, + "300": { + "value": "#7ec5b6", + "type": "color" + }, + "400": { + "value": "#51ab9f", + "type": "color" + }, + "500": { + "value": "#095540", + "type": "color" + }, + "600": { + "value": "#003524", + "type": "color" + }, + "700": { + "value": "#00221b", + "type": "color" + } + }, + "NDSU-Yellow": { + "100": { + "value": "#fff4d6", + "type": "color" + }, + "200": { + "value": "#ffe68a", + "type": "color" + }, + "300": { + "value": "#ffc62f", + "type": "color" + }, + "400": { + "value": "#e5b01a", + "type": "color" + }, + "500": { + "value": "#b28b13", + "type": "color" + }, + "600": { + "value": "#99760b", + "type": "color" + }, + "700": { + "value": "#785d03", + "type": "color" + } + }, + "White": { + "value": "#ffffff", + "type": "color" + }, + "Black": { + "value": "#000000", + "type": "color" + }, + "Grays": { + "100": { + "value": "#f2f3f3", + "type": "color" + }, + "200": { + "value": "#d7dadb", + "type": "color" + }, + "300": { + "value": "#bcc2c3", + "type": "color" + }, + "400": { + "value": "#879294", + "type": "color" + }, + "500": { + "value": "#686e6d", + "type": "color" + }, + "600": { + "value": "#575c5b", + "type": "color" + }, + "700": { + "value": "#404447", + "type": "color" + }, + "800": { + "value": "#282c2f", + "type": "color" + } + }, + "Off-White": { + "value": "#fbfbf9", + "type": "color" + }, + "Accents": { + "Night": { + "value": "#0e364b", + "type": "color" + }, + "Pond": { + "value": "#9dd9f6", + "type": "color" + }, + "Moss": { + "value": "#d6e4c7", + "type": "color" + }, + "Leaf": { + "value": "#a0bd78", + "type": "color" + }, + "Lime": { + "value": "#bed63a", + "type": "color" + }, + "Sun": { + "value": "#fdf389", + "type": "color" + }, + "Harvest": { + "value": "#be5d27", + "type": "color" + } + } + }, + "Gradient": { + "value": "#00221b", + "type": "color" + }, + "typograhy": { + "font-weight": { + "regular": { + "value": "338", + "type": "text" + } + }, + "font-size": { + "H1": { + "value": "4.1875rem", + "type": "dimension" + } + } + }, + "border": { + "xl": { + "value": "6", + "type": "text" + }, + "s": { + "value": "0.0625rem", + "type": "dimension" + }, + "m": { + "value": "0.125rem", + "type": "dimension" + }, + "l": { + "value": "0.1875rem", + "type": "dimension" + } + }, + "spacing": { + "0": { + "value": "0rem", + "type": "dimension" + }, + "2": { + "value": "0.125rem", + "type": "dimension" + }, + "4": { + "value": "0.25rem", + "type": "dimension" + }, + "6": { + "value": "0.375rem", + "type": "dimension" + }, + "8": { + "value": "0.5rem", + "type": "dimension" + }, + "10": { + "value": "0.625rem", + "type": "dimension" + }, + "12": { + "value": "0.75rem", + "type": "dimension" + }, + "16": { + "value": "1rem", + "type": "dimension" + }, + "20": { + "value": "1.25rem", + "type": "dimension" + }, + "24": { + "value": "1.5rem", + "type": "dimension" + }, + "32": { + "value": "2rem", + "type": "dimension" + }, + "40": { + "value": "2.5rem", + "type": "dimension" + }, + "48": { + "value": "3rem", + "type": "dimension" + }, + "64": { + "value": "4rem", + "type": "dimension" + }, + "80": { + "value": "5rem", + "type": "dimension" + }, + "96": { + "value": "6rem", + "type": "dimension" + }, + "128": { + "value": "8rem", + "type": "dimension" + } + } +} \ No newline at end of file diff --git a/src/tokens/1. Global/Mobile.json b/src/tokens/1. Global/Mobile.json new file mode 100644 index 0000000..04b1047 --- /dev/null +++ b/src/tokens/1. Global/Mobile.json @@ -0,0 +1,246 @@ +{ + "color": { + "NDSU-Green": { + "100": { + "value": "#d4ece6", + "type": "color" + }, + "200": { + "value": "#a9d9ce", + "type": "color" + }, + "300": { + "value": "#7ec5b6", + "type": "color" + }, + "400": { + "value": "#51ab9f", + "type": "color" + }, + "500": { + "value": "#095540", + "type": "color" + }, + "600": { + "value": "#003524", + "type": "color" + }, + "700": { + "value": "#00221b", + "type": "color" + } + }, + "NDSU-Yellow": { + "100": { + "value": "#fff4d6", + "type": "color" + }, + "200": { + "value": "#ffe68a", + "type": "color" + }, + "300": { + "value": "#ffc62f", + "type": "color" + }, + "400": { + "value": "#e5b01a", + "type": "color" + }, + "500": { + "value": "#b28b13", + "type": "color" + }, + "600": { + "value": "#99760b", + "type": "color" + }, + "700": { + "value": "#785d03", + "type": "color" + } + }, + "White": { + "value": "#ffffff", + "type": "color" + }, + "Black": { + "value": "#000000", + "type": "color" + }, + "Grays": { + "100": { + "value": "#f2f3f3", + "type": "color" + }, + "200": { + "value": "#d7dadb", + "type": "color" + }, + "300": { + "value": "#bcc2c3", + "type": "color" + }, + "400": { + "value": "#879294", + "type": "color" + }, + "500": { + "value": "#686e6d", + "type": "color" + }, + "600": { + "value": "#575c5b", + "type": "color" + }, + "700": { + "value": "#404447", + "type": "color" + }, + "800": { + "value": "#282c2f", + "type": "color" + } + }, + "Off-White": { + "value": "#fbfbf9", + "type": "color" + }, + "Accents": { + "Night": { + "value": "#0e364b", + "type": "color" + }, + "Pond": { + "value": "#9dd9f6", + "type": "color" + }, + "Moss": { + "value": "#d6e4c7", + "type": "color" + }, + "Leaf": { + "value": "#a0bd78", + "type": "color" + }, + "Lime": { + "value": "#bed63a", + "type": "color" + }, + "Sun": { + "value": "#fdf389", + "type": "color" + }, + "Harvest": { + "value": "#be5d27", + "type": "color" + } + } + }, + "Gradient": { + "value": "#ffffff", + "type": "color" + }, + "typograhy": { + "font-weight": { + "regular": { + "value": "338", + "type": "text" + } + }, + "font-size": { + "H1": { + "value": "2.125rem", + "type": "dimension" + } + } + }, + "border": { + "xl": { + "value": "6", + "type": "text" + }, + "s": { + "value": "0.0625rem", + "type": "dimension" + }, + "m": { + "value": "0.125rem", + "type": "dimension" + }, + "l": { + "value": "0.1875rem", + "type": "dimension" + } + }, + "spacing": { + "0": { + "value": "0rem", + "type": "dimension" + }, + "2": { + "value": "0.125rem", + "type": "dimension" + }, + "4": { + "value": "0.25rem", + "type": "dimension" + }, + "6": { + "value": "0.375rem", + "type": "dimension" + }, + "8": { + "value": "0.5rem", + "type": "dimension" + }, + "10": { + "value": "0.625rem", + "type": "dimension" + }, + "12": { + "value": "0.75rem", + "type": "dimension" + }, + "16": { + "value": "1rem", + "type": "dimension" + }, + "20": { + "value": "1.25rem", + "type": "dimension" + }, + "24": { + "value": "1.5rem", + "type": "dimension" + }, + "32": { + "value": "2rem", + "type": "dimension" + }, + "40": { + "value": "2.5rem", + "type": "dimension" + }, + "48": { + "value": "3rem", + "type": "dimension" + }, + "64": { + "value": "4rem", + "type": "dimension" + }, + "80": { + "value": "5rem", + "type": "dimension" + }, + "96": { + "value": "6rem", + "type": "dimension" + }, + "128": { + "value": "8rem", + "type": "dimension" + } + } +} \ No newline at end of file diff --git a/src/tokens/2. Semantic - Colorways/Default.json b/src/tokens/2. Semantic - Colorways/Default.json new file mode 100644 index 0000000..212dff7 --- /dev/null +++ b/src/tokens/2. Semantic - Colorways/Default.json @@ -0,0 +1,90 @@ +{ + "colorway-Light": { + "body": { + "value": "{color.Grays.800}", + "type": "color" + }, + "heading": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.600}", + "type": "color" + }, + "bkg": { + "value": "{color.Off-White}", + "type": "color" + }, + "Link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "accentLine": { + "value": "{color.NDSU-Green.400}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.600}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "divider": { + "value": "{color.NDSU-Green.400}", + "type": "color" + } + }, + "colorway-Dark": { + "body": { + "value": "{color.White}", + "type": "color" + }, + "heading": { + "value": "{color.Grays.100}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.200}", + "type": "color" + }, + "bkg": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "accentLine": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.200}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "divider": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + } + } +} \ No newline at end of file diff --git a/src/tokens/2. Semantic - Colorways/Option 2.json b/src/tokens/2. Semantic - Colorways/Option 2.json new file mode 100644 index 0000000..dd8a7d1 --- /dev/null +++ b/src/tokens/2. Semantic - Colorways/Option 2.json @@ -0,0 +1,90 @@ +{ + "colorway-Light": { + "body": { + "value": "{color.Grays.800}", + "type": "color" + }, + "heading": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.600}", + "type": "color" + }, + "bkg": { + "value": "{color.Accents.Moss}", + "type": "color" + }, + "Link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "accentLine": { + "value": "{color.NDSU-Green.400}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.600}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "divider": { + "value": "{color.NDSU-Green.400}", + "type": "color" + } + }, + "colorway-Dark": { + "body": { + "value": "{color.White}", + "type": "color" + }, + "heading": { + "value": "{color.Grays.100}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.200}", + "type": "color" + }, + "bkg": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "accentLine": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.200}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "divider": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + } + } +} \ No newline at end of file diff --git a/src/tokens/2. Semantic - Colorways/Option 3.json b/src/tokens/2. Semantic - Colorways/Option 3.json new file mode 100644 index 0000000..5d40469 --- /dev/null +++ b/src/tokens/2. Semantic - Colorways/Option 3.json @@ -0,0 +1,90 @@ +{ + "colorway-Light": { + "body": { + "value": "{color.Grays.800}", + "type": "color" + }, + "heading": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.500}", + "type": "color" + }, + "bkg": { + "value": "{color.NDSU-Yellow.100}", + "type": "color" + }, + "Link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "accentLine": { + "value": "{color.NDSU-Green.400}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.500}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "divider": { + "value": "{color.NDSU-Green.400}", + "type": "color" + } + }, + "colorway-Dark": { + "body": { + "value": "{color.White}", + "type": "color" + }, + "heading": { + "value": "{color.Grays.100}", + "type": "color" + }, + "eyebrow": { + "value": "{color.Grays.200}", + "type": "color" + }, + "bkg": { + "value": "{color.NDSU-Green.700}", + "type": "color" + }, + "link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "accentLine": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "body-subtle": { + "value": "{color.Grays.200}", + "type": "color" + }, + "Button": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "divider": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "heading-link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + } + } +} \ No newline at end of file diff --git a/src/tokens/3. Components/Mode 1.json b/src/tokens/3. Components/Mode 1.json new file mode 100644 index 0000000..caec28e --- /dev/null +++ b/src/tokens/3. Components/Mode 1.json @@ -0,0 +1,242 @@ +{ + "mainMenu_flyout": { + "background": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "link": { + "value": "{color.NDSU-Yellow.100}", + "type": "color" + }, + "text-reduced": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.100}", + "type": "color" + }, + "Category": { + "value": "{color.Grays.300}", + "type": "color" + } + }, + "cta": { + "eyebrow": { + "value": "{colorway-Light.eyebrow}", + "type": "color" + }, + "Heading": { + "value": "{colorway-Light.heading}", + "type": "color" + }, + "Body": { + "value": "{colorway-Light.body}", + "type": "color" + }, + "background": { + "value": "{color.Off-White}", + "type": "color" + } + }, + "button": { + "border": { + "color": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + }, + "focus": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "width": { + "value": "{border.s}", + "type": "dimension" + }, + "width-focus": { + "value": "{border.l}", + "type": "dimension" + } + }, + "label": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + } + }, + "footer": { + "color": { + "link": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.700}", + "type": "color" + } + }, + "secondary": { + "SourceLink": { + "value": "{color.Accents.Moss}", + "type": "color" + }, + "link": { + "value": "{color.Off-White}", + "type": "color" + }, + "link-hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "body-text": { + "value": "#ffffff", + "type": "color" + }, + "divider": { + "value": "{color.NDSU-Green.200}", + "type": "color" + }, + "SourceLink-Hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + } + } + }, + "mainMenu": { + "bkg": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "logo": { + "value": "{color.White}", + "type": "color" + }, + "link": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "link hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "body": { + "value": "{color.White}", + "type": "color" + }, + "button": { + "border": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "fill-label-hover": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "fill-border": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "fill-label": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "outline-label": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "action": { + "value": "{color.NDSU-Yellow.300}", + "type": "color" + }, + "action-hover": { + "value": "{color.NDSU-Yellow.200}", + "type": "color" + }, + "fill-background-hover": { + "value": "{color.NDSU-Green.600}", + "type": "color" + } + } + }, + "secondaryMenu": { + "link": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "link-active-deep": { + "value": "{color.Grays.600}", + "type": "color" + }, + "line": { + "value": "{color.Accents.Leaf}", + "type": "color" + }, + "microsite-associated-link": { + "value": "{color.Off-White}", + "type": "color" + }, + "microsite-associated-link-active-deep": { + "value": "{color.Grays.200}", + "type": "color" + }, + "microsite-associated-name": { + "value": "{color.Accents.Moss}", + "type": "color" + }, + "microsite-associated-bkg": { + "value": "{color.NDSU-Green.600}", + "type": "color" + }, + "link-active": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "microsite-associated-link-active": { + "value": "{color.NDSU-Green.200}", + "type": "color" + }, + "microsite-tied-bkg": { + "value": "{color.NDSU-Green.500}", + "type": "color" + }, + "microsite-tied-link-active": { + "value": "{color.NDSU-Green.100}", + "type": "color" + }, + "microsite-tied-name": { + "value": "{color.Accents.Moss}", + "type": "color" + } + }, + "Filter": { + "outline": { + "value": "{color.Grays.500}", + "type": "color" + }, + "text": { + "value": "{color.Grays.600}", + "type": "color" + }, + "fill-hover": { + "value": "{color.Grays.800}", + "type": "color" + }, + "fill-text-hover": { + "value": "{color.White}", + "type": "color" + }, + "active-fill-hover": { + "value": "{color.Grays.700}", + "type": "color" + }, + "active-fill": { + "value": "{color.NDSU-Green.600}", + "type": "color" + } + }, + "quote": { + "bkg": { + "value": "{colorway-Light.bkg}", + "type": "color" + } + } +} \ No newline at end of file diff --git a/src/tokens/global.json b/src/tokens/global.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/src/tokens/global.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json index 228b773..461081f 100644 --- a/src/tokens/transformed.tokens.json +++ b/src/tokens/transformed.tokens.json @@ -2764,7 +2764,11 @@ "components/table": "enabled", "components/tabs": "enabled", "components/textField": "enabled", - "semantic": "enabled" + "semantic": "enabled", + "components/announcement": "enabled", + "components/banner": "enabled", + "components/footer": "enabled", + "components/header": "enabled" }, "$figmaCollectionId": "VariableCollectionId:23237:16908", "$figmaModeId": "23237:10",