@gov-design-system-ce/components 0.0.59 → 0.0.60

package/dist/collection/data/color-definitions.js

@@ -0,0 +1,307 @@
+export const primaryColors = [
+	{
+		name: "Primary 100",
+		description: null,
+
+		hex: "#ecf7ff",
+		tokens: ["var(--gov-color-primary-100)", ".gov-color--primary-100"],
+	},
+	{
+		name: "Primary 200",
+		description: null,
+
+		hex: "#d9efff",
+		tokens: ["var(--gov-color-primary-200)", ".gov-color--primary-200"],
+	},
+	{
+		name: "Primary 300",
+		description: null,
+
+		hex: "#b5d9f3",
+		tokens: ["var(--gov-color-primary-300)", ".gov-color--primary-300"],
+	},
+	{
+		name: "Primary 400",
+		description: null,
+
+		hex: "#66a1d8",
+		tokens: ["var(--gov-color-primary-400)", ".gov-color--primary-400"],
+	},
+	{
+		name: "Primary 500",
+		description: null,
+
+		hex: "#3077b7",
+		tokens: ["var(--gov-color-primary-500)", ".gov-color--primary"],
+	},
+	{
+		name: "Primary 600",
+		description: null,
+
+		hex: "#2362a2",
+		tokens: ["var(--gov-color-primary-600)", ".gov-color--primary-600"],
+	},
+	{
+		name: "Primary 700",
+		description: null,
+
+		hex: "#254e80",
+		tokens: ["var(--gov-color-primary-700)", ".gov-color--primary-700"],
+	},
+	{
+		name: "Primary 800",
+		description: null,
+
+		hex: "#15355e",
+		tokens: ["var(--gov-color-primary-800)", ".gov-color--primary-800"],
+	},
+	{
+		name: "Primary 900",
+		description: null,
+
+		hex: "#0d213a",
+		tokens: ["var(--gov-color-primary-900)", ".gov-color--primary-900"],
+	},
+]
+
+export const secondaryColors = [
+	{
+		name: "Secondary 100",
+		description: null,
+
+		hex: "#FCFCFC",
+		tokens: ["var(--gov-color-secondary-100)", ".gov-color--secondary-100"],
+	},
+	{
+		name: "Secondary 200",
+		description: null,
+
+		hex: "#fafafa",
+		tokens: ["var(--gov-color-secondary-200)", ".gov-color--secondary-200"],
+	},
+	{
+		name: "Secondary 300",
+		description: null,
+
+		hex: "#f5f5f5",
+		tokens: ["var(--gov-color-secondary-300)", ".gov-color--secondary-300"],
+	},
+	{
+		name: "Secondary 400",
+		description: null,
+
+		hex: "#eaeaea",
+		tokens: ["var(--gov-color-secondary-400)", ".gov-color--secondary-400"],
+	},
+	{
+		name: "Secondary 500",
+		description: null,
+
+		hex: "#ddd",
+		tokens: ["var(--gov-color-secondary-500)", ".gov-color--secondary"],
+	},
+	{
+		name: "Secondary 600",
+		description: null,
+
+		hex: "#a8a8a8",
+		tokens: ["var(--gov-color-secondary-600)", ".gov-color--secondary-600"],
+	},
+	{
+		name: "Secondary 700",
+		description: null,
+
+		hex: "#686868",
+		tokens: ["var(--gov-color-secondary-700)", ".gov-color--secondary-700"],
+	},
+	{
+		name: "Secondary 800",
+		description: null,
+
+		hex: "#3b3b3b",
+		tokens: ["var(--gov-color-secondary-800)", ".gov-color--secondary-800"],
+	},
+	{
+		name: "Secondary 900",
+		description: null,
+
+		hex: "#232323",
+		tokens: ["var(--gov-color-secondary-900)", ".gov-color--secondary-900"],
+	},
+]
+
+export const successColors = [
+	{
+		name: "Success 100",
+		description: null,
+
+		hex: "#f5faf0",
+		tokens: ["var(--gov-color-success-100)", ".gov-color--success-100"],
+	},
+	{
+		name: "Success 200",
+		description: null,
+
+		hex: "#dcefcc",
+		tokens: ["var(--gov-color-success-200)", ".gov-color--success-200"],
+	},
+	{
+		name: "Success 300",
+		description: null,
+
+		hex: "#a3d578",
+		tokens: ["var(--gov-color-success-300)", ".gov-color--success-300"],
+	},
+	{
+		name: "Success 400",
+		description: null,
+
+		hex: "#6fbd2c",
+		tokens: ["var(--gov-color-success-400)", ".gov-color--success-400"],
+	},
+	{
+		name: "Success 500",
+		description: null,
+
+		hex: "#488515",
+		tokens: ["var(--gov-color-success-500)", ".gov-color--success"],
+	},
+	{
+		name: "Success 600",
+		description: null,
+
+		hex: "#3a6217",
+		tokens: ["var(--gov-color-success-600)", ".gov-color--success-600"],
+	},
+	{
+		name: "Success 700",
+		description: null,
+
+		hex: "#2c4f0d",
+		tokens: ["var(--gov-color-success-700)", ".gov-color--success-700"],
+	},
+]
+
+export const warningColors = [
+	{
+		name: "Warning 100",
+		description: null,
+
+		hex: "#fef9ef",
+		tokens: ["var(--gov-color-warning-100)", ".gov-color--warning-100"],
+	},
+	{
+		name: "Warning 200",
+		description: null,
+
+		hex: "#faecc8",
+		tokens: ["var(--gov-color-warning-200)", ".gov-color--warning-200"],
+	},
+	{
+		name: "Warning 300",
+		description: null,
+
+		hex: "#fad47b",
+		tokens: ["var(--gov-color-warning-300)", ".gov-color--warning-300"],
+	},
+	{
+		name: "Warning 400",
+		description: null,
+
+		hex: "#f9c13c",
+		tokens: ["var(--gov-color-warning-400)", ".gov-color--warning-400"],
+	},
+	{
+		name: "Warning 500",
+		description: null,
+
+		hex: "#c78300",
+		tokens: ["var(--gov-color-warning-500)", ".gov-color--warning"],
+	},
+	{
+		name: "Warning 600",
+		description: null,
+
+		hex: "#99620f",
+		tokens: ["var(--gov-color-warning-600)", ".gov-color--warning-600"],
+	},
+	{
+		name: "Warning 700",
+		description: null,
+
+		hex: "#865102",
+		tokens: ["var(--gov-color-warning-700)", ".gov-color--warning-700"],
+	},
+]
+
+export const errorColors = [
+	{
+		name: "Error 100",
+		description: null,
+
+		hex: "#ffe8ea",
+		tokens: ["var(--gov-color-error-100)", ".gov-color--error-100"],
+	},
+	{
+		name: "Error 200",
+		description: null,
+
+		hex: "#f7cdd2",
+		tokens: ["var(--gov-color-error-200)", ".gov-color--error-200"],
+	},
+	{
+		name: "Error 300",
+		description: null,
+
+		hex: "#d96671",
+		tokens: ["var(--gov-color-error-300)", ".gov-color--error-300"],
+	},
+	{
+		name: "Error 400",
+		description: null,
+
+		hex: "#c52a3a",
+		tokens: ["var(--gov-color-error-400)", ".gov-color--error-400"],
+	},
+	{
+		name: "Error 500",
+		description: null,
+
+		hex: "#9e0615",
+		tokens: ["var(--gov-color-error-500)", ".gov-color--error"],
+	},
+	{
+		name: "Error 600",
+		description: null,
+
+		hex: "#830713",
+		tokens: ["var(--gov-color-error-600)", ".gov-color--error-600"],
+	},
+]
+
+export const focusColors = [
+	{
+		name: "Focus Base",
+		description: null,
+
+		hex: "#007bff",
+		tokens: ["var(--gov-color-focus-base)", ".gov-color--focus-base"],
+	},
+]
+
+export const neutralColors = [
+	{
+		name: "Neutral Black",
+		description: null,
+
+		hex: "#000",
+		tokens: ["var(--gov-color-neutral-black)", ".gov-color--neutral-black"],
+	},
+	{
+		name: "Neutral White",
+		description: null,
+
+		hex: "#FFF",
+		tokens: ["var(--gov-color-neutral-white)", ".gov-color--neutral-white"],
+	},
+]

