- {% endif %}
- {% for item in items %}
- {{ item.content }}
- {% endfor %}
- {% if multiple %}
-
- {% endif %}
-
-{% endif %}
diff --git a/templates/fields/field--text-long.html.twig b/templates/fields/field--text-long.html.twig
deleted file mode 100644
index 4f1cbe8b..00000000
--- a/templates/fields/field--text-long.html.twig
+++ /dev/null
@@ -1,42 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a field.
- *
- * To override output, copy the "field.html.twig" from the templates directory
- * to your theme's directory and customize it, just like customizing other
- * Drupal templates such as page.html.twig or node.html.twig.
- *
- * Instead of overriding the theming for all fields, you can also just override
- * theming for a subset of fields using
- * @link themeable Theme hook suggestions. @endlink For example,
- * here are some theme hook suggestions that can be used for a field_foo field
- * on an article node type:
- * - field--node--field-foo--article.html.twig
- * - field--node--field-foo.html.twig
- * - field--node--article.html.twig
- * - field--field-foo.html.twig
- * - field--text-with-summary.html.twig
- * - field.html.twig
- *
- * Available variables:
- * - attributes: HTML attributes for the containing element.
- * - label_hidden: Whether to show the field label or not.
- * - title_attributes: HTML attributes for the title.
- * - label: The label for the field.
- * - multiple: TRUE if a field can contain multiple items.
- * - items: List of all the field items. Each item contains:
- * - attributes: List of HTML attributes for each item.
- * - content: The field item's content.
- * - entity_type: The entity type to which the field belongs.
- * - field_name: The name of the field.
- * - field_type: The type of the field.
- * - label_display: The display settings for the label.
- *
- * @see template_preprocess_field()
- */
-
- @TODO: THIS CAN BE REMOVED IF BEM CLASSES CAN BE APPLIED IN WYSIWYG
-#}
-
-{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}
diff --git a/templates/fields/field--text-with-summary.html.twig b/templates/fields/field--text-with-summary.html.twig
deleted file mode 100644
index 41efa5ff..00000000
--- a/templates/fields/field--text-with-summary.html.twig
+++ /dev/null
@@ -1,42 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a field.
- *
- * To override output, copy the "field.html.twig" from the templates directory
- * to your theme's directory and customize it, just like customizing other
- * Drupal templates such as page.html.twig or node.html.twig.
- *
- * Instead of overriding the theming for all fields, you can also just override
- * theming for a subset of fields using
- * @link themeable Theme hook suggestions. @endlink For example,
- * here are some theme hook suggestions that can be used for a field_foo field
- * on an article node type:
- * - field--node--field-foo--article.html.twig
- * - field--node--field-foo.html.twig
- * - field--node--article.html.twig
- * - field--field-foo.html.twig
- * - field--text-with-summary.html.twig
- * - field.html.twig
- *
- * Available variables:
- * - attributes: HTML attributes for the containing element.
- * - label_hidden: Whether to show the field label or not.
- * - title_attributes: HTML attributes for the title.
- * - label: The label for the field.
- * - multiple: TRUE if a field can contain multiple items.
- * - items: List of all the field items. Each item contains:
- * - attributes: List of HTML attributes for each item.
- * - content: The field item's content.
- * - entity_type: The entity type to which the field belongs.
- * - field_name: The name of the field.
- * - field_type: The type of the field.
- * - label_display: The display settings for the label.
- *
- * @see template_preprocess_field()
- */
-
- @TODO: THIS CAN BE REMOVED IF WYWSIWYG BEM CLASSES CAN BE APPLIED
-#}
-
-{% include directory ~ "/templates/fields/_field-wysiwyg.twig" %}
diff --git a/templates/form/checkboxes.html.twig b/templates/form/checkboxes.html.twig
deleted file mode 100644
index f7efc74c..00000000
--- a/templates/form/checkboxes.html.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a 'checkboxes' #type form element.
- *
- * Available variables
- * - attributes: A list of HTML attributes for the wrapper element.
- * - children: The rendered checkboxes.
- *
- * @see template_preprocess_checkboxes()
- */
- @todo: remove this file once https://www.drupal.org/node/1819284 is resolved.
- This is identical to core/modules/system/templates/container.html.twig
-#}
-{% include "@atoms/forms/_checkboxes.twig" %}
diff --git a/templates/form/field-multiple-value-form.html.twig b/templates/form/field-multiple-value-form.html.twig
deleted file mode 100644
index 954bdeda..00000000
--- a/templates/form/field-multiple-value-form.html.twig
+++ /dev/null
@@ -1,22 +0,0 @@
-{#
-/**
- * @file
- * Theme override for an individual form element.
- *
- * Available variables for all fields:
- * - multiple: Whether there are multiple instances of the field.
- *
- * Available variables for single cardinality fields:
- * - elements: Form elements to be rendered.
- *
- * Available variables when there are multiple fields.
- * - table: Table of field items.
- * - description: The description element containing the following properties:
- * - content: The description content of the form element.
- * - attributes: HTML attributes to apply to the description container.
- * - button: "Add another item" button.
- *
- * @see template_preprocess_field_multiple_value_form()
- */
-#}
-{% include "@atoms/forms/_multi-value.twig" %}
diff --git a/templates/form/fieldset.html.twig b/templates/form/fieldset.html.twig
deleted file mode 100644
index 80dd3a91..00000000
--- a/templates/form/fieldset.html.twig
+++ /dev/null
@@ -1,23 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a fieldset element and its children.
- *
- * Available variables:
- * - attributes: HTML attributes for the fieldset element.
- * - errors: (optional) Any errors for this fieldset element, may not be set.
- * - required: Boolean indicating whether the fieldeset element is required.
- * - legend: The legend element containing the following properties:
- * - title: Title of the fieldset, intended for use as the text of the legend.
- * - attributes: HTML attributes to apply to the legend.
- * - description: The description element containing the following properties:
- * - content: The description content of the fieldset.
- * - attributes: HTML attributes to apply to the description container.
- * - children: The rendered child elements of the fieldset.
- * - prefix: The content to add before the fieldset children.
- * - suffix: The content to add after the fieldset children.
- *
- * @see template_preprocess_fieldset()
- */
-#}
-{% include "@atoms/forms/_fieldset.twig" %}
diff --git a/templates/form/form-element-label.html.twig b/templates/form/form-element-label.html.twig
deleted file mode 100644
index 0abcc7ce..00000000
--- a/templates/form/form-element-label.html.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a form element label.
- *
- * Available variables:
- * - title: The label's text.
- * - title_display: Elements title_display setting.
- * - required: An indicator for whether the associated form element is required.
- * - attributes: A list of HTML attributes for the label.
- *
- * @see template_preprocess_form_element_label()
- */
-#}
-{% include "@atoms/forms/_form-label.twig" %}
diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig
deleted file mode 100644
index 80ed3405..00000000
--- a/templates/form/form-element.html.twig
+++ /dev/null
@@ -1,59 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a form element.
- *
- * Available variables:
- * - attributes: HTML attributes for the containing element.
- * - errors: (optional) Any errors for this form element, may not be set.
- * - prefix: (optional) The form element prefix, may not be set.
- * - suffix: (optional) The form element suffix, may not be set.
- * - required: The required marker, or empty if the associated form element is
- * not required.
- * - type: The type of the element.
- * - name: The name of the element.
- * - label: A rendered label element.
- * - label_display: Label display setting. It can have these values:
- * - before: The label is output before the element. This is the default.
- * The label includes the #title and the required marker, if #required.
- * - after: The label is output after the element. For example, this is used
- * for radio and checkbox #type elements. If the #title is empty but the
- * field is #required, the label will contain only the required marker.
- * - invisible: Labels are critical for screen readers to enable them to
- * properly navigate through forms but can be visually distracting. This
- * property hides the label for everyone except screen readers.
- * - attribute: Set the title attribute on the element to create a tooltip but
- * output no label element. This is supported only for checkboxes and radios
- * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
- * It is used where a visual label is not needed, such as a table of
- * checkboxes where the row and column provide the context. The tooltip will
- * include the title and required marker.
- * - description: (optional) A list of description properties containing:
- * - content: A description of the form element, may not be set.
- * - attributes: (optional) A list of HTML attributes to apply to the
- * description content wrapper. Will only be set when description is set.
- * - description_display: Description display setting. It can have these values:
- * - before: The description is output before the element.
- * - after: The description is output after the element. This is the default
- * value.
- * - invisible: The description is output after the element, hidden visually
- * but available to screen readers.
- * - disabled: True if the element is disabled.
- * - title_display: Title display setting.
- *
- * @see template_preprocess_form_element()
- */
-#}
-{%
- set classes = [
- 'js-form-item',
- 'form-item',
- 'js-form-type-' ~ type|clean_class,
- 'form-item-' ~ name|clean_class,
- 'js-form-item-' ~ name|clean_class,
- title_display not in ['after', 'before'] ? 'form-no-label',
- disabled == 'disabled' ? 'form-disabled',
- errors ? 'form-item--error',
- ]
-%}
-{% include "@atoms/forms/_form-element.twig" %}
diff --git a/templates/form/input.html.twig b/templates/form/input.html.twig
deleted file mode 100644
index 7fd356bb..00000000
--- a/templates/form/input.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{#
-/**
- * @file
- * Theme override for an 'input' #type form element.
- *
- * Available variables:
- * - attributes: A list of HTML attributes for the input element.
- * - children: Optional additional rendered elements.
- *
- * @see template_preprocess_input()
- */
-#}
-{% include "@atoms/forms/_input.twig" %}
diff --git a/templates/form/radios.html.twig b/templates/form/radios.html.twig
deleted file mode 100644
index a00281e1..00000000
--- a/templates/form/radios.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a 'radios' #type form element.
- *
- * Available variables
- * - attributes: A list of HTML attributes for the wrapper element.
- * - children: The rendered radios.
- *
- * @see template_preprocess_radios()
- */
-#}
-{% include "@atoms/forms/_radios.twig" %}
diff --git a/templates/form/select.html.twig b/templates/form/select.html.twig
deleted file mode 100644
index 251415c0..00000000
--- a/templates/form/select.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a select element.
- *
- * Available variables:
- * - attributes: HTML attributes for the select tag.
- * - options: The option element children.
- *
- * @see template_preprocess_select()
- */
-#}
-{% include "@atoms/forms/_select-element.twig" %}
diff --git a/templates/form/textarea.html.twig b/templates/form/textarea.html.twig
deleted file mode 100644
index 5f2c09a8..00000000
--- a/templates/form/textarea.html.twig
+++ /dev/null
@@ -1,16 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a 'textarea' #type form element.
- *
- * Available variables
- * - wrapper_attributes: A list of HTML attributes for the wrapper element.
- * - attributes: A list of HTML attributes for the textarea element.
- * - resizable: An indicator for whether the textarea is resizable.
- * - required: An indicator for whether the textarea is required.
- * - value: The textarea content.
- *
- * @see template_preprocess_textarea()
- */
-#}
-{% include "@atoms/forms/_textarea.twig" %}
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
deleted file mode 100644
index b9786157..00000000
--- a/templates/layout/page.html.twig
+++ /dev/null
@@ -1,77 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a single page.
- *
- * The doctype, html, head and body tags are not in this template. Instead they
- * can be found in the html.html.twig template in this directory.
- *
- * Available variables:
- *
- * General utility variables:
- * - base_path: The base URL path of the Drupal installation. Will usually be
- * "/" unless you have installed Drupal in a sub-directory.
- * - is_front: A flag indicating if the current page is the front page.
- * - logged_in: A flag indicating if the user is registered and signed in.
- * - is_admin: A flag indicating if the user has permission to access
- * administration pages.
- *
- * Site identity:
- * - front_page: The URL of the front page. Use this instead of base_path when
- * linking to the front page. This includes the language domain or prefix.
- *
- * Page content (in order of occurrence in the default page.html.twig):
- * - messages: Status and error messages. Should be displayed prominently.
- * - node: Fully loaded node, if there is an automatically-loaded node
- * associated with the page and the node ID is the second argument in the
- * page's path (e.g. node/12345 and node/12345/revisions, but not
- * comment/reply/12345).
- *
- * Regions:
- * - page.header: Items for the header region.
- * - page.primary_menu: Items for the primary menu region.
- * - page.secondary_menu: Items for the secondary menu region.
- * - page.highlighted: Items for the highlighted content region.
- * - page.help: Dynamic help text, mostly for admin pages.
- * - page.content: The main content of the current page.
- * - page.sidebar_first: Items for the first sidebar.
- * - page.sidebar_second: Items for the second sidebar.
- * - page.footer: Items for the footer region.
- * - page.breadcrumb: Items for the breadcrumb region.
- *
- * @see template_preprocess_page()
- * @see html.html.twig
- */
-#}
-
-{% if page.sidebar|render %} {# this may or may not correctly filter sidebar #}
- {% set sidebar = TRUE %}
-{% endif %}
-
-{% extends "@templates/_default.twig" %}
- {% block page_header %}
- {% if page.header %}
- {{ page.header }}
- {% endif %}
- {% endblock %}
-
- {% block page_system %}
- {{ page.breadcrumb }}
- {{ page.highlighted }}
- {{ page.help }}
- {{ messages }}
- {% endblock %}
-
- {% block page_sidebar %}
- {{ page.sidebar }}
- {% endblock %}
-
- {% block page_content %}
- {{ page.content }}
- {% endblock %}
-
- {% block page_footer %}
- {% if page.footer %}
- {{ page.footer }}
- {% endif %}
- {% endblock %}
diff --git a/templates/layout/region--footer.html.twig b/templates/layout/region--footer.html.twig
deleted file mode 100644
index 7aed9c86..00000000
--- a/templates/layout/region--footer.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a region.
- *
- * Available variables:
- * - content: The content for this region, typically blocks.
- * - attributes: HTML attributes for the region div.
- * - region: The name of the region variable as defined in the theme's
- * .info.yml file.
- *
- * @see template_preprocess_region()
- */
-#}
-{% extends "@organisms/site/site-footer/site-footer.twig" %}
-
-{% block footer__menu %}
- {{ content }}
-{% endblock %}
diff --git a/templates/layout/region--header.html.twig b/templates/layout/region--header.html.twig
deleted file mode 100644
index c3f8d59c..00000000
--- a/templates/layout/region--header.html.twig
+++ /dev/null
@@ -1,19 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a region.
- *
- * Available variables:
- * - content: The content for this region, typically blocks.
- * - attributes: HTML attributes for the region div.
- * - region: The name of the region variable as defined in the theme's
- * .info.yml file.
- *
- * @see template_preprocess_region()
- */
-#}
-{% extends "@organisms/site/site-header/site-header.twig" %}
-
-{% block header__menu %}
- {{ content }}
-{% endblock %}
diff --git a/templates/media/responsive-image.html.twig b/templates/media/responsive-image.html.twig
deleted file mode 100644
index c6acfe95..00000000
--- a/templates/media/responsive-image.html.twig
+++ /dev/null
@@ -1,18 +0,0 @@
-{#
-/**
- * @file
- * Default theme implementation of a responsive image.
- *
- * Available variables:
- * - sources: The attributes of the
+
diff --git a/tokens/undefined/borders.twig b/tokens/undefined/borders.twig
new file mode 100644
index 00000000..c13bbdda
--- /dev/null
+++ b/tokens/undefined/borders.twig
@@ -0,0 +1,16 @@
+Border Radius Tokens
+ +-
+ {% for radius, value in _context.radius %}
+
-
+ {{radius}}
+ {{value.value}}px
+
+
var(--radius-{{radius}})+ + +
+ {% endfor %}
+
+
diff --git a/tokens/undefined/breakpoints.twig b/tokens/undefined/breakpoints.twig
new file mode 100644
index 00000000..69b1cfed
--- /dev/null
+++ b/tokens/undefined/breakpoints.twig
@@ -0,0 +1,16 @@
+Border Tokens
+ +-
+ {% for border, value in _context.border %}
+
-
+ {{border}}
+ {{value.value}}px
+
+
var(--border-{{border}})+ + +
+ {% endfor %}
+
+
diff --git a/tokens/undefined/color.twig b/tokens/undefined/color.twig
new file mode 100644
index 00000000..c1aaf1f7
--- /dev/null
+++ b/tokens/undefined/color.twig
@@ -0,0 +1,45 @@
+Breakpoint Tokens
+ +-
+ {% for breakpoint, value in _context.breakpoint %}
+
-
+ {{breakpoint}}
+ {{value.value}}px
+
+
var(--breakpoint-{{breakpoint}})+ + +
+
+
+{% endfor %}
+
diff --git a/tokens/undefined/line-height.twig b/tokens/undefined/line-height.twig
new file mode 100644
index 00000000..4cfd232a
--- /dev/null
+++ b/tokens/undefined/line-height.twig
@@ -0,0 +1,18 @@
+{% set text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." %}
+
+Colors
+ + {% for color, value in _context.colors %} +{{ color }}
+ {% if value.value is defined %} +-
+
-
+ {{ color }}
+ {{value.value}}
+
+
var(--color-{{color}})+ + +
+
-
+ {% for nestedColor, nestedValue in value %}
+ {% if nestedValue.value is defined %}
+
-
+ {{ nestedColor }}
+ {{nestedValue.value}}
+
+
var(--color-{{ color|lower|replace({'emulsifyblue': 'emulsify-blue'}) }}-{{nestedColor}})+ + +
+ {% else %}
+ {% for colorFamily, colorFamilyValue in nestedValue %}
+ -
+ {{ nestedColor }} {{ colorFamily }}
+ {{ colorFamilyValue.value }}
+
+
var(--color-{{ color|lower }}-{{ nestedColor }}-{{colorFamily}})+ + +
+ {% endfor %}
+ {% endif %}
+ {% endfor %}
+
+
diff --git a/tokens/undefined/motion.twig b/tokens/undefined/motion.twig
new file mode 100644
index 00000000..594c491b
--- /dev/null
+++ b/tokens/undefined/motion.twig
@@ -0,0 +1,11 @@
+Line Heights
+ +-
+ {% for lineHeight, value in _context.lineHeight|reverse %}
+
-
+ {{lineHeight}}
+ {{value.value}}
+
+
var(--line-heights-{{lineHeight}})+ + {{text}} +
+ {% endfor %}
+
+
diff --git a/tokens/undefined/motion.yml b/tokens/undefined/motion.yml
new file mode 100644
index 00000000..6f1c8868
--- /dev/null
+++ b/tokens/undefined/motion.yml
@@ -0,0 +1,5 @@
+motions:
+ - name: 'Fade'
+ - name: 'Slide Up'
+ - name: 'Slide Down'
+ - name: 'Expand'
diff --git a/tokens/undefined/opacity.twig b/tokens/undefined/opacity.twig
new file mode 100644
index 00000000..4516bf55
--- /dev/null
+++ b/tokens/undefined/opacity.twig
@@ -0,0 +1,16 @@
+Motion
+
+ {% for motion in motions %}
+
+
+
+ {% endfor %}
+ {{ motion.name }}
+ +
+
diff --git a/tokens/undefined/sizes.twig b/tokens/undefined/sizes.twig
new file mode 100644
index 00000000..a727eee2
--- /dev/null
+++ b/tokens/undefined/sizes.twig
@@ -0,0 +1,16 @@
+Opacity Tokens
+ +-
+ {% for opacity, value in _context.opacity %}
+
-
+ {{opacity}}
+ {{value.value}}
+
+
var(--radius-{{opacity}})+ + +
+ {% endfor %}
+
+
diff --git a/tokens/undefined/spacing.twig b/tokens/undefined/spacing.twig
new file mode 100644
index 00000000..1f84cb12
--- /dev/null
+++ b/tokens/undefined/spacing.twig
@@ -0,0 +1,21 @@
+Size Tokens
+ +-
+ {% for size, value in _context.size %}
+
-
+ {{size}}
+ {{value.value}}px
+
+
var(--size-{{size}})+ + +
+ {% endfor %}
+
+
diff --git a/tokens/undefined/type-faces.twig b/tokens/undefined/type-faces.twig
new file mode 100644
index 00000000..5208c4f5
--- /dev/null
+++ b/tokens/undefined/type-faces.twig
@@ -0,0 +1,15 @@
+Spacing Tokens
+ +-
+ {% for spacing, value in _context.spacing %}
+
-
+ {{spacing}}
+ {{value.value}}px
+
+
var(--spacing-{{spacing}})+ + +-
+ {% for i in [1,1,1,1,1,1,1] %}
+
+ {% endfor %}
+
+ {% endfor %}
+
+
diff --git a/tokens/undefined/type-scale.twig b/tokens/undefined/type-scale.twig
new file mode 100644
index 00000000..4174fdcd
--- /dev/null
+++ b/tokens/undefined/type-scale.twig
@@ -0,0 +1,18 @@
+Type Faces
+ +-
+ {% for fontFamily, value in _context.fontFamily %}
+
-
+ {{value.value}}
+
+
var(--font-family-{{fontFamily}})+ +{{fontFamily}}
+
+ {% endfor %}
+
+
diff --git a/util/undefined/controlData.yml b/util/undefined/controlData.yml
new file mode 100644
index 00000000..3d7e17cc
--- /dev/null
+++ b/util/undefined/controlData.yml
@@ -0,0 +1,5 @@
+color_variant:
+ - 'base'
+ - 'dark'
+ - 'light'
+ - 'bright'
diff --git a/webpack/app.js b/webpack/app.js
deleted file mode 100644
index 824fcb3b..00000000
--- a/webpack/app.js
+++ /dev/null
@@ -1 +0,0 @@
-// Empty (needed for webpack)
diff --git a/webpack/css.js b/webpack/css.js
deleted file mode 100644
index 79af12e9..00000000
--- a/webpack/css.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../src/style.scss';
diff --git a/webpack/loaders.js b/webpack/loaders.js
deleted file mode 100644
index d744fb5b..00000000
--- a/webpack/loaders.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const globImporter = require('node-sass-glob-importer');
-
-const JSLoader = {
- test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
-};
-
-const ImageLoader = {
- test: /\.(png|svg|jpg|gif)$/i,
- exclude: /icons\/.*\.svg$/,
- loader: 'file-loader',
-};
-
-const CSSLoader = {
- test: /\.s[ac]ss$/i,
- exclude: /node_modules/,
- use: [
- MiniCssExtractPlugin.loader,
- {
- loader: 'css-loader',
- options: {
- sourceMap: true,
- url: false,
- },
- },
- {
- loader: 'postcss-loader',
- options: {
- sourceMap: true,
- },
- },
- {
- loader: 'sass-loader',
- options: {
- sourceMap: true,
- sassOptions: {
- importer: globImporter(),
- outputStyle: 'compressed',
- },
- },
- },
- ],
-};
-
-const SVGSpriteLoader = {
- test: /icons\/.*\.svg$/, // your icons directory
- loader: 'svg-sprite-loader',
- options: {
- extract: true,
- spriteFilename: '../dist/icons.svg',
- },
-};
-
-const FontLoader = {
- test: /.(woff|woff2|ttf|eot|otf|svg)$/,
- loader: 'file-loader',
- include: [/fonts/],
-};
-
-module.exports = {
- JSLoader,
- CSSLoader,
- SVGSpriteLoader,
- ImageLoader,
- FontLoader,
-};
diff --git a/webpack/plugins.js b/webpack/plugins.js
deleted file mode 100644
index 115310aa..00000000
--- a/webpack/plugins.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-const path = require('path');
-const webpack = require('webpack');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const _ImageminPlugin = require('imagemin-webpack-plugin').default;
-const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
-const glob = require('glob');
-
-const _StyleLintPlugin = require('stylelint-webpack-plugin');
-const _ESLintPlugin = require('eslint-webpack-plugin');
-
-const imagePath = path.resolve(__dirname, '../images');
-
-const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
- filename: 'style.css',
- chunkFilename: '[id].css',
-});
-
-const ImageminPlugin = new _ImageminPlugin({
- disable: process.env.NODE_ENV !== 'production',
- externalImages: {
- context: imagePath,
- sources: glob.sync(path.resolve(imagePath, '**/*.{png,jpg,gif,svg}')),
- destination: imagePath,
- },
-});
-
-const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
- plainSprite: true,
-});
-
-const ProgressPlugin = new webpack.ProgressPlugin();
-
-const StyleLintPlugin = new _StyleLintPlugin({
- configFile: path.resolve(__dirname, '../', '.stylelintrc'),
- context: path.resolve(__dirname, '../', 'src/components'),
- files: '**/*.scss',
-});
-
-const ESLintPlugin = new _ESLintPlugin({
- context: path.resolve(__dirname, '../', 'src/components'),
- extensions: ['js'],
-});
-
-module.exports = {
- ProgressPlugin,
- MiniCssExtractPlugin,
- ImageminPlugin,
- SpriteLoaderPlugin,
- CleanWebpackPlugin: new CleanWebpackPlugin({
- cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
- cleanAfterEveryBuildPatterns: ['remove/**', '!js', '!*.{png,jpg,gif,svg}'],
- }),
- StyleLintPlugin,
- ESLintPlugin,
-};
diff --git a/webpack/svgSprite.js b/webpack/svgSprite.js
deleted file mode 100644
index b5873bf4..00000000
--- a/webpack/svgSprite.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function requireAll(r) {
- r.keys().forEach(r);
-}
-
-requireAll(require.context('../images/', true, /\.svg$/));
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
deleted file mode 100644
index 8bb403de..00000000
--- a/webpack/webpack.common.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const loaders = require('./loaders');
-const plugins = require('./plugins');
-
-const webpackDir = path.resolve(__dirname);
-const rootDir = path.resolve(__dirname, '..');
-const distDir = path.resolve(rootDir, 'dist');
-
-function getEntries(pattern) {
- const entries = {};
-
- glob.sync(pattern).forEach((file) => {
- const filePath = file.split('src/components/')[1];
- const newfilePath = `js/${filePath.replace('.js', '')}`;
- entries[newfilePath] = file;
- });
-
- entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
- entries.css = path.resolve(webpackDir, 'css.js');
-
- return entries;
-}
-
-module.exports = {
- stats: {
- errorDetails: true,
- },
- entry: getEntries(
- path.resolve(
- rootDir,
- 'src/components/**/!(*.stories|*.component|*.min|*.test).js',
- ),
- ),
- module: {
- rules: [
- loaders.CSSLoader,
- loaders.SVGSpriteLoader,
- loaders.ImageLoader,
- loaders.JSLoader,
- loaders.FontLoader,
- ],
- },
- plugins: [
- plugins.MiniCssExtractPlugin,
- plugins.ImageminPlugin,
- plugins.SpriteLoaderPlugin,
- plugins.ProgressPlugin,
- plugins.CleanWebpackPlugin,
- plugins.StyleLintPlugin,
- plugins.ESLintPlugin,
- ],
- output: {
- path: distDir,
- filename: '[name].js',
- },
-};
diff --git a/webpack/webpack.dev.js b/webpack/webpack.dev.js
deleted file mode 100644
index 45a6d963..00000000
--- a/webpack/webpack.dev.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
-
-module.exports = merge(common, {
- mode: 'development',
- devtool: 'source-map',
-});
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
deleted file mode 100644
index 9765fa62..00000000
--- a/webpack/webpack.prod.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
-
-module.exports = merge(common, {
- mode: 'production',
-});
Type Scale
+ +-
+ {% for fontSize, value in _context.fontSize|reverse %}
+
-
+ {{fontSize}}
+ {{value.value}}px
+
+
var(--font-size-{{fontSize}})+ + +{{fontSize|capitalize}} +
+
+ {% endfor %}
+