package/dist/collection/data/font-definitions.js

@@ -0,0 +1,94 @@
+export const fonts = [
+	{
+		name: 'X-Small',
+		description:
+			'The font size denoted as X-Small, which exclusively finds its usage in the mobile applications designed for iOS and Android platforms.',
+		size: 'xs',
+		definitions: {
+			px: '12px',
+			rem: '0.75rem',
+		},
+	},
+	{
+		name: 'Small',
+		description:
+			'The utilization of the Small font size should be limited to a certain extent, particularly for annotations, descriptions, and other comparable content.',
+		size: 's',
+		definitions: {
+			px: '14px',
+			rem: '0.875rem',
+		},
+	},
+	{
+		name: 'Medium',
+		description: 'The body text is typically rendered using the Medium font size.',
+		size: 'm',
+		definitions: {
+			px: '16px',
+			rem: '1rem',
+		},
+	},
+	{
+		name: 'Large',
+		description: 'The Large font size is employed for creating small sub-headings',
+		size: 'l',
+		definitions: {
+			px: '18px',
+			rem: '1.125rem',
+		},
+	},
+	{
+		name: 'X-Large',
+		description: 'When creating large sub-headings, the X-Large font size is typically utilized.',
+		size: 'xl',
+		definitions: {
+			px: '20px',
+			rem: '1.25rem',
+		},
+	},
+	{
+		name: '2X-Large',
+		description: 'The primary heading on tablet-sized devices is generally displayed using the XX-Large font size.',
+		size: '2xl',
+		definitions: {
+			px: '24px',
+			rem: '1.375rem',
+		},
+	},
+	{
+		name: '3X-Large',
+		description: 'On desktop devices, the main heading is commonly presented in the XXX-Large font size.',
+		size: '3xl',
+		definitions: {
+			px: '32px',
+			rem: '1.625rem',
+		},
+	},
+	{
+		name: '4x-Large',
+		description: 'The usage of the XXXX-Large font size is primarily reserved for marketing purposes and banners.',
+		size: '4xl',
+		definitions: {
+			px: '40px',
+			rem: '2rem',
+		},
+	},
+	{
+		name: '5X-Large',
+		description: null,
+		size: '5xl',
+		definitions: {
+			px: '48px',
+			rem: '2.25rem',
+		},
+	},
+	{
+		name: '6X-Large',
+		description: null,
+		size: '6xl',
+		definitions: {
+			px: '64px',
+			rem: '3rem',
+		},
+	},
+];

package/dist/collection/pages/Forms.js

@@ -76,6 +76,13 @@ class FormsPage extends HTMLElement {
 				<gov-icon slot="right-icon" name="info"></gov-icon>
 			</gov-form-input>
 			<br>
+			<gov-form-select size="l" name="test-me" invalid="true">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
 			<gov-form-select size="l" name="test-me" success="true">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -107,6 +114,18 @@ class FormsPage extends HTMLElement {
 				<option value="i" selected>Value I</option>
 			</gov-form-multi-select>
 			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
 			<gov-form-checkbox name="test-me-c" value="me" checked no-label></gov-form-checkbox>
 			<gov-form-radio name="superRadio2" value="me1" no-label></gov-form-radio>
 			<br>
@@ -353,6 +372,14 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" success="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
 			<gov-form-control>
 				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
 				<gov-form-group>
@@ -837,6 +864,54 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+			<h3>
+				Success
+			</h3>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="xl" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>